HTML 表格标签

最新推荐文章于 2024-07-12 11:17:24 发布

iFulling

最新推荐文章于 2024-07-12 11:17:24 发布

阅读量369

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/realoser/article/details/121492995

版权

vscode html5 html

前端专栏收录该内容

35 篇文章 5 订阅

订阅专栏

文章目录

1. 简单的表格
2. 表头单元格：th 标签
3. 表格结构标签
4. 合并单元格方式

表格标签，用来展示数据
<table> 标签定义 HTML 表格。

1. 简单的表格

tr 元素定义表格行，td 元素定义表格单元。
html中表格之间默认有空隙，cellspacing 可以清除空隙
示例代码：

<!-- cellspacing：html中表格之间默认有空隙，cellspacing可以清除空隙 -->
    <table cellspacing="0">
        <!-- 第一个 tr 是第一行 -->
        <tr>
            <!-- 第一个 td 是这一行的第一个 -->
            <td>
                第一行 第一列
            </td>
            <td>
                第一行 第二列
            </td>
        </tr>
        <!-- 第二个 tr 是第二行 -->
        <tr>
            <td>
                第二行 第一列
            </td>
            <td>
                第二行 第二列
            </td>
        </tr>
    </table>

效果：
在这里插入图片描述

2. 表头单元格：th 标签

<th> </th> ：The head 的缩写
表头单元格也是单元格，常用于第一行，文字会加粗居中显示

属性：

（1）align：相对于周围元素对齐。对齐方式：left、center、right
（2）border：是否拥有边框，默认为无边框
（3）cellpadding：单元格沿边与内容之间的空白，默认为1像素
（4）cellspacing：单元格之间的空白，默认为2像素
（5）width：表格的宽度

示例代码：

<style>
    table,
    td,
    th {
        border: 1px solid #000;
    }
    
    td {
        width: 200px;
    }
</style>

<body>
    <!-- cellspacing：html中表格之间默认有空隙，cellspacing可以清除空隙 -->
    <table cellspacing="0">
        <th>第一列表头</th>
        <th>第二列表头</th>
        <!-- 第一个 tr 是第一行 -->
        <tr>
            <!-- 第一个 td 是这一行的第一个 -->
            <td>
                第一行 第一列
            </td>
            <td>
                第一行 第二列
            </td>
        </tr>
        <!-- 第二个 tr 是第二行 -->
        <tr>
            <td>
                第二行 第一列
            </td>
            <td>
                第二行 第二列
            </td>
        </tr>
    </table>

</body>