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>
相关推荐
不买Huracan不改名5 小时前
安装Codex(需要用npm)
前端·npm·node.js
Dorcas_FE5 小时前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream5 小时前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼5 小时前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best6665 小时前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东5 小时前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生5 小时前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙5 小时前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端