HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
一、表格实例
<table><tr><td>表格1</td><td>表格2</td></tr><tr><td>表格1</td><td>表格2</td></tr></table>
二、HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1"><tr><td>表格1</td><td>表格2</td></tr><tr><td>表格1</td><td>表格2</td></tr></table>
三、HTML 表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
四、应用
<table width="300" border="1"><!-- 标题 --><caption>表格标题</caption><!-- 表头 --><thead><tr bgcolor="lightgreen"><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr></thead><!-- 表格主体 --><tbody><tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr><tr><td>x</td><td>x</td><!-- 从表体2行3列开始水平方向合并3列 --><td bgcolor="red" colspan="3">x</td><!-- <td>x</td>1<td>x</td>2 --><td>x</td></tr><tr><td>x</td><!-- 在第3行进行垂直方向/行方向合并2个单元格 --><td bgcolor="violet" rowspan="2">x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr><!-- 注意2点: 合并操作一定是发生在单元格上td元素, --><tr><td>x</td><td>x</td><!-- 这一个单元格应该被注释或删除 --><!-- <td>x</td> --><td>x</td><td>x</td><td>x</td></tr></tbody><!-- 可以有多个tbody表格主体 --><!-- 表尾 --><tfoot><tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr></tfoot></table>
注意：
1.表格中的所有数据必须放在单元格td的元素中,必须写到tr中
2.colspan 属性规定一个表格单元格可横跨的列数。(左右合并）
3.rowspan 属性规定一个表格单元格可横跨的行数。 (上下合并)
4.合并操作一定是发生在单元格上td元素,合并属性colspan,rowspan,一定要写到被合并的起始单元格上
案例（小学课表）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格</title><style>td,th {/* 1. 添加表格线,添加给单元格 */border: 1px solid;}table {/* 2. 折叠表格线 */border-collapse: collapse;width: 60%;/* 对齐 */text-align: center;margin: 2em auto;}/* 标题 */table caption {font-weight: bolder;margin-bottom: 1em;}table thead {background-color: lightgreen;}table tbody:not(tbody:nth-of-type(2)) tr:first-child td:first-child {background-color: lightblue}</style></head><body><table><caption>小学课表</caption><thead><tr><th>时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><!-- 上午 --><tbody><tr><td rowspan="4" class="period">上午</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr></tbody><!-- 中午休息 --><tbody><tr><td colspan="6">中午休息</td></tr></tbody><!-- 下午 --><tbody><tr><td rowspan="3" class="period">下午</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr></tbody><!-- 表尾 --><tfoot><tr><td>备注：</td><td colspan="5">每天下午15:30-17:30在校写作业</td></tr></tfoot></table></body></html>
