0
点赞
收藏
分享

微信扫一扫

HTML常用标签之表格标签

程序员阿狸 2022-01-13 阅读 89

表格标签的主要作用是显示、展现数据,使得数据的显示非常规整,提高可读性。
先来介绍三个最常用的表格标签:

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>
  1. 表头单元格标签一般位于表格的第一行或第一列
  2. 表格单元格里面的文本内容会加粗居中显示

最后再介绍两个语义化标签,<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>

下面是预览图~
在这里插入图片描述

举报

相关推荐

0 条评论