HTML | 表格
基本结构
- 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
-
表格涉及到的标签：
table：表格caption：表格标题thead：表格头部tbody：表格主体tfoot：表格注脚tr：每一行th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td）
- 具体编码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格_整体结构</title>
</head>
<body>
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
常用属性
| 标签名 | 标签语义 | 常用属性 | 单 / 双 标签 |
|---|---|---|---|
table |
表格 | width ：设置表格宽度。height ：设置表格最小高度，表格最终高度可能比设置的值大。border ：设置表格边框宽度。cellspacing ： 设置单元格之间的间距。 |
双 |
thead |
表格头部 | height ：设置表格头部高度。align ： 设置单元格的水平对齐方式，可选值如下：1. left ：左对齐2. center ：中间对齐3. right ：右对齐valign ：设置单元格的垂直对齐方式，可选值如下：1. top ：顶部对齐2. middle ：中间对齐3. bottom：底部对齐 |
双 |
tbody |
表格主体 | 常用属性与thead 相同。 |
双 |
tr |
行 | 常用属性与thead 相同。 |
双 |
tfoot |
表格脚注 | 双 | |
td |
普通单元格 | width ：设置单元格的宽度，同列所有单元格全都受影响。heigth ：设置单元格的高度，同行所有单元格全都受影响。align ：设置单元格的水平对齐方式。valign ：设置单元格的垂直对齐方式。rowspan ：指定要跨的行数。colspan ：指定要跨的列数。 |
双 |
th |
表头单元格 | 常用属性与td 相同。 |
双 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格_常用属性</title>
</head>
<body>
<table border="1" width="500" height="500" cellspacing="0">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead height="50" align="center" valign="middle">
<tr>
<th width="50" height="50" align="right" valign="bottom">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody height="520" align="center" valign="middle">
<tr height="50" align="center" valign="middle">
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td align="right" valign="top">赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot height="50" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
注意点：
<table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格
边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠CSS控制。默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
给某个
th或td设置了宽度之后，他们所在的那一列的宽度就确定了。给某个
th或td设置了高度之后，他们所在的那一行的高度就确定了。
跨行跨列
rowspan：指定要跨的行数。colspan：指定要跨的列数。
课程表效果：
编写思路：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格_跨行与跨列</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
</tr>
<tr>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
</tr>
<tr>
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
<td>8-7</td>
</tr>
</tbody>
</table>
</body>
</html>
