一.表格元素总汇
表格的基本构成最少需要三个元素:<table>,<tr>,<td>,其他的一些作为可选辅助存在。
元素名称:
table :表示表格
thead:表示标题行
tbody:表示表格主体
tfoot:表示表脚
tr:表示一行单元格
th:表示标题行单元格
td:表示单元格
col:表示一列
colgroup:表示一组列
caption:表示表格标题
1.<table>元素表示一个表格的声明,<tr>元素表示表格的一行,<td>元素表示一个单元格。默认情况下表格是没有边框的,所以,在<table>元素增加一个border 属性,设置为1即可显示边框。
2.<th>为表格添加标题单元格
解释:<th>元素只要是添加标题行的单元格,实际作用就是将内部文字居中且加粗。
这里使用了一个通用属性style,主要用于CSS样式设置,以后会涉及到。<th><td>均属于单元格,包含两个合并属性:colspan是横向合并,rowspan是纵向合并等。
3.<thead>添加表头
解释:<thead>元素就是限制和规范了表格的表头部分,尤其是以后动态生成表头,它的位置是不固定的,使用此元素可以限定在开头位置。
4.<tfoot>添加表脚
解释:<tfoot>元素为表格生成表脚,限制在表格的底部。
5.<tbody>添加表主体
解释:<tbody>元素主要是包含住非表头表脚的主体部分,有助于表格格式的清晰,更加有助于后续CSS和JAVASCRIPT的控制。
6.<caption>添加表格标题
解释:<caption>元素给表格添加一个标题
7.<colgroup>设置列
解释:<colgroup>元素是为了处理某个列,span属性定义处理那些列。1表示第一列,2表示前两列。如果要单独设置第二列,那么需要声明两个,先处理第一个,将列点(即光标)移入第二位,在处理第二列即可。
8.<col>更灵活的设置列
解释:<col>元素表示单独一列,一个表示一列,控制更加灵活。如果设置了span,则表示控制多列。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格元素</title>
</head>
<body>
<table border="1" style="width: 300px;">一个表格, 长度变长,标题单元格里的内容自动居中
<tr>
<th>姓名</th>一个标题单元格
<th>性别</th>标题有加粗功能
<th>婚否</th>
</tr>
<tr>一行
<td>张三</td>一行里的单元格
<td>男</td>td是普通单元格
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br />
<table border="1" style="width: 300px;">一个表格, 长度变长,标题单元格里的内容自动居中
<tr>
<th>姓名</th>一个标题单元格
<th>性别</th>标题有加粗功能
<th>婚否</th>
</tr>
<tr>一行
<td>张三</td>一行里的单元格
<td>男</td>td是普通单元格
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计:共两人</td> colspan合并单元格的作用
</tr>
</table>
<br />
<table border="1" ">
<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>
<br />
<table border="1" ">
<caption>这是一个表格</caption>
<thead>
<tr style="background: red;">将该行的背景设置为红色
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tfoot>
<tr>
<td colspan="3">统计:共两人</td>
</tr>
</tfoot>
</table>
<br />
<table border="1" ">
<colgroup style="background: red;"></colgroup>默认将第一列的背景颜色设置为红色
<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>
<br />
<table border="1" ">
<colgroup style="background: red;" span="1"></colgroup>通过span属性将表格的第一列的背景颜色设置为红色
<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>
<br />
<table border="1" ">
<colgroup style="background: red;" span="2"></colgroup>通过span属性将表格的前两列的背景颜色设置为红色
<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>
<br />
<table border="1" ">如何将第二列的背景颜色设置为红色?
<colgroup style="background: white;" span="1"></colgroup>先将第一列背景颜色设置为白色
<colgroup style="background: red;" span="1"></colgroup>因为光标此时停留在第二列,所以只需设置span属性为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>
<br />
<table border="1" ">更灵活的设置第二列的背景颜色为红色
<colgroup>
<col />利用col标签占位符
<col style="background: red;">
</colgroup>
<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>
</body>
</html>