学习要点
- 表格元素汇总
- 构建表格解析
一、表格元素汇总
表格的基本构成最少需要三个元素:< table >、< tr >、< td >,其他的一些作为可选铺助存在。
元素名称 | 说明 |
---|
table | 表示表格 |
thead | 表示标题行 |
tbody | 表示表格主体 |
tfoot | 表示表脚 |
tr | 表示一行单元格 |
th | 表示标题行单元格 |
td | 表示单元格 |
col | 表示一列 |
colgroup | 表示一组列 |
caption | 表示表格标题 |
二、构建表格解析
1、table、tr、td构建基础表格
<table border="1">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
解释:< table > 元素表示一个表格的声明,< tr >元素表示表格的一行,< td > 元素表示行数据。
2、< th > 为表格添加标题单元格
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<table border="1" style="width:300px;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<table border="1" style="width:300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</table>
基本情况 | 姓名 | 性别 | 婚姻 |
---|
张三 | 男 | 未婚 |
李四 | 女 | 已婚 |
统计:共两人 |
<table border="1" style="width:300px">
<tr>
<th rowspan="4">基本情况</th>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</table>
解释:< th > 元素主要是添加标题行的单元格,实际作用就是将内部文字居中且加粗。这里使用一个通用属性style,主要用于CSS样式设置,以后会涉及到。< th > < td > 均属于单元格,包行两个合并属性:colspan(横向合并)、rowspan(纵向合并)等。
3、< thead > 添加表头
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
</table>
解释:< thead > 元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头,它的位置是不固定的,使用此元素可以限定在开头位置。
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
解释:< tfoot > 元素为表格生成表脚,限制在表格的底部。
5、< tbody > 添加表主体
<table border="1" style="width:300px;">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
解释:< tbody > 元素主要是包含住非表头表脚的主体部分,有助于表格格式的清晰,更加有助于后续CSS和JavaScript的控制。
6、 < caption > 添加表格标题
这个是表格信息
姓名 | 性别 | 婚姻 |
---|
张三 | 男 | 未婚 |
李四 | 女 | 已婚 |
统计:共两人 |
<table border="1" style="width:300px;">
<caption>这个是表格信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
解释:< caption > 元素给表格添加一个标题。
7、设置行和< colgroup > 设置列
设置行
姓名 | 性别 | 婚姻 |
---|
张三 | 男 | 未婚 |
李四 | 女 | 已婚 |
统计:共两人 |
<table border="1" style="width:300px;">
<caption style="color:red;">设置行</caption>
<thead>
<tr style="background: red;">
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
colgroup设置列
姓名 | 性别 | 婚姻 |
---|
张三 | 男 | 未婚 |
李四 | 女 | 已婚 |
统计:共两人 |
<table border="1" style="width:300px;">
<caption style="color:red;">colgroup设置列</caption>
<colgroup style="background: red;" span="1"></colgroup>
<colgroup style="background: yellow;" span="1"></colgroup>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr style="background: balck;">
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
解释:< colgroup > 元素是为了处理某个列,span属性定义处理哪些列。1表示第一列,2表示前两列。如果要单独设置第二列,那么需要声明两个,先处理第一个,将列点移入第二位,再处理第二个即可。
8、< col > 更灵活的设置列
colgroup设置列
姓名 | 性别 | 婚姻 |
---|
张三 | 男 | 未婚 |
李四 | 女 | 已婚 |
统计:共两人 |
<table border="1" style="width:300px;">
<caption style="color:red;">colgroup设置列</caption>
<colgroup>
<col style="background:red;" span="1">
<col>
<col style="background:yellow;" span="1">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr style="background: balck;">
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
解释:< col > 元素表示单独一列,一个表示一列,控制更加灵活。如果设置了span,则控制多列。