开发者社区> twilight0402> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML_表格实例

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53968785 1.
+关注继续查看
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53968785

1. 基本表格

基本表格

<!--基本表格-->
                <table border='2' width='600' cellpadding='5' cellspacing='0'>
                    <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

2. 无边框表格

只需去掉1中的border即可

无边框表格

3. 双线表格

将1中的cellspacing设为非0即可。
双线表格

4. 合并多列表格

td属性:
width: 单元格宽度
height: 单元格高度
bgcolor: 背景颜色
background: 背景图片
align: 单元格的水平对齐方式
valign: 单元格的垂直对齐方式(top/middle/bottom/baseline)
rowspan: 行合并数目
colspan: 列合并数目(特定长度的单元格,不会删除后面的单元格)

tr属性:
align right/left/center/justify/char 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)/#xxxxxx/colorname 规定表格行的背景颜色。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top/middle/bottom/baseline 规定表格行中内容的垂直对齐方式。


用colspan产生3个长度的单元格,再用align将单元格内的文字居中即可

列合并

<!--列合并-->
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td colspan='3' align='middle'>1.1</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

5. 合并多行表格

行合并

                <li>行合并表格</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td rowspan='3' align='middle' valign='middle'>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

6. 复杂表格1

混合使用行和列的合并

复杂表格1


                <li>复杂表格1</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td>1.1</td>
                        <td colspan='2' align='middle'>1.2+1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td rowspan='2' align='middle'>2.2+3.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.3</td>
                    </tr>
                </table>

7. 复杂表格2

复杂表格2

                <li>复杂表格2</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td colspan='2' align='middle'>2.1+2.2</td>
                        <td rowspan='2' valign='middle' align='middle'>2.3+3.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                    </tr>
                </table>

8. 凸起效果表格

table属性:
bordercolorlight: 边框亮部分的颜色(边框border大于1才有用)(单元格的右下,整个表格的左上)
bordercolordark:边框暗的部分(单元格的左上,整个表格的右下)

凸起效果

<!--凸起效果-->
                <table border='2' width='600' cellpadding='5' cellspacing='2' bordercolorlight='black' bordercolordark='white' bgcolor='gray'>
                <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

9. 凹陷效果表格

将8中的颜色逆置
凹陷效果

10. 细线表格

1.表格自身的border=0
2.给表格设置背景颜色(细线的颜色)
3.给表格设置单元格之间的距离(线条的粗细)

细线表格

<!--细线表格-->
                <table  width='600' cellpadding='0' cellspacing='1' bgcolor='black'>
                    <tr bgcolor='white'>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr bgcolor='white'>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr bgcolor='white'>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

th标题栏(文字加粗_自动居中)
<center>将center包括的所有内容居中。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
『html5、css3』将视频做为网页背景 超炫!
效果图展示 仿墨迹天气首页 github项目地址:https://github.com/Ethan997/Video-background-page PC端网页效果预览:http://www.
3060 0
【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css
<div style="margin:0px; padding:0px; max-width:100%; color:rgb(51,51,51); font-family:Arial,'Microsoft YaHei'; line-height:26.0400009155273px; height:auto!important; word-wrap:break-word!important
1896 0
+关注
134
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载