第三章 表格布局与表单交互

3.1表格概述

在 HTML 中，表格是用来展示数据的一种有效方式，特别是当数据是结构化的，比如行和列的形式时。表格由 <table> 标签定义，并通过一系列的行 <tr>、单元格 <td>（table data）以及表头 <th>（table header）来构建。

3.1.1表格的结构

一个基本的 HTML 表格由以下几个部分组成：

• <table>：定义表格的开始。
• <tr>：定义表格中的一行。
• <td>：定义表格中的一个单元格，用于存放数据。
• <th>：定义表格中的一个表头单元格，通常用于标题或列名。
• 示例

  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
  </table>

   在这个例子中，border="1" 属性用于设置表格边框的粗细，使其在视觉上更明显。现代网页设计中，边框和其他样式通常通过 CSS 来控制。

3.1.2表格的基本语法

HTML5 引入了更多语义化的标签来增强表格的可访问性和清晰度，包括：

• <thead>：定义表格的头部内容，通常包含 <tr> 和 <th>。
• <tbody>：定义表格的主体内容，包含数据行 <tr> 和 <td>。
• <tfoot>：定义表格的脚部内容，通常包含汇总或总计信息。

  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>程序员</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>32</td>
        <td>设计师</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总计</td>
        <td>2</td>
        <td></td>
      </tr>
    </tfoot>
  </table>

  可访问性
  为了提高表格的可访问性，可以使用 scope 属性在 <th> 标签中指定单元格的作用范围，这有助于屏幕阅读器正确解释表格内容。scope 属性的值可以是 row、col 或 rowgroup、colgroup。

  总结
  表格是展示结构化数据的有效工具。通过使用 HTML 的表格标签，可以创建出既美观又功能强大的表格。在设计表格时，应考虑语义化、样式和可访问性，以确保表格对所有用户都是友好的

3.2表格属性设置

HTML 表格可以通过多种属性来设置和控制其外观和行为。这些属性可以直接在 <table>、<tr>、<td> 和 <th> 标签中使用。以下是一些常用的表格属性：

<table> 标签属性
border：设置表格边框的粗细。例如，border="1" 会显示边框。
cellpadding：设置表格单元格内边距，即内容与单元格边界之间的空间。
cellspacing：设置表格单元格之间的间距。
width 和 height：分别设置表格的宽度和高度。
align：设置表格的整体对齐方式（左对齐、居中、右对齐）。
bgcolor：设置表格的背景颜色。
<tr> 标签属性
align：设置行中所有单元格内容的对齐方式。
valign：设置行中所有单元格内容的垂直对齐方式。
<td> 和 <th> 标签属性
colspan：设置单元格应该横跨的列数。
rowspan：设置单元格应该纵跨的行数。
align：设置单元格内容的对齐方式。
valign：设置单元格内容的垂直对齐方式。
nowrap：设置单元格内容是否不换行。
bgcolor：设置单元格的背景颜色。
width 和 height：分别设置单元格的宽度和高度。
HTML5 表格属性
HTML5 引入了一些新的属性，以提高表格的语义化和可访问性：

scope：在 <th> 标签中使用，定义单元格是行头、列头还是组头。
headers：在 <td> 或 <th> 标签中使用，指向相关的表头单元格，用于复杂的表格布局。
示例

<table border="1" cellpadding="5" cellspacing="0" width="500" height="300" align="center" bgcolor="#FFFFCC">
  <tr>
    <th scope="col">Header 1</th>
    <th scope="col">Header 2</th>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FFCC99" colspan="2">Row 1, Cell 1</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

在这个例子中，表格具有边框、单元格内边距、无单元格间距、指定的宽度和高度，并且居中显示。表头单元格定义了其作用范围，而第一个数据行的单元格横跨两列。

注意事项
许多旧的 HTML 表格属性（如 border、cellpadding、cellspacing 和 bgcolor）在 HTML5 中被认为是不推荐的，因为这些样式应该通过 CSS 来控制。
使用 CSS 可以更灵活地控制表格的外观，并且更符合现代网页设计的标准。

CSS 控制表格样式

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 500px;
  margin: 10px;
}
 
th, td {
  padding: 10px;
  text-align: left;
  border: 1px solid black;
}
 
tr:nth-child(even) {
  background-color: #f2f2f2;
}

在这个 CSS 示例中，表格边框被设置为 1 像素的实线，单元格内边距为 10 像素，行和列的边框也被设置为 1 像素的实线。:nth-child 伪类用于为偶数行设置背景色，以实现斑马线效果。

3.2.1表格边框属性

在 HTML 中，控制表格边框的属性主要有以下几个：

