首发于全栈开发从零开始
HTML从零开始——表格及其他标签

HTML从零开始——表格及其他标签

人类本质上还是视觉动物，所以合理好看的页面布局对于一个网页是否有足够大的浏览量很重要，这就需要表格的帮助了。

同时，网页技术的不断发展，使得HTML也在不断的引入新的标签以适应新的能力，这里也同时简单介绍一些新引入的其他标签。

不过一些已经在JavaScript章节中表述过的标签，例如<canvas>，由于比较复杂，可能会考虑在后面单独在列出章节来单独学习。

还有些相对少用到或者在新的标准当中已经废弃的标签，比如<keygen>（规定用于表单的密钥对生成器字段，已废弃），<svg>（可伸缩矢量图形内联标签，使用很少），<math>（mathml数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言，使用量也偏少），我们这里都不在继续深入了，如果有兴趣，可以看看菜鸟教程的HTML5 教程或者W3School的HTML5 教程，两者都有比较详细的介绍以及参考手册。

好了，这一章节就是HTML的最后一部分了。


1 表格

表格（table）以行（row）和列（column）的形式展示数据，当然也可以用来做页面布局，比如在微软的SharePoint产品当中，其传统页面布局就大量的使用了表格，当然这也是因为该产品主要是以展示数据以及文档组织为主要功能的，所以无可厚非。

1.1 <table>，<caption>

<table>是一个块级容器标签，所有表格内容都要放在这个标签里面：

<table>
  ... ...
</table>

<caption>总是<table>里面的第一个子元素，表示表格的标题。该元素是可选的：

<table>
  <caption>示例表格</caption>
</table>

1.2 <thead>、<tbody>、<tfoot>

<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾：

<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

这三个元素都是可选的。如果使用了<thead>，那么<tbody>和<tfoot>一定在<thead>的后面。如果使用了<tbody>，那么<tfoot>一定在<tbody>后面。

大型表格内部可以使用多个<tbody>，表示连续的多个部分。

1.3 <colgroup>，<col>

<colgroup>是<table>的一级子元素，用来包含一组列的定义。<col>是<colgroup>的子元素，用来定义表格的一列：

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
</table>

上面代码表明表格有3列。

<col>不仅是一个单独使用的标签，没有结束标志，而且还是一个空元素，没有子元素。它的主要作用，除了申明表格结构，还可以为表格附加样式：

<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

上面代码中，<colgroup>声明表格有三列，每一列有自己的 class，可以使用 CSS 针对每个 class 设定样式，会对整个表格生效，这里我仅仅给出了表格边框：

<col>有一个span属性，值为正整数，默认为1。如果大于1，就表示该列的宽度包含连续的多列：

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
</table>

上面代码中，表格的表头定义了3列，实际数据有4列。表头的第2列会连续跨2列。

1.4 <tr>

<tr>标签表示表格的一行（table row）。如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级：

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

上面代码表示表格共有3行。

1.5 <th>，<td>

<th>和<td>都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格：

<table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>

上面代码中，表格一共有三行。第一行是标题行，所以使用<th>；第二行和第三行是数据行，所以使用<td>：

（1）colspan属性，rowspan属性

单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1：

<table>
  <tr>
    <td colspan="2">A</td><td>B</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

上面代码中，第一行的第一个单元格会跨两列：

（2）headers属性

如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用headers属性：

<table>
  <tr>
    <th id="no">学号</th><th id="names">姓名</th>
  </tr>
  <tr>
    <td headers="no">001</td><td headers="names">张三</td>
  </tr>
  <tr>
    <td headers="no">002</td><td headers="names">李四</td>
  </tr>
</table>

上面代码中，标题栏的<th>设置了id属性，后面的<td>单元格的headers属性就对应这些id属性的值，因此就能看出来这些单元格对应哪个标题栏。

headers属性的值总是对应<th>标签的id属性的值。由于一个单元格可以对应多个标题栏（跨行的情况），所以headers属性可以是一个空格分隔的字符串，对应多个id属性的值。

（3）scope属性

scope属性只有<th>标签支持，一般不在<td>标签使用，表示该<th>单元格到底是栏的标题，还是列的标题：

<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>001</td>
    <td>男</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>002</td>
    <td>男</td>
  </tr>
</table>

上面代码中，第一行的标题栏都是列标题，所以<th>的scope属性为col，第二行和第三行的第一列是行标题，所以<th>标签的scope属性为row。

