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

最新推荐文章于 2025-06-12 17:50:54 发布

折干鹤

最新推荐文章于 2025-06-12 17:50:54 发布

阅读量515

点赞数 20

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/2401_83479354/article/details/142349720

版权

3.1 表格概述

3.1.1 表格的结构

表格的结构表格是由行和列组成的二维结构，用于展示和组织数据。通常，表格的结构由表头、行和单元格组成。表头位于表格的顶部，用于标识每列的含义。行是表格的水平部分，用于展示数据。单元格是表格中的每个格子，用于存放具体的数据。

3.1.2 表格的基本语法

表格的基本语法表格的基本语法包括使用HTML标签来定义表格的结构和样式。以下是一些常用的表格标签：

<table>：用于定义一个表格。
<tr>：用于定义一个表格中的行。
<th>：用于定义表头单元格，位于表格的顶部。
<td>：用于定义普通单元格，位于行中。
<caption>：可选标签，用于定义表格的标题。
<thead>：可选标签，用于定义表格的头部。
<tbody>：可选标签，用于定义表格的主体部分。
<tfoot>：可选标签，用于定义表格的尾部。
<colgroup>：可选标签，用于定义一组列的属性。

使用这些标签可以创建一个基本的表格结构，然后可以使用CSS来设置表格的样式和布局。

<table>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

3.2 表格属性设置

3.2.1 表格边框属性

表格边框属性用于设置表格的边框样式、边框宽度和边框颜色。

常见的表格边框样式有实线、虚线、点线等，可以通过CSS的border-style属性来设置。例如，border-style: solid;表示边框为实线。

表格边框宽度可以通过CSS的border-width属性来设置，常见的单位有像素（px）、百分比（%）等。例如，border-width: 1px;表示边框宽度为1像素。

表格边框颜色可以通过CSS的border-color属性来设置，可以使用颜色名称、十六进制颜色码或RGB颜色值。例如，border-color: red;表示边框颜色为红色。

除了分别设置边框样式、宽度和颜色，还可以使用border属性来同时设置边框的样式、宽度和颜色。例如，border: 1px solid red;表示边框为1像素宽的红色实线。

此外，表格边框属性也可以分别设置表格的上边框、下边框、左边框和右边框的样式、宽度和颜色，分别使用border-top、border-bottom、border-left和border-right属性。例如，border-top: 1px solid red;表示设置表格的上边框为1像素宽的红色实线。

需要注意的是，如果表格的border-collapse属性设置为collapse，则相邻单元格的边框会合并。如果设置为separate，则相邻单元格的边框不会合并。

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

3.2.2 表格的宽度和高度属性

在HTML中，可以使用CSS来设置表格的宽度和高度属性。表格的宽度属性可以使用CSS的width属性来设置，可以使用绝对单位（如px）或相对单位（如百分比）来指定宽度。例如：

<table width="500" height="300">
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

3.2.4 表格边框样式属性

在HTML的表格中，边框样式属性用于定义表格的边框样式。常用的边框样式属性有以下几种：

border-style：用于定义边框的样式，可以取值为：none（无边框）、hidden（隐藏边框）、dotted（点状边框）、dashed（虚线边框）、solid（实线边框）、double（双线边框）、groove（凹陷边框）、ridge（凸起边框）、inset（内凹边框）、outset（外凸边框）。
border-width：用于定义边框的宽度，可以取值为：thin（细边框）、medium（中等边框）、thick（粗边框）、具体的像素值。
border-color：用于定义边框的颜色，可以取值为颜色名称、十六进制颜色码、RGB颜色值。
border：用于一次性定义边框样式的所有属性，可以按照如下顺序设置：border-width border-style border-color。

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

3.2.5 表格单元格间距、单元格边距属性

表格单元格间距和单元格边距是一些用于调整表格布局和样式的属性。

表格单元格间距属性（cellspacing）用于控制单元格之间的间距。通过设置该属性的值，可以调整单元格之间的水平和垂直间距。默认情况下，单元格间距为0。

表格单元格边距属性（cellpadding）用于控制单元格内容与单元格边框之间的距离。通过设置该属性的值，可以调整单元格内容与单元格边框之间的空白区域大小。默认情况下，单元格边距为1个像素。

<table cellspacing="10" cellpadding="5">
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

3.2.6 表格水平对齐属性

表格（table）是HTML中常用的元素之一，用于显示数据和构建布局。表格水平对齐属性用于控制表格中的内容在水平方向上的对齐方式，常用的属性有以下几种：

align属性：控制整个表格在容器中的水平对齐方式。取值有left（左对齐，默认值）、right（右对齐）、center（居中对齐）。

<table align="center">
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