border 属性

• <table border="value">：这个属性用于设置表格边框的粗细。value 可以是任何数字，表示边框的像素值。如果不设置 border 属性，大多数浏览器默认不会显示边框。

  <table border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>

  在这个例子中，表格的边框粗细被设置为 1 像素。

  frame 属性
  <table frame="value">：这个属性定义表格外围边框的显示方式。value 可以是以下值之一：
  void：不显示外围边框。
  above：只显示表格顶部的边框。
  below：只显示表格底部的边框。
  hsides：只显示表格顶部和底部的边框。
  vsides：只显示表格两侧的边框。
  lhs：只显示左边框。
  rhs：只显示右边框。
  box：显示所有四个外围边框。
  border：显示所有外围边框（与 box 相同）。
  rules 属性
  <table rules="value">：这个属性定义表格内部的边框线。value 可以是以下值之一：
  none：不显示内部边框线。
  groups：只在行组或列组之间显示边框线。
  rows：只在行之间显示边框线。
  cols：只在列之间显示边框线。
  all：在所有行和列之间都显示边框线。
  cellspacing 和 cellpadding 属性
  <table cellspacing="value">：这个属性定义了表格单元格之间的空间。value 是一个表示空间大小的数字，通常以像素为单位。

  <table cellpadding="value">：这个属性定义了表格单元格内容与其边界之间的空间。value 是一个表示空间大小的数字，通常以像素为单位。

  示例

  <table border="1" frame="box" rules="all" cellspacing="5" cellpadding="10">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>

  在这个例子中，表格具有 1 像素的边框，所有外围边框和内部边框都显示，单元格之间的空间为 5 像素，内容与单元格边界之间的空间为 10 像素。

  注意事项
  在现代网页设计中，边框和其他样式通常通过 CSS 来控制，而不是直接在 HTML 标签中设置属性。这样做可以更好地维护样式的一致性，并使 HTML 代码更加简洁。
  使用 CSS 属性 border、border-collapse、margin 和 padding 可以更精细地控制表格的外观。例如，border-collapse: collapse; 可以将相邻单元格的边框合并为一个单一边框，从而实现更紧密的表格布局。

3.2.2表格的宽度和高度属性

在 HTML 中，表格的宽度和高度可以通过两种方式设置：直接在 <table> 标签中使用 width 和 height 属性，或者使用 CSS。

使用 HTML 属性
width：用于设置表格的宽度。可以指定像素值（例如 width="500"）或者百分比（例如 width="50%"）。
height：用于设置表格的高度。同样可以指定像素值（例如 height="300"）或者百分比（例如 height="30%"）。
示例

<table border="1" width="500" height="300">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个例子中，表格的宽度被设置为 500 像素，高度被设置为 300 像素。

使用 CSS

使用 CSS 设置表格的宽度和高度更为灵活，并且是现代网页设计的首选方法。你可以在 <style> 标签中定义样式，或者在外部样式表中设置。

• 内联样式：

  <table style="width: 500px; height: 300px;" border="1">
    <!-- 表格内容 -->
  </table>

• 内部样式表：

