表格标签的主要作用是显示、展现数据,使得数据的显示非常规整,提高可读性。
先来介绍三个最常用的表格标签:
1. <table> </table>
适用于定义表格的标签
2. <tr> </tr>
用于定义表格中的行,必须嵌套在<table> </table>
中
3. <td> </td>
用于定义表格中的单元格,必须嵌套在<tr> </tr>
中
下面来看看它们的具体实现~
<!DOCTYPE html>
<html lang="en">
<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></tr>
<tr><td>张三</td> <td>6</td></tr>
<tr><td>李四</td> <td>7</td></tr>
<tr><td>王五</td> <td>8</td></tr>
</table>
</body>
</html>
来看看预览图~
除此之外,表头单元格标签<th> </th>
也较为常用
4.<th> </th>
- 表头单元格标签一般位于表格的第一行或第一列
- 表格单元格里面的文本内容会加粗居中显示
最后再介绍两个语义化标签,<thead>
和<tbody>
5.<thead> </thead>
表示表格的头部区域
6.<tbody> </tbody>
表示表格的主体区域
结合以上的五个标签我们来做一个综合使用~
<!DOCTYPE html>
<html lang="en">
<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>
<thead>
<tr>
<th>姓名</th> <th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td> <td>7</td>
</tr>
<tr>
<td>李四</td> <td>8</td>
</tr>
<tr>
<td>王五</td> <td>9</td>
</tr>
</tbody>
</table>
</body>
</html>
下面是预览图~