002. html篇之《表格》
html篇之《表格》
1. 结构
<table> <!-- 表格标签 -->
<caption>标题，自动居中对齐</caption>
<thead> <!-- 表格结构化-表头，内容始终保持在页面最上方，不受tbody和tfoot摆放顺序影响 -->
<tr> <!-- 行标签 -->
<th>表头,自动加粗，居中对齐</th>
<th></th>
<th></th>
</tr>
<tr>
<td>单元格标签</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody> <!-- 表格结构化-主体，内容始终保持在页面中间，不受thead和tfoot摆放顺序影响 -->
<tr>
<td colspan="2"></td> <!-- 跨列属性,合并同一行2列单元格 -->
<!-- 此单元格删除，以达成跨列合并单元格 -->
<td></td>
</tr>
<tr>
<td rowspan="2"></td> <!-- 跨行属性，合并同一列2行单元格 -->
<td></td>
<td></td>
</tr>
<tr>
<!-- 此单元格删除，以达成跨行合并单元格 -->
<td></td>
<td></td>
</tr>
</tbody>
<tfoot> <!-- 表格结构化-脚注，内容始终保持在页面最下方，不受thead和tbody摆放顺序影响-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<!-- 表格嵌套，在<td></td>中放入完整表格结构 -->
<table>
<tr>
<td></td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
2. <table>表格标签属性
（1）width
表格宽度
px | %
（2）align
表格水平对齐方式
left | center | right
（3）border
表格边框宽度
px
（4）bgcolor
表格背景颜色
rgb | 十六进制 | colorname
（5）cellpadding
单元格边沿与其内容之间的空白
px | %
（6）cellspacing
单元格之间的空白
px | %
（7）frame
规定外侧边框的哪个部分是可见的.
值：
① void
不显示外边框
② above
显示上边
③ below
显示下边
④ lhs
显示左边
⑤ rhs
显示右边
⑥ hsides
显示上下
⑦ vsides
显示左右
⑧ box
显示所有边
⑨ border
显示所有边
（8）rules
规定内侧边框的哪个部分是可见的.
值：
① none
没有线条
② groups
位于行组和列组之间的线条
③ rows
位于行之间的线条
④ cols
位于列之间的线条
⑤ all
位于行和列之间的线条
3. <tr>行标签属性
（1）align
行水平对齐方式
left | center | right | justify | char
（2）valign
行垂直对齐方式
top | middle | bottom | baseline
（3）bgcolor
行背景颜色
rgb | 十六进制 | colorname
4. <td>和<th>单元格标签属性
（1）align
单元格水平对齐方式
left | center | right | justify | char
（2）valign
单元格垂直对齐方式
top | middle | bottom | baseline
（3）bgcolor
单元格背景颜色
rgb | 十六进制 | colorname
（4）width
单元格宽度
px | %
（5）height
单元格高度
px | %
5. <thead>、<tbody>、<tfoot>结构标签属性
（1）align
水平对齐方式
left | center | right | justify | char
（2）valign
垂直对齐方式
top | middle | bottom | baseline
我是弦歌，
一个渴望成长的前端小白，
欢迎您的留言，
更期待您的不吝指正。
若我的内容能帮助到您，欢迎关注我 ♥
记得点赞收藏哦 ♥
热门相关：至尊箭神 第一神算：纨绔大小姐 寂静王冠 人间欢喜 薄先生，情不由己