• <head>
    <style>
      table {
        width: 500px;
        height: 300px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <!-- 表格内容 -->
    </table>
  </body>

外部样式表（假设样式定义在 styles.css 文件中）

/* styles.css */
table {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

<!-- HTML 文件 -->
<link rel="stylesheet" type="text/css" href="styles.css">
<table>
  <!-- 表格内容 -->
</table>

注意事项
当使用百分比值时，表格的宽度和高度会相对于其父元素的大小进行调整。这意味着如果父元素的尺寸变化，表格也会相应变化。
在响应式设计中，通常使用百分比或使用媒体查询来设置不同屏幕尺寸下的表格尺寸。
设置表格的高度时，需要考虑表格内容是否会超出指定的高度。如果内容超出，可能需要设置滚动条或调整高度以适应内容。
使用 CSS 而不是 HTML 属性来设置宽度和高度，可以更好地控制样式，并且使 HTML 代码更加简洁和语义化。
通过使用 CSS，你可以更精确地控制表格的布局和响应式行为，从而创建出适应不同设备和屏幕尺寸的网页设计

3.2.3表格颜色与背景图像属性

在 HTML 表格中，背景颜色和背景图像可以通过 HTML 属性直接设置，但更推荐的做法是使用 CSS 来实现这些样式效果。以下是两种方法的介绍：

使用 HTML 属性
bgcolor：用于设置表格、行或单元格的背景颜色。这个属性在 HTML5 中已经不推荐使用，但它仍然可以在一些旧的浏览器中工作。
background：用于设置表格、行或单元格的背景图像。同样，这也是一个不推荐使用的属性。
示例

<table border="1" bgcolor="#FFFFCC">
  <tr>
    <th background="image.jpg">Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td bgcolor="#FFCC99">Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个例子中，整个表格有一个淡黄色背景，表头单元格有一个背景图像，而第一个数据单元格有一个浅橙色背景。

使用 CSS
CSS 提供了更多控制和灵活性，是设置表格背景颜色和图像的首选方法。

background-color：用于设置元素的背景颜色。
background-image：用于设置元素的背景图像。
background-repeat：用于设置背景图像是否重复以及如何重复。
background-position：用于设置背景图像的位置。

示例

<style>
  table {
    background-color: #FFFFCC;
    width: 100%;
    border: 1px solid black;
  }
  th {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
  }
  td {
    background-color: #FFCC99;
  }
</style>
 
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个 CSS 示例中，表格有一个淡黄色背景，表头单元格有一个背景图像，该图像不重复并且居中显示。数据单元格有一个浅橙色背景。

注意事项
使用 CSS 可以更容易地控制背景图像的尺寸、位置和重复方式，而 HTML 属性提供的功能较为有限。
背景图像的路径应该是相对于 HTML 文件的，或者是完整的 URL。
确保背景图像的尺寸适合表格或单元格的尺寸，以避免图像失真。
在设计响应式网页时，背景图像可能需要额外的媒体查询来确保在不同设备上看起来合适。
总的来说，使用 CSS 来设置表格的背景颜色和图像是更现代、更灵活的方法，它允许你更细致地控制样式，并保持 HTML 代码的简洁和语义化

3.2.4表格边框样式属性

在 HTML 表格设计中，边框样式是重要的视觉元素，可以通过 HTML 属性和 CSS 来控制。虽然 HTML 提供了一些基本的边框控制属性，但 CSS 提供了更广泛的控制能力，包括边框的颜色、样式和宽度。

使用 HTML 属性
HTML 中的 border 属性是最直接的方法来控制表格边框的显示。这个属性可以设置在 <table> 标签上，并且接受一个表示边框宽度的整数值。

border="value"：这里的 value 是一个整数，表示边框的厚度（以像素为单位）。如果设置为 0 或不设置，边框通常不会显示。
示例

<table border="2">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个例子中，表格的边框宽度被设置为 2 像素。

使用 CSS 控制边框
CSS 提供了更多细致的控制，包括边框的颜色、样式和宽度。你可以使用 border 属性族来设置这些特性。

border-width：设置边框的宽度。
border-style：设置边框的样式（如 solid, dashed, dotted 等）。
border-color：设置边框的颜色。

<style>
  .bordered-table {
    border: 2px solid black; /* 2px 宽的实线，黑色 */
    border-collapse: collapse; /* 合并相邻边框 */
  }
  .bordered-table th, .bordered-table td {
    border: 1px solid black; /* 单元格边框 */
  }
</style>
 
<table class="bordered-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个 CSS 示例中，整个表格有一个 2 像素宽的黑色实线边框，并且表格的单元格也有 1 像素宽的黑色边框。border-collapse: collapse; 确保了相邻单元格的边框合并为一个单一的边框，而不是在它们之间留下空隙。

高级边框样式
CSS 还允许你为表格的各个边设置不同的边框样式：

border-top：设置上边框的样式。
border-right：设置右边框的样式。
border-bottom：设置下边框的样式。
border-left：设置左边框的样式。
示例

<style>
  .advanced-border-table {
    border: 2px solid #0000FF; /* 蓝色边框 */
    border-collapse: collapse;
  }
  .advanced-border-table th {
    border: 1px solid #FF0000; /* 红色边框 */
  }
  .advanced-border-table td {
    border-top: 1px dashed #008000; /* 上边框为绿色虚线 */
    border-bottom: 1px dashed #008000; /* 下边框为绿色虚线 */
  }
</style>
 
<table class="advanced-border-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个例子中，表格有一个蓝色的边框，表头单元格有红色的边框，而数据单元格的顶部和底部边框是绿色的虚线。

注意事项
使用 CSS 控制边框样式不仅可以使 HTML 代码更简洁，还可以提供更多的样式选项和更好的浏览器兼容性。
确保在设计表格时考虑到可访问性，适当的边框样式可以帮助视觉障碍用户更好地理解表格结构。
在响应式设计中，边框的宽度和样式可能需要根据屏幕尺寸进行调整

3.2.5表格单项格间距，单元格边距属性

在 HTML 表格设计中，单元格间距（cellspacing）和单元边距（cellpadding）是两个重要的属性，它们影响表格的视觉布局和内容的显示方式。这些属性可以直接在 <table> 标签中设置，但更现代的做法是使用 CSS 来控制这些样式。

HTML 属性
cellspacing：

这个属性定义了表格单元格之间的空间（即边框之间的距离）。
它的值是一个表示像素的数字。
cellpadding：

这个属性定义了表格单元格内容与其边界之间的空间。
它的值也是一个表示像素的数字。
示例

<table border="1" cellspacing="5" cellpadding="10">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个例子中，表格的单元格间距被设置为 5 像素，单元格内容与其边界之间的空间为 10 像素。

使用 CSS 控制
虽然 HTML 属性可以快速设置表格的间距和边距，但使用 CSS 提供了更多的灵活性和控制力。以下是如何使用 CSS 来实现相同的效果：

border-spacing：

这是 CSS 属性，用于设置表格单元格之间的空间，相当于 HTML 的 cellspacing。
padding：

这是 CSS 属性，用于设置元素内部的空间，相当于 HTML 的 cellpadding。
示例

<style>
  .table-style {
    border: 1px solid black;
    border-collapse: collapse; /* 确保边框可以合并 */
    border-spacing: 5px; /* 单元格之间的空间 */
  }
  .table-style th, .table-style td {
    padding: 10px; /* 单元格内容的内边距 */
  }
</style>
 
<table class="table-style">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在这个 CSS 示例中，border-spacing 属性用于设置单元格之间的空间，而 padding 属性用于设置单元格内容的内边距。

注意事项
使用 border-collapse: collapse; 与 border-spacing 属性一起，可以确保表格的边框合并为一个单一的边框，这通常在现代网页设计中更受欢迎。
在响应式设计中，可能需要根据屏幕尺寸调整 padding 和 border-spacing 的值，以确保表格在不同设备上看起来合适。
过度的 cellpadding 或 cellspacing 可能会导致表格看起来过于拥挤或分散，影响可读性和美观性。
总的来说，虽然 HTML 属性可以快速设置表格的间距和边距，但使用 CSS 提供了更多的控制和灵活性，是现代网页设计中推荐的方法。

3.2.6表格水平对齐属性

在 HTML 表格中，水平对齐属性用于控制表格内容在单元格内的横向排列方式。这些属性可以应用于整个表格、单独的行或单个单元格。

表格水平对齐属性
align：
应用于 <table>、<tr>、<td> 或 <th> 标签。
控制水平对齐方式，可以设置为 left、center、right 或 justify（很少用于表格）。

示例

<table align="center">
  <tr>
    <th align="left">Header 1</th>
    <th align="right">Header 2</th>
  </tr>
  <tr>
    <td>Left aligned data</td>
    <td align="center">Center aligned data</td>
  </tr>
</table>

在这个例子中，整个表格居中对齐，第一列的表头和数据左对齐，第二列的表头和数据右对齐。

使用 CSS 控制水平对齐
CSS 提供了更多灵活性和控制力，是现代网页设计中推荐的方法。

text-align：
应用于 <td> 或 <th> 标签。
与 HTML 的 align 属性类似，但更常用于 CSS。

示例

<style>
  .center-table {
    margin-left: auto;
    margin-right: auto;
  }
  .left-align {
    text-align: left;
  }
  .right-align {
    text-align: right;
  }
  .center-align {
    text-align: center;
  }
</style>
 
<table class="center-table">
  <tr>
    <th class="left-align">Header 1</th>
    <th class="right-align">Header 2</th>
  </tr>
  <tr>
    <td class="left-align">Left aligned data</td>
    <td class="center-align">Center aligned data</td>
  </tr>
</table>

在这个 CSS 示例中，整个表格通过自动边距居中对齐，而单元格内容则通过 text-align 属性进行左对齐、右对齐和居中对齐。

注意事项
使用 CSS 的 text-align 属性可以更精确地控制文本对齐，并且可以更容易地响应样式变化。
在响应式设计中，可能需要使用媒体查询来调整不同屏幕尺寸下的文本对齐方式。
确保在设计表格时考虑到可访问性和可读性，适当的对齐方式可以提高表格的可读性和用户体验。
总的来说，虽然 HTML 的 align 属性可以快速设置文本对齐，但使用 CSS 的 text-align 属性提供了更多的控制和灵活性，是现代网页设计中推荐的方法。

3.2.7设置表格的（tr）标记行的属性

表格行t标记的属性用于设置表格某一行的样式

属性值	说明	属性	说 明
align	行内容水平对齐	bordercolor	行的边框颜色
valign	行内容垂直对齐	bordercolorlight	行的亮边框颜色
bgcolor	行的背景颜色	bordercolordark	行的暗边框颜色

通过t标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐居中对齐和居右对齐。通过t标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:

<table align = " center" >
<tr align = " left | center | right" valign=" top | middle l bottom" >
<td>…</td>
</tr>
<table>

说明：align属性的取值可以为left（默认居左），center（居中），right（居右）

设置表格行内容对齐属性。

<! DOCTYPE huml>
<html>
chead>
<meta charset=" UTF-8"><tile>设置行内客对齐方式</iille>
<siyle type = " texl/oss" >
tdf
background : #eelfce ;
</slyle>
</head>
<body>
<table borier=" 」" width = " 450px" height =" 240px" align =" center" bordereolor=" #6600f"<caplion><b>学生信息表(设置表行内容对齐方式)</b></caption><tr>
<>姓名 </th><山h>院系名称 </hh><th>班级</t>
</tr>
<tr align=" leÃ" valign=" top" ><ld>李明</ud><ld>信息学院</id><td>1616010218</td>
</lr>
<tr align=" center" valign=" middle" >
<Id>王丹</d>
<id>管理学院</id>
<td>1416020109</td>
<tr align=" right" valign =" bottom" ><ld>张小林 </d><ld>工程学院 </d><td>1716030115</d>
</lr>
</iable>
</body>
</html>

3.2.8设置单元格属性

在 HTML 表格中，单元格由 <td>（table data）和 <th>（table header）标签表示。这些标签用于定义表格中的数据单元格和表头单元格。以下是一些用于设置单元格属性的方法：

HTML 属性
bgcolor：

设置单元格的背景颜色。
示例：<td bgcolor="#FFCC00">
colspan：

定义单元格应该横跨的列数。
示例：<td colspan="2"> 表示单元格横跨两列。
rowspan：

定义单元格应该纵跨的行数。
示例：<td rowspan="3"> 表示单元格横跨三行。
scope：

定义 <th> 单元格的作用范围，用于表头，表明它是表头单元格。
示例：<th scope="col"> 表示单元格是一个列头。
abbr：

为表头单元格定义一个缩写，它提供了关于表头单元格内容的额外信息。
示例：<th abbr="Name">Full Name</th>
axis：

用于 <th> 标签，定义了表头单元格所属的轴或类别。
示例：<th axis="year"> 表示单元格与年份相关。
示例

<table border="1">
  <tr>
    <th abbr="Name" scope="col">Full Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Jane Doe</td>
  </tr>
  <tr>
    <td>25</td>
  </tr>
</table>

在这个例子中，第一行定义了两个表头单元格，第二行有两个数据单元格，第三行有一个单元格横跨两列，第四行有一个单元格纵跨两行。

使用 CSS 控制单元格样式
CSS 提供了更多灵活性和控制力，以下是一些常用的 CSS 属性：

background-color：

设置单元格的背景颜色。
background-image：

设置单元格的背景图像。
border：

设置单元格的边框样式。
padding：

设置单元格内容与边界之间的空间。
text-align：

设置单元格内容的水平对齐方式。
vertical-align：

设置单元格内容的垂直对齐方式。
width 和 height：

分别设置单元格的宽度和高度。

示例

<style>
  .table-cell {
    background-color: #FFFFCC;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
  }
</style>
 
<table>
  <tr>
    <th class="table-cell">Header 1</th>
    <th class="table-cell">Header 2</th>
  </tr>
  <tr>
    <td class="table-cell">Data 1</td>
    <td class="table-cell">Data 2</td>
  </tr>
</table>

在这个 CSS 示例中，.table-cell 类定义了单元格的样式，包括背景颜色、内边距、文本对齐和边框。

注意事项
使用 CSS 控制单元格样式不仅可以使 HTML 代码更简洁，还可以提供更多的样式选项和更好的浏览器兼容性。
在设计表格时，考虑到可访问性和可读性，适当的单元格样式可以帮助用户更好地理解表格内容。
在响应式设计中，单元格样式可能需要根据屏幕尺寸进行调整，以确保在不同设备上看起来合适。
确保在设置单元格样式时考虑到内容的可读性，避免使用过于鲜艳的颜色或复杂的背景图像。
通过这些方法，你可以创建出既美观又功能强大的表格，以适应各种网页设计的需求。

3.2.9表格单元格跨行，跨列属性

在 HTML 表格中，单元格可以跨越多行或多列，这通过 <td> 或 <th> 标签的 colspan 和 rowspan 属性来实现。这些属性允许单元格扩展，以合并相邻的行或列，从而创建更复杂的表格布局。

colspan 属性
colspan：定义单元格应该横跨的列数。
这个属性用于 <td> 或 <th> 标签。
当一个单元格需要跨越多个列时使用，例如，一个标题需要覆盖多个列或数据需要格式化。
rowspan 属性
rowspan：定义单元格应该纵跨的行数。
这个属性也用于 <td> 或 <th> 标签。
当一个单元格需要跨越多行时使用，例如，某些数据或标题需要在垂直方向上合并单元格。
示例

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td rowspan="2">老师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <!-- 这里的单元格被上面的单元格合并了 -->
  </tr>
  <tr>
    <td colspan="3">总结</td>
  </tr>
</table>

在这个例子中：

第二行的第三个单元格（工程师）使用了 rowspan="2" 属性，使其横跨两行。
最后一行使用了一个 colspan="3" 属性在一个单元格中横跨所有三列，通常用于标题或总结行。
注意事项
确保正确计算：在使用 colspan 和 rowspan 时，确保你合并的单元格数量不会超过表格的总列数或行数。
布局影响：合并单元格会影响表格的布局，因此在设计表格时需要仔细考虑。
可访问性：对于使用屏幕阅读器的用户，合并单元格可能会使表格结构变得复杂。确保使用适当的标题和结构来保持表格的清晰和可访问性。
样式问题：合并单元格可能会影响表格的样式，特别是在设置边框、背景颜色或文本对齐时。使用 CSS 可以更好地控制这些样式。
使用 CSS 控制合并单元格的样式
虽然 colspan 和 rowspan 主要用于 HTML 结构，但 CSS 可以用来增强合并单元格的视觉效果：

table {
  width: 100%;
  border-collapse: collapse;
}
 
th, td {
  border: 1px solid black;
  padding: 8px;
}
 
 rowspaned-cell {
  background-color: #f9f9f9;
}
 
 colspaned-cell {
  background-color: #e0e0e0;
}

在这个 CSS 示例中，合并的单元格可以有特定的背景颜色，以帮助区分它们。

通过合理使用 colspan 和 rowspan，你可以创建出结构丰富且视觉上吸引人的表格，同时保持内容的清晰和易于理解

3.3表格嵌套

在 HTML 中，表格可以通过在一个表格的单元格内嵌入另一个表格来实现表格嵌套。这种嵌套可以用于创建复杂的数据布局，例如数据汇总、层次结构的展示等。

基本语法

下面是一个简单的表格嵌套示例：

<table border="1">
    <tr>
        <th>外部表格标题</th>
    </tr>
    <tr>
        <td>
            <table border="1">
                <tr>
                    <th>内部表格标题 1</th>
                    <th>内部表格标题 2</th>
                </tr>
                <tr>
                    <td>数据 1</td>
                    <td>数据 2</td>
                </tr>
                <tr>
                    <td>数据 3</td>
                    <td>数据 4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

 在这个例子中，外部表格包含一个单元格，该单元格内嵌入了一个内部表格。内部表格有自己的标题行和数据行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格嵌套示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>
                <table border="1">
                    <tr>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                    </tr>
                    <tr>
                        <td>85</td>
                        <td>92</td>
                        <td>88</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>
                <table border="1">
                    <tr>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                    </tr>
                    <tr>
                        <td>78</td>
                        <td>81</td>
                        <td>90</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

注意事项
可读性：嵌套表格可能会使页面布局变得复杂，确保表格的层次结构清晰，以便用户容易理解。

可访问性：为表格提供适当的标题和摘要，使用 caption 标签和 scope 属性来增强屏幕阅读器用户的体验。

性能：嵌套表格可能会影响页面的加载性能，尤其是在数据量较大的情况下。优化表格的布局和尽量减少不必要的嵌套。

样式化：使用 CSS 来控制表格的外观，包括边框、背景色、字体样式等，以提高表格的可读性和美观性。

响应式设计：确保表格在不同设备上也能正确显示，可以使用媒体查询来调整表格的布局和样式。

通过合理使用表格嵌套，你可以创建出功能强大且信息丰富的数据展示方式，增强网页的信息组织和用户体验

3.4表单

3.4.1表单标记

在 HTML 表单中，使用特定的标签和属性可以增强表单的语义性、可访问性和功能性。以下是一些重要的表单标记技巧和实践：

1. <label> 标签
<label> 标签为表单控件定义标签，提高表单的可访问性。<label> 的 for 属性应与相关表单控件的 id 属性相匹配。

<label for="username">笼中雀井中月:</label>
<input type="text" id="username" name="username">

2. <fieldset> 和 <legend> 标签
<fieldset> 用于将表单中相关的元素分组，<legend> 提供组的标题。

<fieldset>
    <legend>登录信息</legend>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
</fieldset>

3. <form> 标签
<form> 标签定义一个表单，用于收集用户输入的数据，并发送到服务器。

<form action="/submit-form" method="post">
    <!-- 表单内容 -->
</form>

4. <input> 标签
<input> 标签用于创建各种类型的输入控件，如文本框、密码框、单选按钮、复选框等。

<input type="text" name="firstname" placeholder="输入名字">
<input type="checkbox" name="terms" required>
<label for="terms">我同意服务条款</label>

5. <select> 和 <option> 标签
<select> 标签创建下拉选择菜单，<option> 标签定义菜单中的选项。

<select name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
</select>

 6. <textarea> 标签
<textarea> 标签用于创建多行文本输入控件。

<textarea name="message" rows="4" cols="50" placeholder="输入消息..."></textarea>

 7. <button> 标签
<button> 标签用于创建可点击的按钮，可以用于提交表单或执行其他操作。

<button type="submit">提交</button>

 8. <datalist> 标签
<datalist> 标签为 <input> 元素提供一组预定义的选项，以便用户可以从建议列表中选择。

<input type="text" list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

9. <output> 标签
<output> 标签用于显示表单计算或用户操作的结果。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" name="a" value="5">
    +<input type="number" name="b" value="3">
    =<output name="result">8</output>
</form>

10. <progress> 和 <meter> 标签
<progress> 标签用于显示任务的完成进度，而 <meter> 标签用于显示已知范围内的测量值。

<progress value="70" max="100"></progress>
<meter value="2" min="0" max="5">2 out of 5</meter>

11. <optgroup> 标签
<optgroup> 标签用于将 <option> 元素分组，并提供一个分组标签。

<select name="cars">
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="American Cars">
        <option value="ford">Ford</option>
        <option value="chevrolet">Chevrolet</option>
    </optgroup>
</select>

使用这些表单标记，你可以创建功能丰富、用户友好且易于访问的表单，从而提供更好的用户体验和数据收集效率。

3.4.2定义域和域标题

egend标记为fieldset标记定义域标题

<fieldset> 标签在 HTML 中用于将表单内的相关元素分组。它通常与 <legend> 标签一起使用，<legend> 标签为 <fieldset> 内的元素提供标题或说明。使用 <fieldset> 可以增加表单的可读性和逻辑结构，同时对表单元素进行逻辑分组也有助于使用屏幕阅读器的用户更好地理解表单内容。

基本用法

3.4.3表单信息输入

在 HTML 表单中，信息输入是核心功能，允许用户输入数据，这些数据随后可以被处理或发送到服务器。以下是一些常用的 HTML 表单输入类型和相应的用例：

1. 文本输入 (<input type="text">)

用于输入短文本，如用户名、城市名等。

<label for="username">X西安:</label>
<input type="text" id="username" name="username">

2. 密码输入 (<input type="password">)、 

用于输入密码，输入的字符会被掩蔽。

<label for="password">密码:</label>
<input type="password" id="password" name="password">

 3. 电子邮件输入 (<input type="email">)

用于输入电子邮件地址，浏览器会验证输入格式。

<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">

 4. 数字输入 (<input type="number">)

用于输入数字，通常与 min、max 属性一起使用来限制数字范围。

<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="18" max="99">

5. 搜索字段 (<input type="search">)

用于搜索操作，浏览器可能会提供清除按钮。

<label for="search">搜索:</label>
<input type="search" id="search" name="search">

6. URL 输入 (<input type="url">)
用于输入网址，浏览器会验证输入格式。

<label for="website">网站:</label>
<input type="url" id="website" name="website">

7. 单选按钮 (<input type="radio">)
用于在一组选项中选择一个。

<label for="gender_male">男</label>
<input type="radio" id="gender_male" name="gender" value="male">
 
<label for="gender_female">女</label>
<input type="radio" id="gender_female" name="gender" value="female">

8. 复选框 (<input type="checkbox">)

用于选择或取消选择一个或多个选项。

<label for="terms">我同意服务条款</label>
<input type="checkbox" id="terms" name="terms">

9. 文件上传 (<input type="file">)
允许用户上传文件。

<label for="file">上传文件:</label>
<input type="file" id="file" name="file">

10. 下拉选择 (<select> 和 <option>)
允许用户从列表中选择一个或多个选项。

<label for="country">国家:</label>
<select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="japan">日本</option>
</select>

11. 文本区域 (<textarea>)
用于输入多行文本，如评论或描述。

<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

12. 提交按钮 (<input type="submit">)
用于提交表单。

<input type="submit" value="提交">

13. 重置按钮 (<input type="reset">)
用于重置表单到初始值。

<input type="reset" value="重置">

14. 隐藏输入 (<input type="hidden">)
用于存储不显示给用户的数据。

<input type="hidden" name="token" value="abc123">

15. 按钮 (<button>)
用于执行脚本或提交表单。

<button type="button" onclick="alert('Hello World!')">点击我</button>

表单验证
HTML5 提供了表单验证功能，可以在数据发送到服务器之前验证用户输入。

<form action="/submit-form" method="post" novalidate>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="提交">
</form>

在这个例子中，required 属性表示字段是必填的，novalidate 属性可以禁用默认的 HTML5 验证。

表单样式化
可以使用 CSS 来增强表单的视觉外观。

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin: 4px 0;
}
 
input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
}
 
