HTML 表格基础

HTML 表格基础

HTML 表格用于在网页上展示结构化数据。表格由 <table> 标签定义,包含行(<tr>)、表头单元格(<th>)和数据单元格(<td>)。

html 复制代码
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

表格边框与样式

默认情况下,HTML 表格无边框。可以通过 CSS 或 border 属性添加边框。

html 复制代码
<table border="1">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

推荐使用 CSS 控制样式:

html 复制代码
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

合并单元格

使用 colspanrowspan 属性可以合并单元格。

html 复制代码
<table border="1">
  <tr>
    <th colspan="2">姓名与年龄</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>26</td>
  </tr>
</table>

表格标题与结构

<caption> 标签为表格添加标题,<thead><tbody><tfoot> 用于分组表格内容。

html 复制代码
<table>
  <caption>学生信息</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>李四</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>85</td>
    </tr>
  </tfoot>
</table>

响应式表格

对于小屏幕设备,可以通过 CSS 或 JavaScript 实现响应式表格。

css 复制代码
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

表格高级功能

HTML5 支持 scope 属性定义表头的作用范围,辅助屏幕阅读器。

html 复制代码
<table>
  <tr>
    <th scope="col">月份</th>
    <th scope="col">收入</th>
  </tr>
  <tr>
    <th scope="row">一月</th>
    <td>5000</td>
  </tr>
</table>
相关推荐
三掌柜6664 分钟前
2025三掌柜赠书活动第三十五期 AI辅助React Web应用开发实践:基于React 19和GitHub Copilot
前端·人工智能·react.js
YH丶浩4 分钟前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
阿民_armin5 分钟前
Canvas 冷暖色分析工具
前端·javascript·vue.js
小岛前端6 分钟前
大小仅 1KB!超级好用!计算无敌!
前端·javascript·开源
没有鸡汤吃不下饭17 分钟前
Git将某个分支合并到开发(dev)、测试(test)后突然想撤销该分支的功能,怎么处理?
前端·git·github
文心快码BaiduComate18 分钟前
Comate分饰多角:全栈开发一个Python学习网站
前端·后端·python
90后的晨仔25 分钟前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js
我是日安28 分钟前
从零到一打造 Vue3 响应式系统 Day 20 - Reactive:reactive 极端案例
前端·vue.js
Slice_cy30 分钟前
📚 uniapp版本懒加载 + 不定高虚拟列表实现
前端
golang学习记31 分钟前
从0死磕全栈之Next.js API 路由实战:不用后端,前端也能写接口!
前端