当前位置：首页 > 行业动态 > 正文

html5网页表格

HTML5网页表格由` 、 、 、 等标签构成，支持语义化标签（如`），兼容现代浏览器，可通过CSS控制样式，常用于

HTML5 表格基础结构

HTML5 使用 <table> 标签定义表格，内部包含以下常用子标签：

html5网页表格 第1张

<table>
  <thead><!-表头部分 --></thead>
  <tbody><!-表体部分 --></tbody>
  <tfoot><!-表尾部分（可选） --></tfoot>
</table>

基本表格示例

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

表格核心标签说明

作用 必须性
<table> 定义表格容器 是
<thead> 定义表头区域（可含多行） 否
<tbody> 定义表体区域 否
<tr> 定义表格行 是
<th> 定义表头单元格（加粗默认） 否
<td> 定义普通数据单元格 是

表格样式控制

边框与间距

<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <td style="border: 1px solid #000; padding: 8px;">带边框单元格</td>
  </tr>
</table>

跨行/跨列

<table border="1">
  <tr>
    <td rowspan="2">跨两行</td>
    <td colspan="2">跨两列</td>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

响应式表格设计

自适应布局示例

<table style="width: 100%;">
  <thead>
    <tr>
      <th>序号</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>响应式内容</td>
    </tr>
  </tbody>
</table>

相关问题与解答

Q1：如何合并单元格？

A1：使用 rowspan 属性实现跨行，colspan 属性实现跨列。

<td rowspan="3">跨3行</td>
<td colspan="2">跨2列</td>

Q2：如何让表格自动适应容器宽度？

A2：设置 table 的 width 属性为百分比（如 width:"100%"），或使用 CSS 的 max-width 属性配合媒体查询实现响应

网页表格
0

相关文章