本节大纲
- 课时37表格标签基本使用(理解)
- 课时38表格标签的属性(了解)
- 课时39细线表格(理解)
- 课时40表格中的其它标签(理解)
- 课时41表格的结构(了解)
- 课时42单元格合并(理解)
- 课时43表格练习(了解)
表格标签<table>
其实在过去，表格标签用的非常多，绝大多是web都是用它做的
作用
为一对数据添加表格语义，对很大数据时，table将会展示的非常清晰
格式
<table>
<tr>
<td></td>
</tr>
</table>
- table：一对table标签就是一个表格
- tr：行
- td：列
ps:默认表格边框宽度为0，是看不见的，需要给table添加border属性
表格标签的属性
- 水平对齐（table、tr、tb）垂直对齐（tr、td）
- align属性控制水平位置
- valign属性控制垂直位置
- 内外边距（table）
- 外边距：单元格与单元格之间的距离
- cellspacing属性控制距离，默认情况下，其间的距离是2
- 内边距：文字距离单元格边框的距离
- cellpadding属性控制距离，默认情况下，其间的距离是1
- 外边距：单元格与单元格之间的距离
- 宽度高度（table、td）
- 可以使用width/height指定，未指定的将按照内容进行自动适配
- 如果给td修改高宽，不会影响整个表格的高度和宽度
细线表格
使用bgcolor属性来实现
- 新建表格table
- 先把table的bgcolor改为黑色
- 然后把行的bgcolor改为白色
- 然后把cellspacing改为1px
注意点：
- table、tr、td标签都支持bgcolor属性。但以上内容仅作为了解，还是老规矩，css管样式！！
表格中的其他标签
- caption标签，表格的专用标题标签
- 要写在table标签中，否则无效
- th标签，标题单元格标签，只要将当前列的标题存储在其中，就会自动将文本居中加粗
- 到此，我们知道了两种单元格，一个是td，一个th；td存数据，th放列标题的
表格的结构
表格要是较为复杂，为了便于管理，我们可对表格分类，共分为四类
- 表格的标题
- 表格的表头信息
- 表格的主体信息
- 表格的页尾信息
表格的完整结构
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容<td>
</tr>
</tbody>
<tfoot>
<tr>
<td>内容<td>
</tr>
</tfoot>
</table>
caption 表格标题
thead 表头信息
tbody 主题内容
tfoot 表尾信息
注意点：
- 若没有编写tbody，系统会自动添加
- 若指定了thead和tfoot，他们都是有自己默认的高度的，不会随这改变table属性而变化
- 企业开发是不会用这些东西的
单元格合并
- 水平方向的合并
- 添加colspan="n"属性
- 由于一个当n个用，那就应该删除这行多出来的单元格
- 单元格合并都是向后或者向下合并，而不能向前或者向上合并
- 垂直方向的合并
- 添加rowspan="n"属性
- 同上，记得删除多出来的单元格
