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>
相关推荐
伍哥的传说37 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783839 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为