HTML5表格语法格式详解

HTML5 表格的基本结构

HTML5 表格由 <table> 标签定义,表格中的每一行由 <tr> 标签定义,表头单元格由 <th> 标签定义,数据单元格由 <td> 标签定义。表格的基本结构如下:

html 复制代码
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表格的标题

可以使用 <caption> 标签为表格添加标题,标题通常显示在表格的上方。

html 复制代码
<table>
  <caption>表格标题</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表格的表头和表体

可以使用 <thead><tbody><tfoot> 标签分别定义表格的表头、表体和表脚部分。

html 复制代码
<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表脚1</td>
      <td>表脚2</td>
    </tr>
  </tfoot>
</table>

合并单元格

可以通过 colspanrowspan 属性合并单元格。colspan 用于合并列,rowspan 用于合并行。

html 复制代码
<table>
  <tr>
    <th colspan="2">合并的表头</th>
  </tr>
  <tr>
    <td rowspan="2">合并的行</td>
    <td>数据1</td>
  </tr>
  <tr>
    <td>数据2</td>
  </tr>
</table>

表格的样式和边框

可以通过 CSS 为表格添加样式和边框。使用 border 属性可以设置表格边框,但推荐使用 CSS 进行样式控制。

html 复制代码
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表格的响应式设计

为了使表格在移动设备上具有良好的显示效果,可以使用 overflow-x: auto; 来添加水平滚动条。

html 复制代码
<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </table>
</div>
相关推荐
Danny_FD10 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip15 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济21 分钟前
后端程序员的CSS复习
前端
Enddme24 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员25 分钟前
微信小程序使用 Tailwind CSS version 3
前端
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas
每天开心1 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌1 小时前
el-input-number出现的点击+-按钮频现不生效
前端
三小河1 小时前
contentEditable 实现可编辑区域
前端