table表格使用

原创已于 2024-01-10 20:59:21 修改 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2023-10-24 16:03:45 首次发布

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML中表格的创建、结构化、单元格合并、边框设置、空单元格处理以及标题位置调整的方法，包括thead、tbody、tfoot的使用和CSS样式控制。

表格中的行与列

    <table>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
    </table>

我们用上例代码去生成一个3x3的表格，代码中的<tr>标签代表行，<td>标签则用来代表列。

表格结构化

    <table>
      <thead>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </thead>
      <tbody>
        <tr>
          <td>主体</td>
          <td>主体</td>
          <td>主体</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>脚注</td>
          <td>脚注</td>
          <td>脚注</td>
        </tr>
      </tfoot>
    </table>

我们新增了<th> <thead><tbody>这三个标签：

其中<th>用来定义表格中的表头，在没有添加样式时大多数浏览器会把表头默认显示为粗体居中的文本。

在页面排版大量使用表格且表格结构复杂时，我们可以将表格分为三个部分：

<thead>:定义头部区域

<tbody>：定义主体区域

<tfoot>：定义脚注区域

合并单元格

rowspan属性用来跨行合并单元格；

colspan属性用来跨列合并单元格；

从哪个单元格开始合并就为哪个单元格添加该属性，值为需要合并的个数。

合并表格边框

浏览器为表格绘制了一个边框，同时还为每个单元格绘制了边框，显示出来就是双边框。

<style>
table{
        margin: 50px auto;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        border-collapse: collapse;
      }
th,td{
        border: 1px solid #000;
      }
      
  </style>
   <body>
        <table>
            <th></th>
            <th></th>
            <th></th>
            <tr>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
            </tr>
        </table>
    </body>

我们使用border-collapse属性可以改变这种效果：

collapse值是告诉浏览器不要为相邻元素绘制两个边框。

配置独立边框

如果你不使用border-collapse属性改变双边框。

我们也可以使用border-spacing属性来改善表格的外观

    <style>
      table{
        margin: 50px auto;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        border-spacing: 20px;
      }
      th,td{
        border: 1px solid #000;
      }
    </style>

我们为表格边框与单元格之间指定了20px的边距，这个边距不会使表格区域被撑大，只会使单元格被挤小。

处理空单元格

在默认情况下即使单元格内容为空，浏览器也会为其渲染独立的边框。

我们可以使用empty-cells属性控制这种行为，empty-cells的默认值为show。

      table{
        margin: 50px auto;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        border-spacing: 5px;
        empty-cells: hide;
      }

在我们将empty-cells属性值设置为hide时，浏览器就不会再为空单元格绘制边框。