表格基础

列表是只有列存在的表格,布局从上到下的;

表格是小单元格组成的,而这些小单元格很有次序的排列着,一个表格通常由许多行许多列组成的。

<table>标签

<table>...<table>标签用在HTML文档中创建表格。它包含表名和表格本身的内容的代码

<tr>标签

<tr>标签用于定义每一行

<td>标签

<td>标签用于定义每一列

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
浏览器效果展示
浏览器效果展示

注:上方的显示效果并没有边框,所以需要补充边框来更好显示

1
2
3
4
5
6
7
8
9
10
<table border='1'>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

注:border=‘1’是指表格边框的厚度为1像素(px),它的默认值是0

表格的其他常用属性:

属性名 含义 常用属性值
cellspacing 设置单元格与单元格的距离 单位为px像素值,默认2px
cellpadding 设置文字与单元格间的距离 默认为1px
width 设置表格的宽度 单位为px
height 设置表格的高度 单位为px
bgcolor 设置背景颜色 red,green等

注:其余属性的使用和border类似,只需要在table标签中添加属性即可。

<th>元素添加表头

表头一般位于表格的第一行第一列,其文本加粗居中显示,就类似于课程表上的第一行日期的显示,而表头的设置很简单就是用<th></th>代替<td></td>即可

1
2
3
4
5
6
7
8
9
10
<table border='1' width='300px' height='150px'>
<tr>
<th>周一</th>
<th>周二</th>
</tr>
<tr>
<td>数学</td>
<td>计算机</td>
</tr>
</table>

单元格跨行跨列

绘制表格时,需要合并单元格,但在HTML中提供了colspan(合并列)rowspan(合并列)属性来实现这一效果

colspan又称为跨列,rowspan又称为跨行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border='1' width='300px' height='150px'>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<th rowspan='2'>上午</th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>计机</td>
<td>高数</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<!-- <th rospan='2'>上午</th> -->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>计机</td>
<td>高数</td>
<td>化学</td>
<td>物理</td>
</tr>
</table>

注:设置rowspan='2'表示合并该列上的两个单元格,同理可以设置colspan来合并行

高级表格特性和可访问性

caption元素定义表格标题

caption标签必须紧随table标签之后,只能对每个表格定义一个标题,通常这个标题会被居中与表格之上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table border='1' width='300px' height='150px'>
<caption>课程表</caption>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<th rowspan='2'>上午</th>
<td>English</td>
<td>Math</td>
<td>Chinese</td>
<td>Chmistry</td>
<td>Music</td>
</tr>
<tr>
<td>English</td>
<td>Chinese</td>
<td>Math</td>
<td>Music</td>
<td>Physics</td>
</tr>
</table>

复杂表格的结构

  • <thread></thread>:用于定义表格的头部,一般包含网页的logo和导航等头部信息,位于<table></table>之中

  • <tfoot></tfoot>:用于定义表格的页脚,一般包含网页底部的企业信息,地址联系方式等,位于<table></table>之中

  • <tbody></tbody>:用于定义表格的主体,一般包含网页中除头部和底部之外的其他内容,位于<table></table>标记之中,<tfoot></tfoot>标记之后

挑战:绘制细线课程表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<! DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Class</title>
</head>
<body>
<table width='300' height='200' bgcolor='green' cellspacing='1' align='center'>
<caption>课程表</caption>
<tr bgcolor='white'>
<th width='80' colspan='2'></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>

<tr bgcolor='white'>
<td rowspan='2' width='50'>上午</td>
<td width='30'>1</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>地理</td>
</tr>

<tr bgcolor='white'>
<td>2</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>音乐</td>
<td>历史</td>
</tr>

<tr bgcolor='white' align='center'>
<td colspan='7' height='50'>午休时间12点到2点</td>
</tr>

<tr bgcolor='white'>
<td rowspan='2' height='50'>下午</td>
<td>1</td>
<td>体育</td>
<td>语文</td>
<td>数学</td>
<td>历史</td>
<td>生物</td>
</tr>

<tr bgcolor='white'>
<td>2</td>
<td>音乐</td>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>历史</td>
</tr>
</table>
</body>
</html>