- html5表格标签
- 表格
- 2019-01-09第三天
- 2015年11月5日
- 2018-11-28
- 第5单元 个性月历
- 零基础Web前端开发(5)
- html基础
- HTML基础
- 2-12. 表格标签中的其他标签
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>表格</title> <style type="text/css"> table{ border: 5px red solid; width: 800px; height: 580px; /*合并表格边框*/ border-collapse:collapse; empty-cells: show; /*hide 隐藏没有内容的单元格 */ text-align: center; /*文字竖直方向(文本属性会继承父级) 需要改变文字竖直居中的时候,不可以写在table里面。因为tbody默认是middle,td会默认继承tbody的样式。 */ /*vertical-align: ;*/ } td{ vertical-align: top; /*border: 1px red solid;*/ } </style> </head> <body> <!-- 表格 --> <!-- border 可以给table添加边框,注意:和我们之前在CSS样式里面写的border不是一个东西,border写在标签里代表的是属性。 --> <!-- 表格的宽和高可以通过 width和height!属性! 来设置,也可以通过CSS样式width和height来设置,同时设置以css为准 可以通过设置表格第一行里面的td或th来设置一列的宽度,总宽度超出整个表格的宽度之后按照比例分配。 可以给每个tr里面的第一个td(或th)设置高度来设置表格每行的高度,总高度超出表格高度之后,会把表格高度撑开。 cellspacing 可以设置单元格之间的间距。(边框合并的情况下无效) border-collapse:collapse; 合并单元格边框。变成一条线 --> <table border="1" width="500" height="300" cellspacing="10" cellpadding="50"> <!-- 表格的名字 --> <caption>成绩</caption> <!-- 表头 --> <!-- <thead></thead> --> <!-- 身体,表格的内容 --> <!-- thead,tfoot 都不经常使用,可以省略, tbody当我们不写的时候,浏览器会自动给我们添加,所以也可以省略 --> <!-- <tbody> --> <!-- tr <table row> 代表的是一行,每行有几个单元格取决于td或者th(第一行的标题) --> <tr> <th width="400" height="300" colspan="2">语文 数学</th> <!-- <th width="300">数学</th> --> <th width="500" rowspan="2">外语</th> </tr> <tr> <td height="200">100</td> <td rowspan="3">100</td> <!-- <td>100</td> --> </tr> <tr> <td height="200">90</td> <!-- <td>90</td> --> <td>90</td> </tr> <tr> <td height="200">0</td> <!-- <td>0</td> --> <td>0</td> </tr> <!-- </tbody> --> <!-- 表尾 --> <!-- <tfoot></tfoot> --> </table> </body> </html>
网友评论