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

与秋逐鹿¥

已于 2024-09-30 20:10:33 修改

阅读量256

点赞数 3

分类专栏： HTML 文章标签：交互

于 2024-09-26 14:40:07 首次发布

本文链接：https://blog.csdn.net/qq_62558682/article/details/142555186

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

3.1 表格概述

3.1.1 表格的结构

表格是由行（Row）和列（Column）组成的二维数据结构，用于展示和组织数据。典型的表格结构包括表头（Header）、行（Row）和单元格（Cell）。表头通常位于表格的顶部，用于说明每列的含义；行是水平排列的数据集合；单元格则是表格中的最小数据单元。

3.1.2 表格的基本语法

表格的基本语法依赖于HTML标签来定义其结构和样式。主要标签包括：

<table>：定义整个表格。
<tr>：定义表格中的一行。
<th>：定义表头单元格，通常位于<thead>内部，用于标题或关键字段的显示。
<td>：定义标准数据单元格，位于<tbody>或<tfoot>中。
<caption>：可选，定义表格的标题，通常位于<table>标签内部的最前面。
<thead>、<tbody>、<tfoot>：分别用于定义表格的头部、主体和尾部区域，有助于提升表格的可读性和可维护性。
<colgroup>和<col>：用于定义表格列的属性，如宽度、对齐方式等。

<table>  
  <thead>  
    <tr>  
      <th>列标题1</th>  
      <th>列标题2</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>数据1</td>  
      <td>数据2</td>  
    </tr>  
    <tr>  
      <td>数据3</td>  
      <td>数据4</td>  
    </tr>  
  </tbody>  
</table>

3.2 表格属性设置

3.2.1 表格边框属性

通过CSS，可以精细控制表格边框的样式、宽度和颜色。常用的属性包括border-style、border-width和border-color。推荐使用border属性来同时设置这些值，以提高代码的可读性。

<table border="1">
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

3.2.2 表格的宽度和高度

表格的宽度和高度可通过CSS的width和height属性设置。对于表格的响应式设计，推荐使用百分比或视口单位（如vw, vh）来定义宽度。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>25</td>
  </tr>
</table>

3.2.3 表格边框样式

已在3.2.1中详细讨论，此处不再赘述。

3.2.4 单元格间距与边距

在HTML中，<table>标签的cellspacing和cellpadding属性已被废弃，取而代之的是CSS的border-collapse（用于合并单元格边框）和padding（用于设置单元格内边距）。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

3.2.5 表格水平对齐

表格的水平对齐通常通过CSS的margin属性（自动边距）或text-align属性（对于表格内容）来实现。对于整个表格的居中，可以使用margin: 0 auto;。

<table class="centered-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>25</td>
  </tr>
</table>

.centered-table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

3.2.6 `<tr>`行属性

<tr>标签自身不直接支持HTML属性来控制样式（如对齐方式）。这些样式通常通过CSS应用于<td>或<th>元素，或通过<tr>的类名（class）间接应用。

.centered-row th {
  text-align: center;
}

td, th {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

3.2.7 单元格属性

单元格的样式（如背景色、字体样式、边框）通常通过CSS来设置。对于特定单元格，可以通过其类名（class）或ID来单独设置样式。

.cell {
  background-color: lightblue;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid black;
  text-align: center;
}

#specialCell {
  background-color: yellow;
  color: black;
  font-weight: normal;
  border: 2px solid red;
}

<table>
  <tr>
    <td class="cell">单元格1</td>
    <td class="cell" id="specialCell">单元格2</td>
  </tr>
</table>

3.2.8 跨行与跨列

<td>和<th>标签的rowspan和colspan属性分别用于设置单元格跨越多行或多列。

<table>
  <tr>
    <td rowspan="2">单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>

<table>
  <tr>
    <td>单元格1</td>
    <td colspan="2">单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

3.3 表格嵌套

表格嵌套是通过在父表格的单元格内嵌入另一个<table>元素来实现的。这有助于创建复杂的数据布局或展示层级数据。

如下所示：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>联系方式</th>
    <th>地址</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
    <td>1234567890</td>
    <td>北京市</td>
  </tr>
  <tr>
    <td colspan="5">
      <table>
        <tr>
          <th>时间</th>
          <th>事件</th>
        </tr>
        <tr>
          <td>2020-01-01</td>
          <td>出生</td>
        </tr>
        <tr>
          <td>2010-09-01</td>
          <td>上学</td>
        </tr>
        <tr>
          <td>2018-06-01</td>
          <td>工作</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
    <td>9876543210</td>
    <td>上海市</td>
  </tr>
  <tr>
    <td colspan="5">
      <table>
        <tr>
          <th>时间</th>
          <th>事件</th>
        </tr>
        <tr>
          <td>1990-05-10</td>
          <td>出生</td>
        </tr>
        <tr>
          <td>2000-09-01</td>
          <td>上学</td>
        </tr>
        <tr>
          <td>2012-06-01</td>
          <td>工作</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这个示例中，主表格用于展示个人信息，每个人对应一个子表格来展示其事件历史。子表格嵌套在父表格的对应单元格中，并且使用colspan="5"属性将子表格的列数设置成和父表格一样，使其完整地占据一行。

通过嵌套表格，可以创建更复杂的数据布局，提高数据的可读性和可视化效果。

3.4 表单

表单（Form）是HTML中用于收集用户输入的组件。表单包含各种输入元素（如文本框、密码框、复选框、单选按钮等），以及提交按钮。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入您的姓名"><br><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="请输入密码"><br><br>
  
  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br><br>
  
  <label for="hobby">爱好：</label>
  <input type="checkbox" id="music" name="hobby" value="music">
  <label for="music">音乐</label>
  <input type="checkbox" id="sports" name="hobby" value="sports">
  <label for="sports">运动</label>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">阅读</label><br><br>
  
  <label for="address">地址：</label>
  <textarea id="address" name="address" rows="5" cols="30"></textarea><br><br>
  
  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select><br><br>
  
  <input type="submit" value="提交">
</form>

3.4.1 表单标记

3.4.2 定义域和域标题

使用<fieldset>和<legend>来组织表单中的相关元素，并为其添加标题。

3.4.3 表单信息输入

包括文本输入、密码输入、复选框、单选按钮等。

3.4.4 多行文本输入框

使用<textarea>标签。

3.4.5 下拉列表框

使用<select>标签及其内部的<option>元素来创建下拉列表。

示例代码：

<form>
  <fieldset>
    <legend>个人资料</legend>
  
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入您的姓名"><br><br>
  
    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br><br>
  
    <label for="hobby">爱好：</label>
    <input type="checkbox" id="music" name="hobby" value="music">
    <label for="music">音乐</label>
    <input type="checkbox" id="sports" name="hobby" value="sports">
    <label for="sports">运动</label>
    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">阅读</label><br><br>
  </fieldset>
  
  <fieldset>
    <legend>联系方式</legend>
  
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="请输入您的邮箱"><br><br>
  
    <label for="phone">手机：</label>
    <input type="tel" id="phone" name="phone" placeholder="请输入您的手机号码"><br><br>
  </fieldset>
  
  <input type="submit" value="提交">
</form>

在这个示例代码中，使用了<fieldset>标签来定义一个包含相关元素的组，并用<legend>标签添加了标题。表单被分为两个fieldset，分别是"个人资料"和"联系方式"。这样可以帮助更好地组织和呈现表单的内容，使其更具可读性和可访问性。