扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >HTML 表格标签完全指南：掌握表格设计的艺术
  • 0

0
分享到

HTML 表格标签完全指南：掌握表格设计的艺术

HTML、表格、标签、表格结构、表格标题、表格体、表格行、表格列、单元格合并、单元格跨行、单元格跨列 2024-02-28 02:02:26 0人浏览 佚名
摘要

一、HTML 表格标签基本语法 html 表格标签的基本语法为： <table> <caption></caption> <thead> <tr></tr

一、HTML 表格标签基本语法

html 表格标签的基本语法为：

<table>
  <caption></caption>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
  </tbody>
  <tfoot>
    <tr></tr>
  </tfoot>
</table>

其中，

标签表示表格的开始和结束， 标签表示表格表头， 标签表示表格主体， 标签表示表格脚注， 标签表示表格行，
标签表示表格标题，
标签表示表格标题行的单元格， 标签表示表格行的单元格。

二、HTML 表格标签属性

HTML 表格标签的常用属性包括：

  • border：指定表格的边框宽度，单位为像素。
  • cellpadding：指定单元格内边距，单位为像素。
  • cellspacing：指定单元格间距，单位为像素。
  • width：指定表格的宽度，单位可以是像素或百分比。
  • height：指定表格的高度，单位可以是像素或百分比。
  • align：指定表格的对齐方式，可以是 left（左对齐）、center（居中）或 right（右对齐）。
  • valign：指定单元格内容的垂直对齐方式，可以是 top（顶部）、middle（中间）或 bottom（底部）。

三、HTML 表格标题

表格标题使用

标签表示，位于 标签内。表格标题通常用来描述表格的内容，便于用户快速了解表格的含义。

<table>
  <caption>员工信息表</caption>
  ...
</table>

四、HTML 表格体

表格体使用

标签表示，位于
标签内。表格体包含表格的主体内容，即表格中的数据。

<table>
  ...
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
  ...
</table>

五、HTML 表格行

表格行使用

标签表示，位于 标签内。表格行包含表格中的数据行，每一行代表一条记录。

<table>
  ...
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    ...
  </tbody>
  ...
</table>

六、HTML 表格列

表格列使用

标签内。表格列包含表格中的数据列，每一列代表一个字段。

<table>
  ...
  <tbody>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    ...
  </tbody>
  ...
</table>

七、HTML 单元格合并

单元格合并是指将两个或多个单元格合并为一个单元格。单元格合并使用 colspan 属性和 rowspan 属性表示。

<table>
  ...
  <tbody>
    <tr>
      <th colspan="2">姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td rowspan="2">张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
  ...
</table>

八、HTML 单元格跨行

单元格跨行是指将一个单元格跨越多行。单元格跨行使用 rowspan 属性表示。

<table>
  ...
  <tbody>
    <tr>
      <th rowspan="2">姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
  ...
</table>

九、HTML 单元格跨列

单元格跨列是指将一个单元格跨越多列。单元格跨列使用 colspan 属性表示。

<table>
  ...
  <tbody>
    <tr>
      <th colspan="2">姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td colspan="2">20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
  ...
</table>

--结束END--

本文标题: HTML 表格标签完全指南：掌握表格设计的艺术

本文链接: https://lsjlt.com/news/569227.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作
（表头单元格）或 （单元格）标签表示，位于