text-align属性：控制表格中某一行或某一列的水平对齐方式。取值有left（左对齐）、right（右对齐）、center（居中对齐）。

<table>
    <tr>
        <td style="text-align: left;">左对齐</td>
        <td style="text-align: right;">右对齐</td>
        <td style="text-align: center;">居中对齐</td>
    </tr>
</table>

float属性：用于控制表格在容器中的浮动方向，从而实现水平对齐的效果。取值有left（向左浮动）、right（向右浮动）。

<table style="float: left;">
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

margin属性：用于控制表格在容器中的左右边距，从而实现水平对齐的效果。

<table style="margin-left: auto; margin-right: auto;">
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

这些属性可以单独使用，也可以组合使用，以实现不同的水平对齐效果。

<table align="center">
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

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

<tr> 标记行的属性有以下几种：

align：设置单元格内容的水平对齐方式，可取值为 left（左对齐）、center（居中对齐）或 right（右对齐）。

示例：

<tr align="center">

valign：设置单元格内容的垂直对齐方式，可取值为 top（顶部对齐）、middle（居中对齐）或 bottom（底部对齐）。

示例：

<tr valign="middle">

bgcolor：设置单元格的背景色，可使用颜色名称或十六进制颜色码。

示例：

<tr bgcolor="lightblue">

rowspan：设置单元格在垂直方向上所占据的行数。

示例：

<tr rowspan="2">

colspan：设置单元格在水平方向上所占据的列数。

示例：

<tr colspan="3">

以上是常用的 <tr> 标记行的属性，你可以根据需要选择适合的属性进行设置。

<table>
  <tr bgcolor="lightblue">
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

3.2.8 设置单元格属性

你可以使用以下代码设置单元格的属性：

设置单元格的值：可以通过worksheet.cell(row=row_num, column=col_num).value来设置单元格的值。

worksheet.cell(row=1, column=1).value = 'Hello World'

设置单元格的字体样式：可以通过openpyxl.styles库来设置字体样式，然后将样式应用到单元格上。

from openpyxl.styles import Font

font = Font(name='Arial', size=12, bold=True)

worksheet.cell(row=1, column=1).font = font

设置单元格的背景颜色：可以通过openpyxl.styles库来设置背景颜色，然后将颜色应用到单元格上。

from openpyxl.styles import PatternFill

fill = PatternFill(start_color='FFFF00', end_color='FFFF00', fill_type='solid')

worksheet.cell(row=1, column=1).fill = fill

设置单元格的边框：可以通过openpyxl.styles库来设置边框样式，然后将样式应用到单元格上。

from openpyxl.styles import Border, Side

border = Border(left=Side(style='thin'), right=Side(style='thin'), top=Side(style='thin'), bottom=Side(style='thin'))

worksheet.cell(row=1, column=1).border = border

这些是一些常见的单元格属性设置方法，你可以根据自己的需求进行进一步的设置。

<table>
  <tr>
    <td bgcolor="lightblue">数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
    <td>数据单元</td>
  </tr>
</table>

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

<table>
  <tr>
    <td rowspan="2">数据单元</td>
    <td>数据单元</td>
  </tr>
  <tr>
    <td>数据单元</td>
  </tr>
</table>

3.3 表格嵌套

表格嵌套是指在一个表格的单元格中嵌入另一个表格。这可以用于在一个表格中创建更复杂的布局或展示更多的数据。

要嵌套表格，可以在父表格的单元格中插入子表格。子表格和父表格的结构和格式都是相互独立的。子表格可以有自己的标题、行、列以及数据。

嵌套表格的使用可以提高表格的可读性和可用性。例如，在一个主要的表格中，可以嵌入一个详细信息的子表格，以便用户可以展开和查看更多的相关数据。

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>数据单元</td>
          <td>数据单元</td>
        </tr>
        <tr>
          <td>数据单元</td>
          <td>数据单元</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

3.4 表单

3.4.1 表单标记

<form>
  <!-- 表单元素 -->
</form>

3.4.2 定义域和域标题

<form>
  <fieldset>
    <legend>个人信息</legend>
    <!-- 表单元素 -->
  </fieldset>
</form>

3.4.3 表单信息输入

<form>
  <input type="text" name="username" placeholder="请输入用户名"><br>
  <input type="password" name="password" placeholder="请输入密码"><br>
  <input type="checkbox" name="remember" value="1">记住密码<br>
  <input type="radio" name="gender" value="male">男性
  <input type="radio" name="gender" value="female">女性<br>
</form>

3.4.4 多行文本输入框

<form>
  <textarea rows="5" cols="30" name="message" placeholder="请输入留言"></textarea>
</form>

3.4.5 下拉列表框

<form>
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
</form>