HTML表格语法与结构
<caption></caption> <!-标题-->
<table> <!--表格-->
<tr> <!--行标签-->
<td></td> <!--单元格-->
<td></td>
</tr>
</table>
带结构的表格
<thead> </thead> 表格的头
<tbody> </tbody> 表格的主题(放数据本体)
<tfoot> </tfoot> 表格的脚,放表格的脚注
ps:标签不能影响布局但是能划分结构
表格属性
width——规定表格的宽度
align——表格相对周围元素的对齐方式
border——规定表格边框的宽度
bgcolor——表格背景颜色
cellpadding——单元边沿与其内容之间的空白
cellspacing——单元格之间的空白
frame——规定外侧边框的哪个部分是可见的
rules——规定内侧边框的哪个部分是可见的
frame——外边框标签属性
void——不显示外侧边框
above——显示上部的外侧边框
below——显示下部的外侧边框
hsides——显示上部和下部的外侧边框
vsides——显示左部和右部的外侧边框
lhs——显示左部的外侧边框
rhs——显示右部的外侧边框
box——在所有死边上显示的外侧边框
border——在所有死边上显示的外侧边框
rules——内边框标签属性
none——没有线
groups——行组与列组之间的线条
rows——行之间的线条
cols——列之间的线条
all——行与列之间的线条
跨列属性
<table >
<tr>
<td colspan="2">xxxx</td>
<td>xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>
跨列合并,下一行就要多一个列,因为和上边的两个列合并了,实际上有三个列。
跨行属性
<table >
<tr>
<td>xxxx</td>
<td rowspan="2">xxxx</td>
<td>xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>
跨行合并,下一行就减少一个列,因为上边的列和下边的列合并了。
表格嵌套
<table >
<tr>
<td>xxxx</td>
<td >
<table>
<tr>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>
说明:1.有完整的表格结构
2.要放到<td>标签中
想要哪个单元格里嵌表格,就在<td>里面加一个完整的表格结构