内容提纲
- 表格简介
- 标签详解
- 表格案例
表格简介
表格不再用于布局页面，用于呈现网页数据
表格呈现多维的结构性数据
信息的可视化趋势，图化、表化
table元素
| 类型 | 取值 |
|---|---|
| 分类 | 流内容-Flow content 可感知内容-Palpable content |
| 元素上下文 | 需要流内容的地方 |
| 内容模型 | 按照下列顺序依次排列：
|
| 属性 |
全局属性 border属性 - 设置边框 sortable属性 - 是否可排序 |
table示例
<table border="1" summary="学生信息表">
<caption>学生信息表</caption>
<thead>
<tr><th>姓名</th><th>性别</th><th>年龄</th><th>班级</th></tr>
</thead>
<tfoot>
<tr><td colspan="4">*描述学生信息</td></tr>
</tfoot>
<tbody>
<tr><td>张三</td><td>男</td><td>20</td><td>软件251</td></tr>
<tr><td>赵四</td><td>女</td><td>18</td><td>软件252</td></tr>
<tr><td>王五</td><td>男</td><td>21</td><td>软件257</td></tr>
<tr><td>田七</td><td>女</td><td>20</td><td>软件254</td></tr>
</tbody>
</table>
| 姓名 | 性别 | 年龄 | 班级 |
|---|---|---|---|
| *描述学生信息 | |||
| 张三 | 男 | 20 | 软件251 |
| 赵四 | 女 | 18 | 软件252 |
| 王五 | 男 | 21 | 软件257 |
| 田七 | 女 | 20 | 软件254 |
table属性
| 属性 | 取值及含义 |
|---|---|
| border | 取值为空字符串或"1", 若为"1"，则为数据表格，否则为布局用表格 |
| sortable | 表格是否可排序 |
| summary | 表格摘要 |
| cellspacing | 单元格间距，单元格边框之间的距离 |
| cellpadding | 单元格填充，单元格内容与边框之间的距离 |
| width | 表格宽度 |
| frame | 表格外边框可见性，void，above，below，hsides，lhs，rhs，vsides，box，border |
| rules | 表格内边框可见性，none，groups，rows，cols，all |
官方建议使用border属性表示是否为“布局”表格
table属性实验
caption元素
表格标题元素，可以利用align属性设置位置，最好利用css设置位置。
| 类型 | 取值 |
|---|---|
| 分类 | 无 |
| 元素上下文 | table元素的第一个子元素 |
| 内容模型 | 流媒体，但是不能是th、tr、td等table的子元素标签 |
| 属性 | 全局属性 |
tr元素
代表表格的行
可以作为thead、tbody、tfoot或table的子元素
| 类型 | 取值 |
|---|---|
| 分类 | 无 |
| 元素上下文 | 可以作为thead、tbody、tfoot和table的子元素 |
| 内容模型 | 0或者多个th或者td |
| 属性 | 全局属性 |
th元素
代表表格的表头单元格，默认粗体居中显示
tr元素的子元素
| 类型 | 取值 |
|---|---|
| 分类 | 无 |
| 元素上下文 | tr元素的子元素 |
| 内容模型 | 流内容，但不能是header、footer、节内容(article、side、nav、section)、标题元素(h1~h6) |
| 属性 |
全局属性 colspan属性，单元格所跨的列数 rowspan属性，单元格所跨的行数 headers属性，跟单元格相关的表头 scope属性，规定某个单元格是否是列、行、列组或行组的表头，可取row、col、rowgroup、colgroup等四个值。 abbr属性，规定单元格中内容的缩写版本 sorted属性，列的排序方向和序数 |
th元素属性示例
<table border="1">
<tr>
<th abbr="Company" scope="col">Company in USA</th>
<th scope="col">Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table>
td元素
代表表格的单元格
tr元素的子元素
| 类型 | 取值 |
|---|---|
| 分类 | 无 |
| 元素上下文 | tr元素的子元素 |
| 内容模型 | 流内容 |
| 属性 |
全局属性 colspan属性，单元格所跨的列数 rowspan属性，单元格所跨的行数 headers属性，跟单元格相关的表头 |
td元素示例
<table border="1" width="100%">
<tr>
<th id="name">Name</td>
<th id="Email">Email</td>
<th id="Phone">Phone</td>
<th id="Address">Address</td>
</tr>
<tr>
<td headers="name">George Bush</td>
<td headers="Email">someone@example.com</td>
<td headers="Phone">+789451236</td>
<td headers="Address">Fifth Avenue New York,USA</td>
</tr>
</table>
col元素
为表格中一个或多个列定义属性值
| 类型 | 取值 |
|---|---|
| 分类 | 无 |
| 元素上下文 | 没有span属性的colgroup |
| 内容模型 | 空 |
| 属性 |
全局属性 span属性，该元素横跨的列数 |
col元素示例
<table width="100%" border="1">
<col style="width: 20%;">
<col style="width: 40%;">
<col style="width: 40%;">
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |
colgroup元素
为表格中一个或多个列定义属性值
| 类型 | 取值 |
|---|---|
| 分类 | 无 |
| 元素上下文 | table元素的子元素，caption之后，thead\tfoot\tbody、tr之前 |
| 内容模型 | col元素 |
| 属性 |
全局属性 span属性，该元素横跨的列数 |
colgroup元素示例
<table width="100%" border="1">
<col style="background:none;">
<colgroup span="2" style="background:rgba(0,0,100,.2);"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |