html —— table 标签 与 display:table 样式

本文详细介绍了HTML中table标签的使用方法及其相关属性,并通过示例展示了如何利用div标签配合CSS实现table布局效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录:

一、table 相关标签介绍及使用

二、div 布局设置display:table


一、table 相关标签介绍及使用

相关标签按包含关系从大到小排序:

table ——> col | colgroup | thead | tbody | tfoot;

thead | tbody | tfoot ——> tr;

tr ——> th | td;

说明:

table:重要属性有border(单元格边框)、cellspacing(pixel/%,单元格之间的空白大小);

col:统一设置某一列的单元格样式,各种浏览器都支持的属性有span、width,可选;

colgroup:统一设置一列或多列的单元格样式,相当于多个col元素,重要属性为span,可选;

thead | tbody | tfoot:可选;

tr :一行,有各种设置单元格内容样式的属性,必须;

th | td :一列,重要属性有colspan、rowspan 等,必须。

示例:

<html>
<head>
  <meta charset="utf-8">
  <title>学习table</title>
</head>
  <body>

    <table width="600px" border="1" cellspacing="0">
      <colgroup span="2"></colgroup>
      <col></col>
      <thead align="center" style="font-style: bold">
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <th>列标题3</th>
        </tr>
      </thead>
      <tbody align="left">
        <tr>
          <td>数据11</td>
          <td>数据12</td>
          <td>数据13</td>
        </tr>
        <tr>
          <td>数据21</td>
          <td colspan="2">横跨2列</td>
        </tr>
        <tr>
          <td>数据31</td>
          <td rowspan="2">纵跨2行</td>
          <td>数据33</td>
        </tr>
        <tr>
          <td>数据41</td>
          <td>数据43</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">备注:此为tfoot 内容,横跨3列.</td>
        </tr>
      </tfoot>
    </table>

  </body>
</html>

效果:


二、div 布局设置display:table|inline-table

布局时,可以直接使用table 一套标签布局,也可使用div 通过样式模仿table 布局。

首先,看看display 样式属性常用值:

none、inline、block、inline-block、inherit(不怎么用)

其次,display:table 等用来布局也是真滴强,先介绍下与此相关的display 属性值,都是与table 等标签对应的。

display 相应值:

table :作为表格显示,类似table 标签;

table-column: 类似col 标签;

table-column-gorup:类似colgroup 标签;

table-header-group:类似thead 标签;

table-row-group:类似tbody 标签;

table-footer-group:类似tfoot 标签;

table-row:类似tr 标签;

table-cell:类似th 、td 标签。

重点:

div 设置display:table |inline-table 时,display:table-cell 可能会因为内容太多而使布局错乱,设置div table-layout 属性为fixed即可。

table-layout:auto (默认) | fixed | inherit。

示例:

<html>
<head>
  <meta charset="utf-8">
  <title>学习table</title>
  <style type="text/css">
    .table{width:600px;display: table;table-layout: fixed;border: 1px;}
    /*tr*/
    .table-row{width:100%;display: table-row;}
    /*col*/
    .table-cell{width:33.33%;display: table-cell;}
  </style>
</head>
  <body>

    <table width="600px" border="1" cellspacing="0">
      <colgroup span="2"></colgroup>
      <col></col>
      <thead align="center" style="font-style: bold">
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <th>列标题3</th>
        </tr>
      </thead>
      <tbody align="left">
        <tr>
          <td>数据11</td>
          <td>数据12</td>
          <td>数据13</td>
        </tr>
        <tr>
          <td>数据21</td>
          <td colspan="2">横跨2列</td>
        </tr>
        <tr>
          <td>数据31</td>
          <td rowspan="2">纵跨2行</td>
          <td>数据33</td>
        </tr>
        <tr>
          <td>数据41</td>
          <td>数据43</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">备注:此为tfoot 内容,横跨3列.</td>
        </tr>
      </tfoot>
    </table>
    <br/>

    <div class="table">
      <div class="table-row">
        <div class="table-cell">数据11</div>
        <div class="table-cell">数据12</div>
        <div class="table-cell">数据13</div>
      </div>  
      <div class="table-row">
        <div class="table-cell">数据21</div>
        <div class="table-cell">数据22</div>
        <div class="table-cell">数据23</div>
      </div>
    </div>

  </body>
</html>

效果:





### HTML 表格基础 HTML 表格用于结构化数据展示,通常由 `<table>` 元素及其子元素组成。以下是创建基本表格所需的标签: - `<table>` 定义整个表格。 - `<tr>` 定义表格中的行。 - `<td>` 定义表格中的单元格(数据单元)。 - `<th>` 定义表格中的表头单元格。 可以通过 `width` 和 `height` 属性来控制表格的尺寸[^2]。 ### 示例代码:简单 HTML 表格 以下是一个简单的 HTML 表格示例,展示了如何定义表格以及设置其宽度和高度: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML 表格示例</title> <style> table { border-collapse: collapse; /* 边框合并 */ width: 50%; /* 设置表格宽度为父容器的50% */ } th, td { border: 1px solid black; padding: 8px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <table> <caption><strong>学生信息表</strong></caption> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>90</td> </tr> <tr> <td>李四</td> <td>17</td> <td>85</td> </tr> </tbody> </table> </body> </html> ``` 此代码片段中,表格设置了固定宽度为父容器的 50%,并应用了一些样式以增强可读性[^2]。 ### 外部 CSS 文件的应用 为了提高网站的维护性和一致性,可以将所有的样式规则提取到外部 CSS 文件中。例如,在上面的例子中,我们可以将 `<style>` 部分的内容保存为名为 `styles.css` 的文件,并通过链接引入该文件: ```html <link rel="stylesheet" href="styles.css"> ``` 这样做的优势在于,当需要修改多个页面上的表格样式时,只需更新单一的 CSS 文件即可[^1]。 ### 更复杂的表格功能 除了基本的功能外,还可以利用更多的 HTML 和 CSS 特性扩展表格的能力,比如跨列/跨行、响应式设计等。下面是一些高级技巧: #### 跨列跨行 使用 `colspan` 和 `rowspan` 属性可以让某个单元格跨越多列或多行: ```html <tr> <td colspan="2">这个单元格横跨两列</td> </tr> <tr> <td rowspan="2">这个单元格纵跨两行</td> <td>第二列</td> </tr> <tr> <td>第三列</td> </tr> ``` #### 响应式表格 对于移动设备优化,可以采用一些技术使表格适应不同的屏幕大小。一种常见的方式是让表格滚动显示或者调整布局模式。 ```css @media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { margin-bottom: 1rem; } td:before { content: attr(data-label); float: left; font-weight: bold; } } ``` 在此例子中,我们重新定义了表格在小屏幕上呈现的形式,使其更加适合阅读[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值