表格占据整个页面_HTML+CSS 基础知识-表格

最新推荐文章于 2022-10-19 17:03:52 发布

weixin_39764494

最新推荐文章于 2022-10-19 17:03:52 发布

阅读量1.2k

点赞数

文章标签：表格占据整个页面

本文链接：https://blog.csdn.net/weixin_39764494/article/details/112622179

版权

一、表格元素

1、概述

注意：boder必须设置，方便看效果

表格是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系
（和平常用的表格一样，行、列、单元格）

HTML 页面中提供的表格元素如下：

<table boder='1'>
  <tr>
    <td>单元格</td>
  </tr>
</table>

<table> 元素：表示 HTML 页面中的一个表格，作为表格的容器。
<tr> 元素：表示 HTML 页面中一个表格的行。一个表格可以拥有一行或多行。
<td> 元素：表示 HTML 页面中的一个表格中一行的单元格。一行可以拥有一个单元格或多个单元格。

2、标题单元格

HTML <th> 元素用来定义为一组单元格的标题。该元素的用法与 <td> 元素保持一致，定义在 <tr> 元素中。

如下示例代码展示了 <th> 元素的用法：

<table>
  <tr>
    <th>First name</th> 
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<th> 元素中的文本内容在浏览器运行时会自动加粗并且居中显示的效果。
<th> 元素的 scope 属性用来定义与该标题单元格相关联的单元格，是一个枚举类型，具体的值如下所示：

row：表示当前标题单元格关联一行中的所有单元格。
col：表示当前标题单元格关联一列中的所有单元格。
rowgroup：表示当前标题单元格属于某一个行组并与其中所有单元格相关联。
colgroup：表示当前标题单元格属于某一个列组并与其中所有单元格相关联。
auto：由浏览器自动分配。
如下示例代码展示了 <th> 元素的 scope 属性的用法：

<table boder="1">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">HEX</th>
    <th scope="col">HSLa</th>
    <th scope="col">RGBa</th>
  </tr>
  <tr>
    <th scope="row">Teal</th>
    <td><code>#51F6F6</code></td>
    <td><code>hsla(180, 90%, 64%, 1)</code></td>
    <td><code>rgba(81, 246, 246, 1)</code></td>
  </tr>
  <tr>
    <th scope="row">Goldenrod</th>
    <td><code>#F6BC57</code></td>
    <td><code>hsla(38, 90%, 65%, 1)</code></td>
    <td><code>rgba(246, 188, 87, 1)</code></td>
  </tr>
</table>

3、表格的标题

HTML <caption> 元素用来定义 HTML 页面中表格上方的标题。
该元素一般作为 <table> 元素的第一个子级元素出现，同时会显示在表格内容中的最前面，并且会在水平方向居中显示。
<table>
  <caption>Color names and values</caption>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">HEX</th>
    <th scope="col">HSLa</th>
    <th scope="col">RGBa</th>
  </tr>
  <tr>
    <th scope="row">Teal</th>
    <td><code>#51F6F6</code></td>
    <td><code>hsla(180, 90%, 64%, 1)</code></td>
    <td><code>rgba(81, 246, 246, 1)</code></td>
  </tr>
  <tr>
    <th scope="row">Goldenrod</th>
    <td><code>#F6BC57</code></td>
    <td><code>hsla(38, 90%, 65%, 1)</code></td>
    <td><code>rgba(246, 188, 87, 1)</code></td>
  </tr>
</table>

4、跨行与跨列（合并单元格）

实质：合并单元格

colspan 属性：用来规定表格单元格可横跨的列数。
rowspan 属性：用来规定表格单元格可横跨的行数。

<table>
    <caption>Web前端课程</caption>
    <tr>
        <th></th>
        <th scope="col">设计与构建静态网站</th>
        <th scope="col">JavaScript基础核心语法</th>
    </tr>
    <tr>
        <th scope="row">是否完成</th>
        <td colspan="2">已完成</td>
    </tr>
</table>

5、长表格（语义）

HTML 页面还提供如下 3 个元素来丰富表格：

<thead> 元素：用来定义 HTML 页面中表格的标题单元格的行。
<tbody> 元素：用来定义 HTML 页面中表格的主体（表格中真正的数据内容）。
<tfoot> 元素：用来定义 HTML 页面中表格一组各列的汇总行。
如下示例代码展示了 <thead> 元素、<tbody> 元素和 <tfoot> 元素的用法：

<table>
  <caption>Color names and values</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

<thead> 元素、<tbody> 元素和 <tfoot> 元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。

二、表格样式

