• HTML5与CSS3学习笔记【第十八章 表单】

    第十八章 表单

    前言

    在日常生活中，我们对表格式数据已经很熟悉了。这种数据有多种形式，如财务数据、调查数据、事件日历、公交车时刻表、电视节目表等。在大多数情况下，这类信息都由列标题或行标题加上数据本身构成。本章将对 table 元素及其子元素进行讲解，重点是基本的 table 结构和样式。HTML表格可以很复杂，不过很少需要实现特别复杂的表格。

    在这里插入图片描述

    18.1结构化表格

    放在电子表格中的信息通常很适合用HTML 表格呈现。从基本层面看，table 元素是由行组成的，行又是由单元格组成的。每个行（tr）都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。如果认为为整个表格添加一个标题有助于访问者理解该表格，可以提供 caption。在浏览器中，标题通常显示在表格上方，其用途显而易见。此外，scope 属性（也是可选的，不过推荐使用）可以告诉屏幕阅读器和其他辅助设备当前的 th是列的标题单元格（使用 scope=“col”）还是行的标题单元格（使用 scope=“row”），抑或是用于其他目的的单元格。

    在默认情况下，表格在浏览器中呈现的宽度是其中的信息在页面可用空间里所需要的最小宽度。很容易就会想到可以通过 CSS 改变表格的格式，后面很快就会讲到。

    如何知道每行数据表示的是什么呢？如果每个行也有标题单元格，就很容易理解了。添加这些单元格只需要在每行开头添加一个 th 元素就可以了。列标题应设置scope=“col”，而每个行的 th（位于 td 之前）则应设置 scope=“row”。

    ...
<body>
<table>
 <caption>Quarterly Financials for 
➝ 1962-1964 (in Thousands)caption>
 <tr>
 <th scope="col">1962th>
 <th scope="col">1963th>
 <th scope="col">1964th>
 tr>
 <tr>
 <td>$145td>
 <td>$167td>
 <td>$161td>
 tr>
 <tr>
 <td>$140td>
 <td>$159td>
 <td>$164td>
 tr>
 <tr>
 <td>$153td>
 <td>$162td>
 <td>$168td>
 tr>
 <tr>
 <td>$157td>
 <td>$160td>
 <td>$171td>
 tr>
table>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    每个行都是由 tr 元素标记的。这是个很简单的表格，它只有一个包含标题单元格（th元素）的行和三个包含数据单元格（td元素）的行。本例中也包含了 caption 元素，不过它是可选的。

    创建表格结构的步骤
    (1) 输入

    。
    (2) 如 果 需 要， 输 入 ，其中的 caption content是对表格的描述。
    (3) 如果需要，在要创建的表格部分的 之前）。
    (4) 输入 定义行的开始。
    (5) 输入 结束数据单元格。
    (8) 对行内的每个单元格重复第 (5) 步至第 (7) 步。
    (9) 输入 结束行。
    (10) 为所在表格部分内的每个行重复第(4) 步至第 (9) 步。
    (11) 如果在第 (3) 步中开始了一个表格部分，就根据需要使用 或 结束这个部分。
    (12) 为 每 个 表 格 部 分 重 复 第 (3) 步 至第 (11) 步。注意，一个表格只能有一个 thead和 tfoot，但可以有多个 tbody 元素。
    (13) 输入
    caption content
    开始标题单元格（其中的 scopetype 可以是 col、row、colgroup 或 rowgroup），或者输入 定义数据单元格的开始。
    (6) 输入单元格的内容。
    (7) 输入 结束标题单元格，或者输入
    以结束表格。
    在默认情况下，表格被压得很扁。通过应用一些 CSS，可以为单元格添加一些空间让它们扩大一些（使用 padding），添加边框以指示单元格的边界（使用 border），还可以对文本进行格式化。这些样式都有助于更好地理解表格。

    18.2让单元格跨越多列或多行

    可以通过 colspan 和 rowspan 属性让 th或 td 跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量。
    1. 让单元格跨越两个或两个以上列的步骤
    (1) 在需要定义跨越一个以上的列的单元格的地方，如果为标题单元格，输入 (2) 输入 colspan=“n”>，这里的 n 是单元格要跨越的列数。
    (3) 输入单元格的内容。
    (4) 根据前面的内容，输入或者。
    (5) 根据之前的介绍，完成表格的其余部分。如果创建了一个跨越两列的单元格，在该行就应该少定义一个单元格；如果创建了一个跨越三列的单元格，在该行就应该少定义两个单元格，以此类推。

    2. 让单元格跨越两个或两个以上行的步骤
    (1) 在需要定义跨越一个以上的行的单元格的地方，如果为标题单元格，输入 (2) 输入 rowspan=“n”>，这里的 n 是单元格要跨越的行数。
    (3) 输入单元格的内容。
    (4) 根据前面的内容，输入或者。
    (5) 根据之前的介绍，完成表格的其余部分。如果创建了一个 rowspan 等于 2 的单元格，就不需要定义下一行中该单元格对应的单元格了；如果创建了一个 rowspan 等于 3的单元格，就不需要定义下面两行中该单元格对应的单元格了，以此类推。

  • 相关阅读:
    STC 51单片机54——气压水压计HX710B 串口显示均值滤波+滑窗滤波
    用于静电放电敏感器件的包装的性能和要求分类-4
    redux一步一步的使用
    企业上半年净利润下降近8成，企业如何应对？
    SAT DPLL CDCL
    Hive入门--学习笔记
    FPGA实现AD采集
    Java之Collention集合
    【JavaScript设计模式】增强版发布订阅模式——Webpack的核心Tapable（一）
    Vue3.0 项目结构及组件
  • 原文地址：https://blog.csdn.net/kzpx_1106/article/details/126004734