input[type="submit"]:hover {
    background-color: #45a049;
}

通过这些表单输入类型和验证，你可以创建功能丰富、用户友好且易于访问的表单，从而提供更好的用户体验和数据收集效率

3.4.4 多行文本输入框

在 HTML 表单中，多行文本输入框可以通过 <textarea> 标签来创建。<textarea> 标签允许用户输入多行文本，如评论、描述或其他需要多行输入的场景。

基本语法

<textarea name="comment" rows="4" cols="50"></textarea>

name 属性：用于指定表单数据提交时的名称。
rows 属性：指定文本区域的行数。
cols 属性：指定文本区域列的宽度。
属性
placeholder：提供输入提示。
readonly：使文本区域内容只读。
disabled：禁用文本区域，不允许用户编辑。
required：使文本区域成为必填项。
maxlength：限制最大输入长度。
minlength：设置最小输入长度。
示例

<form action="/submit-comment" method="post">
  <label for="comment">评论:</label>
  <textarea id="comment" name="comment" rows="4" cols="50" placeholder="在这里输入您的评论..." required></textarea>
  <input type="submit" value="提交评论">
</form>

CSS 样式化
你可以使用 CSS 来改变 <textarea> 的外观，例如设置边框、背景、内边距等：

textarea {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  width: 300px;
  height: 100px;
  resize: vertical; /* 允许垂直调整大小 */
}
 
