Table标签和案例

最新推荐文章于 2024-04-19 20:39:07 发布

DOGjuan

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量255

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_47770917/article/details/125896695

版权

本文详细介绍了HTML中的table标签及其相关标签th、tr和td的使用，包括边框、内容边距等属性设置，并通过实例展示了如何创建和布局表格，包括单元格的跨行和跨列操作。此外，还提供了内嵌表格的创建方法，帮助理解HTML表格的复杂布局。

摘要由CSDN通过智能技术生成

一、table及相关标签

table 是用于定义表格的标签。
th 标签用于定义表格中的表头，自动加粗，居中。
tr 标签用于定义表格中的行，必须嵌套在 table标签中，一组tr标签就是一行。
td 用于定义表格中的单元格，必须嵌套在tr标签中。
字母 td 是普通单元格。

二、table常用的属性

边框属性 border
table内容边距 cellpadding
table单元格之间的距离 cellspacing
占据的行数 rowspan
占据的列数 colspan
table 表格的标题 caption

三、表格标签案例

标签案例如下（示例）：
在这里插入图片描述

代码如下（示例）：

<table border="5px" width="50%" cellpadding="20px" cellspacing="10px" align="center">
        <!-- cellpadding 单元格内补；cellspacing 单元格边距 -->
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td rowspan="2" align="center">101</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td colspan="2">李四</td>
        </tr>
        <tr>
            <td colspan="3">
                <table border="" width="100%" style="text-align: center;">
                    <tr>
                        <td>中国</td>
                        <td>河南</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>