1、表格布局

实质：auto是自适应，随着每个新的单元格都要改变整体布局，而fixed当第一行单元格固定以后的单元格都被固定

CSS table-layout 属性用来实现表格中单元格的布局，行和列的计算。该属性具有如下 2 个值：

auto：默认值，浏览器会使用自动表布局算法，已达到表格及其单元格的宽度被调整以适应内容。
fixed：表格或表格中列的宽度是由表格中第一行单元格的宽度决定的，后续行的单元格则不会影响表格中列的宽度。
以上两个值产生的结果可能不同，但两者之间最大的差异主要是速度上的。相对 fixed 的速度更快，而 auto 的速度稍慢，原因如下：

fixed：之所以速度快，主要原因是一旦浏览器解析了表格中第一行单元格的宽度就可以呈现整个表格，而不依赖表格中单元格的内容。
auto：表格的 width 属性的值为 auto 就会触发这种方式，无论 table-layout 属性的值是什么。这种方式之所以速度慢，主要原因在于每渲染一个新的单元格都要完成整个表格的布局。
如下示例代码展示了 table-layout 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>table-layout属性</title>
  <style>
    table {
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element {
      table-layout: auto;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>小明</td>
        <td>鹤岗</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

2、表格标题

CSS caption-side 属性用来设置 HTML 页面中表格的 <caption> 元素显示的位置，该属性需要与 <caption> 属性配合使用。该属性的值具有如下 2 个：
top：默认值，表示表格标题显示在表格的上方。
bottom：表示表格标题显示在表格的下方。

如下示例代码展示了 caption-side 属性值为 bottom 时的情况：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>caption-side属性</title>
  <style>
    table,
    th,
    td {
      padding: 5px;
      border: 1px solid black;
    }

    table caption {
      caption-side: bottom;
    }
  </style>
</head>

<body>
  <table>
    <caption>Color names and values</caption>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">HEX</th>
        <th scope="col">HSLa</th>
        <th scope="col">RGBa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Teal</th>
        <td><code>#51F6F6</code></td>
        <td><code>hsla(180, 90%, 64%, 1)</code></td>
        <td><code>rgba(81, 246, 246, 1)</code></td>
      </tr>
      <tr>
        <th scope="row">Goldenrod</th>
        <td><code>#F6BC57</code></td>
        <td><code>hsla(38, 90%, 65%, 1)</code></td>
        <td><code>rgba(246, 188, 87, 1)</code></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

3、处理空单元格

CSS empty-cells 属性用来设置 HTML 页面的表格中没有可见内容的单元格的边框和背景是显示还是隐藏。该属性的值具有如下 2 个：

show：默认值，边框和背景正常渲染，与普通元素一样。
hide：边框和背景被隐藏。
如下示例代码展示了 empty-cells 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>empty-cells属性</title>
  <style>
    table {
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element {
      empty-cells: show;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>小明</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

注意：empty-cells 属性只有在 border-collapse 属性值为 separate 时才有效，值为collapse无效果

4、单元格边框

CSS border-collapse 属性用来设置 HTML 页面中表格的边框是分离的还是合并的，该属性具有如下 2 个值：

separate：默认值，每个单元格拥有独立的边框。
collapse：相邻的单元格共用同一条边框。（给table设置）

当 border-callapse 属性值为 separate 时称为**分隔（separated）模式，是 HTML 表格的传统模式。这种模式下，相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 的 border-spacing 属性来进行设置。

CSS border-spacing 属性用来设置 HTML 页面中表格的相邻单元格边框之间的距离。该属性的值设置具有如下 2 种方式：

单值：同时设置单元格之间在水平方向和垂直方向的距离。
双值：第一个值用来设置相邻两列的单元格之间的水平方向的距离，第二个值用来设置相邻两行的单元格之间的垂直方向的距离。
如下示例代码展示了 border-callapse 属性值为 separate 时，border-spacing 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>border-spacing属性</title>
  <style>
    table {
      display: table;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element {
      border-collapse: separate;
      border-spacing: 5px;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>小明</td>
        <td>鹤岗</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

当 border-collapse 属性值为 collapse 时称为合并（collapsed ）模式。这种模式下，表格中相邻单元格共享边框。

weixin_39764494

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格占据整个页面_HTML+CSS 基础知识-表格

一、表格元素1、概述注意：boder必须设置，方便看效果表格是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系（和平常用的表格一样，行、列、单元格）HTML 页面中提供的表格元素如下：<table boder='1'> <tr> <td>单元格</td> </t...
复制链接

扫一扫