textarea:focus {
  border-color: #blue;
  outline: none; /* 移除聚焦时的默认轮廓 */
}

JavaScript 动态调整大小
虽然 <textarea> 标签的 rows 和 cols 属性可以指定初始大小，但它们并不灵活。你可以使用 JavaScript 来动态调整 <textarea> 的大小：

const textarea = document.getElementById('comment'); 
textarea.addEventListener('input', function() {
  // 动态调整高度以适应内容
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

可访问性
为了提高 <textarea> 的可访问性，确保使用 <label> 标签，并将其 for 属性与 <textarea> 的 id 属性相匹配：

<label for="comment">评论:</label>
<textarea id="comment" name="comment"></textarea>

响应式设计
在响应式设计中，你可以使用 CSS 媒体查询来调整 <textarea> 的宽度和高度，以适应不同设备的屏幕尺寸：

@media (max-width: 600px) {
  textarea {
    width: 100%;
    height: 50px;
  }
}

通过这些方法，你可以创建一个既美观又实用的多行文本输入框，以增强用户的输入体验和数据收集效率

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用select和option 标记来在表单中插入下拉菜单和列表项。
语法:

<select name=" " size= "" multiple>
<option value=""selected>文字信息1</ option>
<option value="">文字信息 2</option>
</select>

说明:select标记是成对标记，opton标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有 name，size 和 multiple 等属性。option 标记有 value 和 selected 等属性。select标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。它们的属性、取值及说明如表 
标记名称

标记名称	属 性	取 值	说明
select	пame	name
select	size	number	规定下拉列表框中可见选项的数目
select	multiple	multiple	规定可选择多个选项
option	value	value	规定列表项的值
option	selected	selected	设置预选列表项

<! DOCTYPE html>
 
<html>
<head>
<meta charset =" UTF-8" >
<tidle>下拉列表框的应用</tide>
</head>
<body>
<form>
<h3>请选择您的课程:</h3>
<select name = " course" size =" 4" multiple>
<option value="c]" selected>C语言程序设计</option>
<option value="c2">计算数学</option>
<option value="c3">数据结构</option>
<option value="c4">Java 程序设计</option>
<option value="c5">网页设计与制作</option>
</select>
</form>
</body>
</html>