前端(3)表格table
表格的标签:
table:一个表格区域
thead:表头区
tbody:表内容区
tfoot:表底区
thead、tbody、tfoot的分区,用于方便区分,可以不写
tr:一个表格行
th:一个表头格
td:一个表内容格
通常,tr放在thead、tbody、tfoot里面,th、td放在tr里面。
例如:
<table border="1"> <caption><b>学员信息表</b></caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>Jack</td> <td>1</td> </tr> <tr> <td>02</td> <td>Max</td> <td>1</td> </tr> <tr> <td>03</td> <td>Van</td> <td>2</td> </tr> </tbody> <tfoot> <tr> <td>04</td> <td>John</td> <td>3</td> </tr> <tr> <td>05</td> <td>Lucy</td> <td>3</td> </tr> </tfoot> </table>
表格的属性:
rowspan :跨行合并,该单元格向下合并n行,在下面的行中,会自动跳过该列,注意排版
colspan :本行合并,该单元格向右合并n列,注意排版
例如:
<table border="1"> <caption><b>学员信息表</b></caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td>01</td> <td rowspan="2">Jack</td> <td>1</td> </tr> <tr> <td>02</td> <!--<td>Max</td>--> <td>1</td> </tr> <tr> <td colspan="2">03</td> <!--<td>Van</td>--> <td>2</td> </tr> </tbody> <tfoot> <tr> <td>04</td> <td rowspan="2" colspan="2">John</td> <!--<td>3</td>--> </tr> <tr> <td>05</td> <!--<td>Lucy</td>--> <!--<td>3</td>--> </tr> </tfoot> </table>
表格的样式:
border-collapse:
collapse 边框合并,如果相邻的话,共用一个框
separate 默认值,边框分开,不合并
例如:
<style> table{ width: 200px; height: 200px; border-collapse: collapse; } </style>