HTML表格 - HTML学习网站

HTML表格基础

HTML表格由以下基本元素组成：

<table> - 定义表格
<tr> - 定义表格行
<th> - 定义表头单元格
<td> - 定义表格数据单元格

基本表格示例


<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

效果预览

姓名	年龄	城市
张三	25	北京
李四	30	上海

表格标题和说明

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


<table>
  <caption>学生信息表</caption>
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>85</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">平均分</td>
      <td>88.5</td>
    </tr>
  </tfoot>
</table>

效果预览

学生信息表
学号	姓名	成绩
001	张三	85
002	李四	92
平均分		88.5

合并单元格

使用 colspan 和 rowspan 属性可以合并单元格：

colspan - 合并列
rowspan - 合并行


<table>
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>电话</td>
    <td>邮箱</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>123456</td>
    <td>zhangsan@example.com</td>
  </tr>
</table>

效果预览

姓名	联系方式
姓名	电话	邮箱
张三	123456	zhangsan@example.com

表格样式

通过CSS可以为表格添加各种样式：

1. 条纹表格

产品	价格	库存
手机	3999	100
电脑	6999	50
平板	2999	80

2. 悬停效果

课程	教师	课时
HTML	王老师	40
CSS	李老师	30
JavaScript	张老师	50

3. 紧凑表格

ID	名称	状态
1	任务1	完成
2	任务2	进行中

响应式表格

在移动设备上，表格可以水平滚动：

日期	收入	支出	余额	备注
2024-01-01	5000	2000	3000	工资
2024-01-02	0	500	2500	购物

表格对齐

可以设置单元格内容的对齐方式：

居中对齐	右对齐	左对齐
居中内容	右对齐内容	左对齐内容

表格颜色

可以为表格添加背景颜色：

主要	成功	警告	危险
内容1	内容2	内容3	内容4

复杂表格示例

一个包含多种特性的复杂表格：

销售数据统计表
产品类别	第一季度			第二季度
产品类别	一月	二月	三月	四月	五月	六月
电子产品	1000	1200	1500	1800	2000	2200
服装	800	900	1000	1100	1200	1300
食品	500	600	700	800	900	1000
总计	2300	2700	3200	3700	4100	4500