表格元素
table
- 表格数据
--通过二维数据表表示的信息
--不应该作为布局使用
- 属性
--border 可以为空字符串,可以为1。如果是1会有一个边框。
- caption 表格的标题
<table>
<caption>照片冲印价格详情</caption>
<thead>
<tr>
<th>相片尺寸</th>
<th>富士</th>
<th>柯达</th>
</tr>
</thead>
</table>
colgroup
- 表示表格中的一组列表
- 属性
--span 默认等于1,表示一列列表
<table border="1">
<colgroup span="2" width="50"> <!--前两列宽度为50像素-->
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
col
- 定义列表上所有公共单元格上的公共语义
- 属性
--span
<table border="1">
<colgroup>
<col width="50"> <!--第一列宽度为50像素-->
<col span="2" width="100"> <!--第二三列列宽度为100像素-->
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
tbody
- 一系列行数据
- 子元素只能是tr
- 可出现多个
<table>
<caption>照片冲印价格详情</caption>
<thead>
<tr>
<th>相片尺寸</th>
<th>富士</th>
<th>柯达</th>
</tr>
</thead>
<tbody>
<tr>
<th>6寸</th>
<td>0.45</td>
<td>0.6</td>
</tr>
</tbody>
</table>
thead
- 定义表格列头的行
tfoot
- 定义表格列简介的行
<table>
<caption>照片冲印价格详情</caption>
<thead>
<tr>
<th>相片尺寸</th>
<th>富士</th>
<th>柯达</th>
</tr>
</thead>
<tbody>
<tr>
<th>6寸</th>
<td>0.45</td>
<td>0.6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">运费8元/单,满99元免运费</td>
</tr>
</tfoot>
</table>
注意顺序是thead->tbody->tfoot, 哪怕手动改了顺序,仍按按照这个顺序读取。
tr
- 表格中的行
<table>
<caption>照片冲印价格详情</caption>
<thead>
<tr>
<th>相片尺寸</th>
<th>富士</th>
<th>柯达</th>
</tr>
</thead>
<tbody>
<tr>
<th>6寸</th>
<td>0.45</td>
<td>0.6</td>
</tr>
<tr>
<th>全景6寸</th>
<td>0.45</td>
<td>0.6</td>
</tr>
<tr>
<th>7寸</th>
<td>0.89</td>
<td>1</td>
</tr>
<tr>
<th>8寸</th>
<td>1.69</td>
<td>2</td>
</tr>
<tr>
<th>10寸</th>
<td>1.69</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">运费8元/单,满99元免运费</td>
</tr>
</tfoot>
</table>
td
- 表格中的单元格
- 属性
--colspan 跨了多少列
--rowspan 跨了多少行
--headers 和单元格相关的th的id
<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">Jack Chu</td>
<td headers="Email">jack_chu@mail.com</td>
<td headers="Phone">123456789</td>
<td headers="Address">Nanjing</td>
</tr>
</table>
td-colspan
<table border="1">
<caption>照片冲印价格详情</caption>
<thead>
<tr>
<th>相片尺寸</th>
<th>富士</th>
<th>柯达</th>
</tr>
</thead>
<tbody>
<tr>
<th>6寸</th>
<td>0.45</td>
<td>0.6</td>
</tr>
<tr>
<th>全景6寸</th>
<td>0.45</td>
<td>0.6</td>
</tr>
<tr>
<th>7寸</th>
<td>0.89</td>
<td>1</td>
</tr>
<tr>
<th>8寸</th>
<td>1.69</td>
<td>2</td>
</tr>
<tr>
<th>10寸</th>
<td>1.69</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">运费8元/单,满99元免运费</td>
</tr>
</tfoot>
</table>
th
- 单元格的标题
- 属性
--colspan、rowspan、headers同td
--scope 表示单元格在某一行列的标题
- row
- col
- rowgroup
- colgroup
- auto
th-rowspan
<table border="1">
<thead>
<tr>
<th>区域</th>
<th>寄达地</th>
<th>首重(元/1000g)</th>
<th>续重(元/1000g)</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">一区</th>
<td>浙江、上海、江苏</td>
<td>6</td>
<td>1</td>
</tr>
<tr>
<td>江西、安徽</td>
<td>7</td>
<td>1</td>
</tr>
<tr>
<th>二区</th>
<td>北京、天津、河北</td>
<td>9</td>
<td>4</td>
</tr>
<tr>
<th>三区</th>
<td>辽宁、甘肃、四川</td>
<td>10</td>
<td>4</td>
</tr>
<tr>
<th>四区</th>
<td>吉林、黑龙江、云南</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<th>五区</th>
<td>新疆、西藏</td>
<td>15</td>
<td>10</td>
</tr>
</tbody>
</table>
th-scope
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th></th>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup">上午</th>
<!--跨了三行,th表示范围是3行-->
<th scope="row">8:00-8:45</th>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<th scope="row">9:00-9:45</th>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>活动</td>
<td>活动</td>
</tr>
<tr>
<th scope="row">10:00-10:45</th>
<td>活动</td>
<td>数学</td>
<td>活动</td>
<td>语文</td>
<td>活动</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">下午</th>
<th scope="row">13:00-13:45</th>
<td>英语</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<th scope="row">14:00-14:45</th>
<td>劳动</td>
<td>数学</td>
<td>语文</td>
<td>活动</td>
<td>英语</td>
</tr>
</tbody>
</table>
</body>
</html>