1.HTML 表格实例
1.1 table 标签来定义有若干行
1.2 tr 标签定义每行被分割为若干个单元格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2.table 相关属性
2.1table 里面的border属性，表示边框的宽度1-3
2.2 table 表格宽度和高度属性 wigth ,height 属性
<table border = "1" width = "400" height = "150">
2.3table里面的颜色属性 1. bgcolor可为整个表格或一个单元格设置背景和颜色
background 可为整个表设置背景图像或一个单元设置背景图像，需要设置url地址
bordercolor 可设置边框的颜色
2.4 cellspacing=表格间隙
3.th 表头单元格属性 表头的内容会加粗，文本会居中
有一些公共属性，align,dir,width,height
4.表格标题 caption 标签作为标题，可以在表格顶部显示出来
<table border="2">
<caption>表格的头部</caption>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>jack</td>
<td>男</td>
</tr>
</table>
5.表格的合并
colspan 将2个或者多个列合并为一个列
rowspan 将2个或者多个行合并
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
6.table 表格结构化标签,突出表格的不同部分，头部，主体，底部，使语义更加清晰
表格结构标签内部用于包裹TR标签
thead 表格头部
tbody 表格主体
tfoot 表格底部
7.这个是一个课程表的操作案例
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>白马山中学课程表</title>
</head>
<body>
<table border="1" cellspacing="" cellpadding="" style="margin: 0 auto;">
<!-- 这个是题目 -->
<caption>白马山中学课程表</caption>
<!-- 这个是头部 -->
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<!-- 这个是内容 -->
<tr>
<td>Data</td>
<td>Data</td>
<td rowspan="3">Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
