table表格使用

r月光

已于 2024-01-10 20:59:21 修改

阅读量132

点赞数

分类专栏： HTML 文章标签： html 前端

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

本文链接：https://blog.csdn.net/Rbb__/article/details/133682001

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格中的行与列

    <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时，浏览器就不会再为空单元格绘制边框。

设置标题的位置

如果我们为table元素添加caption时浏览器会默认把标题放在表格的顶部。

我们可以使用caption-side属性设置值为bottom来使标题放在表格底部。

尽管我们把caption标签放在表格底部在浏览器解析时也依旧会把标题放在表格头部，我们也可以设置caption-size属性值为bottom来使标题呈现在表格底部。

r月光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table表格使用

我们用上例代码去生成一个3x3的表格，代码中的标签代表行，标签则用来代表列。我们新增了这三个标签：其中用来定义表格中的表头，在没有添加样式时大多数浏览器会把表头默认显示为粗体居中的文本。在页面排版大量使用表格且表格结构复杂时，我们可以将表格分为三个部分：:定义头部区域：定义主体区域：定义脚注区域。
复制链接

扫一扫