您现在的位置是：网站首页 > <table> ：表格的创建文章详情

<table> ：表格的创建

陈川【 HTML 】 7213人已围观

在网页设计中，表格是一种常见的元素，用于展示数据、组织信息或提供结构化布局。HTML（超文本标记语言）提供了 <table> 标签来创建表格，使得网页能够以结构化的方式显示数据。本文将详细介绍如何使用 <table> 标签创建表格，并通过示例代码进行演示。

基本语法

HTML表格的基本结构由 <table>、<tr>（表行）、<th>（表头单元格）和 <td>（普通单元格）标签组成。

<table>
    <!-- 表头 -->
    <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
    </tr>
    <!-- 表格主体 -->
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>更多数据1</td>
        <td>更多数据2</td>
        <td>更多数据3</td>
    </tr>
</table>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表格示例</title>
</head>
<body>
    <table border="1">
        <!-- 表头 -->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <!-- 表格主体 -->
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>35</td>
            <td>广州</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，我们创建了一个包含三个列（姓名、年龄、城市）的表格，并填充了三行数据。<table> 标签中的 border="1" 属性用于在表格周围添加边框，使其更易于识别。

表格属性

除了基本的结构外，HTML表格还支持多种属性来定制其外观和行为：

border：设置表格边框的宽度。
cellpadding：设置单元格内部与边框之间的空间大小。
cellspacing：设置相邻单元格之间的间距。
width：指定表格的宽度，可以使用百分比或像素值。
align：控制表格在父容器中的对齐方式，如 left, center, right。
summary：为表格添加描述性文字，方便屏幕阅读器用户访问。

结论

HTML的 <table> 标签提供了创建基本表格所需的基础工具。通过合理使用这些标签和属性，可以有效地组织和展示数据。随着HTML5的引入，还出现了更多的表格相关元素和属性，如 <thead>、<tbody> 和 <tfoot>，进一步增强了表格的可读性和功能。了解并熟练运用这些元素是构建高效、易维护网页的关键技能之一。

我的名片

网名：川

职业：前端开发工程师

现居：四川省-成都市

邮箱：chuan@chenchuan.com

站点信息

建站时间：2017-10-06
网站程序：Koa+Vue
本站运行：
文章数量：
总访问量：
微信公众号：扫描二维码，关注我