Investigator Veritatis

14-table表格

2 min read

1 表格基本结构

表格由三个标签嵌套组成，缺一不可：

  • <table>：表格容器，所有内容包裹在其中。
  • <tr>（table row）：表示一行。
  • <td>（table data）：表示一行中的一个单元格。

嵌套关系为：table → tr → td。

2 结构示意

每一个 tr 代表一行，tr 内有几个 td 就代表这一行有几列：

table
├── tr（第一行）
│   ├── td（第一列）
│   ├── td（第二列）
│   └── td（第三列）
├── tr（第二行）
│   ├── td
│   ├── td
│   └── td

3 标签总结

标签全称作用
<table>table表格容器
<tr>table row表格的一行
<td>table data行内的一个单元格

4 完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>➡️ 表格标签</title>
</head>
 
<body>
    <!-- 表格标签,这里可以写很多的属性值 -->
    <table>
        <!-- 表示table row, 表示一行 -->
        <tr>
            <!-- td:　表示数据table data -->
            <td>id</td>
            <td>name</td>
            <td>性别</td>
        </tr>
 
        <tr>
            <td>1</td>
            <td>张小三</td>
            <td>男</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>赵小四</td>
            <td>女</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小五</td>
            <td>女</td>
        </tr>
    </table>
</body>
 
</html>

Recent Notes

Graph View