scope属性可以取下面这些值：

  • row：该行的所有单元格，都与该标题单元格相关。
  • col：该列的所有单元格，都与该标题单元格相关。
  • rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关，可以与rowspan属性配合使用。
  • colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关，可以与colspan属性配合使用。
  • auto：默认值，表示由浏览器自行决定。

下面是一个colgroup属性和rowgroup属性的例子：

<table>
  <thead>
    <tr>
      <th scope="col">海报名称</th>
      <th scope="col">颜色</th>
      <th colspan="3" scope="colgroup">尺寸</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Zodiac</th>
      <th scope="row">Full color</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

上面的例子中，列标题“尺寸”的scope属性为colgroup，表示这个标题单元格对应多列（本例为3列）；行标题的scope属性为rowgroup，表示这个标题单元格对应多行（本例为2行）：

2 <dialog>

2.1 基本用法

<dialog>标签表示一个可以关闭的对话框：

<dialog>
  Hello HTML！
</dialog>

上面就是一个最简单的对话框。

默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性：

<dialog open>
  Hello HTML！
</dialog>

上面代码会在网页显示一个方框，内容是Hello HTML！：

<dialog>元素里面，可以放入其他 HTML 元素：

<dialog open>
  <form method="dialog">
    <input type="text">
    <button type="submit" value="foo">提交</button>
  </form>
</dialog>

上面的对话框里面，有一个输入框和提交按钮：

注意，上例中<form>的method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性（上例是foo）。

2.2 JavaScript API

<dialog>元素的 JavaScript API 提供Dialog.showModal()和Dialog.close()两个方法，用于打开/关闭对话框，使用如下HTML：

开发者可以提供关闭按钮，让其调用Dialog.close()方法，关闭对话框。

Dialog.close()方法可以接受一个字符串作为参数，用于传递信息。<dialog>接口的returnValue属性可以读取这个字符串，否则returnValue属性等于提交按钮的value属性：

Dialog.showModal()方法唤起对话框时，会有一个透明层，阻止用户与对话框外部的内容互动。CSS 提供了一个 Dialog 元素的::backdrop伪类，用于选中这个透明层，因此可以编写样式让透明层变得可见：

dialog {
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 1em black;
}

dialog::backdrop {
  /* make the backdrop a semi-transparent black */
  background-color: rgba(0, 0, 0, 0.4);
}

上面代码不仅为<dialog>指定了样式，还将对话框的透明层变成了灰色透明：

<dialog>元素还有一个Dialog.show()方法，也能唤起对话框，但是没有透明层，用户可以与对话框外部的内容互动。

2.3 事件

<dialog>元素有两个事件，可以监听：

  • close：对话框关闭时触发
  • cancel：用户按下esc键关闭对话框时触发

如果希望用户点击透明层，就关闭对话框，可以用下面的代码：

modal.addEventListener('click', event => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

3 <details>，<summary>

3.1 基本用法

<details>标签用来折叠内容，浏览器会折叠显示该标签的内容：

<details>
这是一段解释文本。
</details>

上面的代码在浏览器里面，会折叠起来，显示Details，前面有一个三角形，就像下面这样：

用户点击这段文本，折叠的文本就会展开，显示详细内容：

再点击一下，展开的文本又会重新折叠起来。

<details>标签的open属性，用于默认打开折叠：

<details open>
这是一段解释文本。
</details>

上面代码默认打开折叠。

<summary>标签用来定制折叠内容的标题：

<details>
  <summary>这是标题</summary>
  这是一段解释文本。
</details>

上面的代码显示结果如下：

点击后，展示的效果如下：

通过 CSS 设置summary::-webkit-details-marker，可以改变标题前面的三角箭头：

summary::-webkit-details-marker {
  background: url(https://example.com/foo.svg);
  color: transparent;
}

下面的样式是另一种替换箭头的方法：

summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "\2714";
  color: #696f7c;
  margin-right: 5px;
}

3.2 JavaScript API

Details元素的open属性返回<details>当前是打开还是关闭：

const details = document.querySelector('details');

if (detail.open === true) {
  // 展开状态
} else {
  // 折叠状态
}

Details元素有一个toggle事件，打开或关闭折叠时，都会触发这个事件：

details.addEventListener('toggle', event => {
  if (details.open) {
    /* 展开状况 */
  } else {
    /* 折叠状态 */
  }
});

感谢网道的HTML教程，让我获益良多。

接下来就要来看看CSS了。

编辑于 2020-08-09 16:35
HTML
HTML5
表格

文章被以下专栏收录