-
表格的作用
在HTML页面中使用表格能更好地展示数据。 -
表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
……
</tr>
……
</table>
(1)<table></table>
是用于定义表格的标签。
(2)<tr></tr>
标签用于定义表格中的行,必须嵌套在<table></table>
标签中。
(3)<td></td>
标签用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。
例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>张三</td> <td>男</td> <td>18</td></tr>
<tr><td>李四</td> <td>女</td> <td>19</td></tr>
<tr><td>王五</td> <td>男</td> <td>20</td></tr>
<tr><td>钱六</td> <td>女</td> <td>21</td></tr>
</table>
</body>
</html>
结果如图:
- 表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里的文本内容加粗居中显示。
基本语法:<th>
表示表头部分
<table>
<tr>
<th>……</th>
……
</tr>
……
</table>
故上述实例代码可更改为:
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张三</td> <td>男</td> <td>18</td></tr>
<tr><td>李四</td> <td>女</td> <td>19</td></tr>
<tr><td>王五</td> <td>男</td> <td>20</td></tr>
<tr><td>钱六</td> <td>女</td> <td>21</td></tr>
</table>
</body>
</html>
结果如图:
- 表格属性
上述标签只是定义了表中的数据,并没有边框,而表格属性可以定义边框。但表格属性实际开发中并不常用,主要通过CSS设置。
表格属性一览:
这些表格标签主要是写入<table></table>
中去。
例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<table align="center" border="1">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张三</td> <td>男</td> <td>18</td></tr>
<tr><td>李四</td> <td>女</td> <td>19</td></tr>
<tr><td>王五</td> <td>男</td> <td>20</td></tr>
<tr><td>钱六</td> <td>女</td> <td>21</td></tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张三</td> <td>男</td> <td>18</td></tr>
<tr><td>李四</td> <td>女</td> <td>19</td></tr>
<tr><td>王五</td> <td>男</td> <td>20</td></tr>
<tr><td>钱六</td> <td>女</td> <td>21</td></tr>
</table>
</body>
</html>
- 表格结构标签
由于表格可能很长,故为更好地表示表格语义,可将表格分割为表格头部和表格主体两部分。
在表格标签中,使用<thead>
表示表格头部,<tbody>
表示表格主体。
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
<thead>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
</thead>
<tbody align="center">
<tr><td>张三</td> <td>男</td> <td>18</td></tr>
<tr><td>李四</td> <td>女</td> <td>19</td></tr>
<tr><td>王五</td> <td>男</td> <td>20</td></tr>
<tr><td>钱六</td> <td>女</td> <td>21</td></tr>
</tbody>
</table>
</body>
</html>
使用<thead></thead>
和<tbody></tbody>
的好处是可以统一定义在头部或主体里的所有表格内容的属性,若是只用<th></th>
和<tr></tr>
那么只能一个个编辑表格属性。
- 合并单元格
在特殊情况下,可以把多个单元格合并成一个。
(1)合并单元格方式
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
(2)目标单元格
跨行合并:最上侧单元格为目标单元格,写合并代码进行合并。
跨列合并:最左侧单元格为目标单元格,写合并代码进行合并。
(3)合并单元格步骤:
1)确定是跨行还是跨列。
2)找到目标单元格,写上合并方式 = 合并单元格数量,例:<td colspan="2"> </td>
3)删除多余单元格。
例:
<!DOCTYPE html>
<html lang="zh-CN">
<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 align="center" border="1" cellspacing="0" width="500" height="250">
<thead>
<tr><th>标题1</th> <th>标题2</th> <th>标题3</th></tr>
</thead>
<tbody align="center">
<tr><td>内容1</td> <td colspan="2">内容2</td></tr>
<tr><td rowspan="2">内容3</td> <td>内容4</td> <td>内容5</td></tr>
<tr><td>内容6</td> <td>内容7</td></tr>
</tbody>
</table>
</body>
</html>
注意:一定要删除被合并的单元格,不然表格会突兀地多出一块表格外的格子。