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

3.1 表格概述

HTML表格用于在网页上以行和列的形式展示数据。基本结构由

<table>

标签开始，内部包含

<tr>

（表格行）、

<td>

（单元格）和

<th>

（表头单元格）。这种格式使得数据更易于阅读和组织，适用于显示统计信息、数据列表等。

3.1.1 表格的结构

HTML表格的基本结构由几个关键部分组成：

表格开始标签：用<table>标签开始，表示表格的开始。
表头：使用<tr>标签定义表格的一行，然后用<th>标签为该行的每一列定义表头，表头内容通常会加粗并居中。
表格行：每一行数据也用<tr>标签定义。每行内的数据单元格用<td>标签表示，代表普通数据。
表格结束标签：用</table>标签结束整个表格。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table> <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> </body></html>

3.1.2 表格的基本语法

HTML表格的基本语法包括以下标签：

**<table>**：定义表格。
**<tr>**：定义表格行。
**<th>**：定义表头单元格，通常加粗并居中。
**<td>**：定义普通数据单元格
<caption>:标题

3.2 表格属性的设置

设置表格标记中的边框属性可以改变表格的外观

3.2.1 表格边框属性

**border**：设置表格的边框宽度，例如 border="1"。
bordercolor:设置边框颜色。
bordercolorlight：设置亮边框颜色
bordercolordark：设置暗边框颜色

3.2.2 表格的宽度和高度属性

width

** 和 **

height

**：设置表格的宽度和高度。

width="20px/20%",herght="25px/20%"

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

设置表格的 bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:

...

(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色

(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径

(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <table border="1px" bordercolor="#000fff"
     width="20%" height="15%" bgcolor="#00fff0"
     background="img/school.jpg">
        <caption style="font-weight: bold;">23软件四班</caption>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>姓别</th>
      </tr>
      <tr>
        <td>1</td>
        <td>谢凡</td>
        <td>男</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李天文</td>
              <td>男</td>
      </tr>
    </table>

        
    </body>
</html>

3.2.4 表格边框样式属性

1.设置表格标记中的fame属性可以改变表格边框样式

2.设置表格标记中的rules属性可以改变表格内部边框的样式

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

单元格间距：cellspacing: 10px; 设置单元格之间的间距为10像素。
单元格边距：cellpadding: 15px; 设置单元格内容的内边距，使内容与边框之间有一定距离。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1px" bordercolor="#000fff" width="20%" height="15%" bgcolor="#00fff0" background="img/school.jpg" cellspacing="10px" cellpadding="10px"> <caption style="font-weight: bold;">23软件四班</caption> <tr> <th>序号</th> <th>姓名</th> <th>姓别</th> </tr> <tr> <td>1</td> <td>谢凡</td> <td>男</td> </tr> <tr> <td>2</td> <td>李天文</td> <td>男</td> </tr> </table> </body></html>

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左，局右，居中3种。注：表格整体位置改变，并不是表格内容对其。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <table border="1px" bordercolor="#000fff"
     width="20%" height="15%" bgcolor="#00fff0"
     background="img/school.jpg"
     cellspacing="10px" cellpadding="10px"
     align="center">
        <caption style="font-weight: bold;">23软件四班</caption>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>姓别</th>
      </tr>
      <tr>
        <td>1</td>
        <td>谢凡</td>
        <td>男</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李天文</td>
              <td>男</td>
      </tr>
    </table>

        
    </body>
</html>

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

可以使用

<tr>

标签的属性来设置行的样式和行为。常用的属性包括：

**bgcolor**：设置行的背景颜色。
**align**：设置内容的水平对齐方式（left、center、right）。
**valign**：设置内容的垂直对齐方式（top、middle、bottom）。
**class**：指定CSS类名，方便应用样式。

3.2.8 设置单元格的属性

表格的列（td）标记的属性可以设置单元格的显示风格，（td）标记常用的属性。

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

在HTML中，可以使用

rowspan

和

colspan

属性来实现单元格跨行和跨列。

rowspan

指定单元格跨越的行数，

colspan

指定跨越的列数。

3.2.9.1 单元格跨行

单元格跨行可以使用

rowspan

属性。这个属性指定了单元格要跨越的行数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1">
          <tr>
            <td rowspan="3">跨行单元格</td>
            <td>单元格1</td>
          </tr>
          <tr>
            <td>单元格2</td>
          </tr>
          <tr>
            <td>单元格3</td>
          </tr>
        </table>

    </body>
</html>

3.2.9.2 单元格跨列

单元格跨列可以使用

colspan

属性。这个属性指定了单元格要跨越的列数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1">
          <tr>
            <td colspan="2">跨列单元格</td>
            <td>单元格3</td>
          </tr>
          <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
          </tr>
        </table>

    </body>
</html>

3.3 表格嵌套

在HTML中，可以通过在一个单元格内嵌入另一个表格来实现表格嵌套。

<table border="1">
  <tr>
    <td>外部单元格1</td>
    <td>
      <table border="1">
        <tr>
          <td>内部单元格1</td>
          <td>内部单元格2</td>
        </tr>
        <tr>
          <td>内部单元格3</td>
          <td>内部单元格4</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>外部单元格2</td>
    <td>外部单元格3</td>
  </tr>
</table>

3.4 表单

HTML表单是用于收集用户输入和提交数据的结构化区域。表单通常用于用户注册、登录、搜索、反馈等场景。表单的基本组成部分包括：

<form> 标签：定义表单的开始和结束，包含属性如 action（处理数据的URL）和 method（HTTP方法，如 GET 或 POST）。
输入元素：用于获取用户输入，包括：- 文本框 (<input type="text">)- 密码框 (<input type="password">)- 邮箱框 (<input type="email">)- 单选框 (<input type="radio">)- 复选框 (<input type="checkbox">)- 下拉菜单 (<select>)
标签：使用 <label> 标签可以关联输入元素，提升可访问性。
提交按钮：通过 <input type="submit"> 或 <button> 创建，用于提交表单数据。
表单验证：可以通过 required、minlength、maxlength 等属性进行基本的客户端验证。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单案例</title>
    </head>
    <body>
        <h1>用户注册表单</h1>
            <form action="/submit" method="post">
                <!-- 姓名 -->
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required><br><br>
        
                <!-- 邮箱 -->
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required><br><br>
        
                <!-- 密码 -->
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required><br><br>
        
                <!-- 性别 -->
                <label>性别:</label>
                <input type="radio" id="male" name="gender" value="male" required>
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label><br><br>
        
                <!-- 爱好 -->
                <label>爱好:</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><br><br>
        
                <!-- 下拉菜单 -->
                <label for="country">国家:</label>
                <select id="country" name="country">
                    <option value="china">中国</option>
                    <option value="usa">美国</option>
                    <option value="japan">日本</option>
                </select><br><br>
        
                <!-- 提交按钮 -->
                <input type="submit" value="注册">
            </form>
        </body>
    </body>
</html>

3.4.1 表单标记

表单form标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其包含的数据内容将被完整的提交给服务器。

3.4.2 定义域和域标题

定义域（Fieldset）和域标题（Legend）用于将表单中的相关元素分组，从而提高可读性和可用性。它们通常用于将相似的输入控件组织在一起，方便用户理解。

1.

<fieldset>

标签

作用：用于将表单中的一组元素包裹在一起，以便进行视觉上的分组。
特点：通常会在元素周围显示一个边框。

2.

<legend>

标签

作用：为 <fieldset> 提供标题或说明，描述该组元素的功能。
特点：<legend> 通常显示在边框的顶部，帮助用户理解这个组的目的。

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输人信息发送到服务器并等待服务署响应。表单中输人信息的标记是input 标记，可以输人一行信息。input 标记是单个标记。
语法:
<input name = " " type =" "/>
说明:imput标记的属性主要有name和type等，输人类型是由类型type属性定义的type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。imput 标记的属性取值及说明

3.4.3.1 单行文本输入框

设置impu 标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输人的数据只能单行显示，不能换行。语法:
<input name = " " type =" text" maxlength=" " size= " “ value =" " readonly/>说明:单行文本输人框的主要属性有name，maxlength，size，value和readonly，其属性及取值

3.4.3.2 密码输入框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>密码输入框示例</title>
    </head>
    <body>
        <form>
                <label for="password">请输入密码:</label>
                <input type="password" id="password" name="password" required>
                <button type="submit">提交</button>
            </form>
    </body>
</html>

说明：

type="password"：设置输入框为密码类型，输入的内容将以星号（或其他符号）显示。
required：表示该输入框为必填项。

你可以将上述代码复制到一个HTML文件中，然后用浏览器打开，就能看到一个简单的密码输入框。

3.4.3.3 复选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复选框示例</title>
    </head>
    <body>
        <form>
                <h3>请选择您的兴趣:</h3>
                <label>
                    <input type="checkbox" name="interest" value="music"> 音乐
                </label><br>
                <label>
                    <input type="checkbox" name="interest" value="sports"> 体育
                </label><br>
                <label>
                    <input type="checkbox" name="interest" value="travel"> 旅行
                </label><br>
                <button type="submit">提交</button>
            </form>
    </body>
</html>

说明：

每个复选框都被包裹在一个 <label> 标签中，这样用户点击文本时也能选中对应的复选框。
name 属性用于标识输入字段，value 属性表示复选框的值。
用户可以选择多个复选框。

3.4.3.4 单选按钮

单选按钮（Radio Button）是一种用于表单输入的HTML元素，允许用户从一组互斥的选项中选择一个。它们通常用于表示只有一个有效选项的场景，例如性别、状态或其他分类。

主要特点：

互斥性：在同一组单选按钮中，用户只能选择一个选项。一旦选择了某个选项，其他选项将自动取消选择。
分组：通过设置相同的 name 属性，将多个单选按钮分为一组。这样，浏览器在提交表单时，只会将所选的那个选项的值发送到服务器。
可访问性：通过使用 <label> 标签，可以使得单选按钮的文本更易于点击，提升用户体验和可访问性。

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选按钮示例</title>
</head>
<body>
    <form>
        <h3>请选择您的性别:</h3>
        <label>
            <input type="radio" name="gender" value="male"> 男
        </label><br>
        <label>
            <input type="radio" name="gender" value="female"> 女
        </label><br>
        <label>
            <input type="radio" name="gender" value="other"> 其他
        </label><br>
        <button type="submit">提交</button>
    </form>

</body>

</html>

3.4.3.5 图像按钮

图像按钮（Image Button）是一种HTML元素，允许使用图像作为按钮。当用户点击这个图像时，它将触发相应的操作，例如提交表单或执行JavaScript函数。图像按钮通常用于提升用户界面的视觉效果和吸引力。

主要特点：

外观：与传统的文本按钮相比，图像按钮可以更具吸引力，能够更好地表达功能（例如，使用购物车图标表示“添加到购物车”）。
交互性：用户点击图像按钮时，可以触发表单提交或执行特定的操作，类似于普通按钮。
可定制性：可以使用不同的图像来提供反馈，比如在鼠标悬停时显示不同状态的图像。

3.4.3.6 提交按钮

提交按钮（Submit Button）是HTML表单中的一个重要元素，允许用户将输入的数据发送到服务器进行处理。当用户填写完表单后，点击提交按钮会触发表单的提交操作。

主要特点：

类型：通常使用 <input type="submit"> 或 <button type="submit"> 来创建提交按钮。
表单提交：提交按钮的主要功能是将表单数据发送到指定的 action URL，进行后端处理。
可定制性：可以通过CSS和JavaScript对按钮的外观和行为进行自定义，例如修改样式或在点击时执行特定的脚本。

3.4.3.7 重置按钮

重置按钮（Reset Button）是HTML表单中的一个元素，用于清空表单中的所有输入字段，将其恢复到初始状态。用户点击重置按钮后，表单中的文本框、复选框、单选框等内容都会被清除。

主要特点：

类型：通常使用 <input type="reset"> 来创建重置按钮。
功能：当用户点击重置按钮时，表单中的所有输入数据会被清空，恢复到默认值。
可定制性：可以通过CSS样式和JavaScript对重置按钮的外观和行为进行自定义。

3.4.3.8 普通按钮

普通按钮（Button）是在HTML中用于执行特定动作的元素，可以通过JavaScript来实现多种功能。普通按钮并不直接提交表单数据，而是可以用于触发事件或执行某些操作。

主要特点：

类型：使用 <button> 标签或 <input type="button"> 来创建普通按钮。
功能：可以通过JavaScript为按钮添加点击事件，执行各种操作，例如显示提示框、修改页面内容等。
可定制性：可以轻松地通过CSS来更改按钮的外观和样式。

3.4.3.9 文件选择框

文件选择框（File Input）是HTML表单中的一个元素，允许用户从他们的设备中选择一个或多个文件进行上传。

3.4.3.10 隐藏框

隐藏框（Hidden Input）是HTML表单中一种用于存储数据但不在用户界面上显示的输入元素。通常使用

<input>

标签，并将其类型设置为

hidden

。

主要特点

不显示：隐藏输入框不会在网页上可见，但它会随表单一起提交。
用于存储数据：可以用于存储需要在表单提交时发送但不需要用户直接编辑的数据，比如用户ID、状态标识等。
安全性注意：虽然隐藏输入框不显示在页面上，但用户仍然可以通过浏览器的开发者工具查看和修改其值。因此，不应将敏感信息放在隐藏输入框中。

应用场景

传递用户信息或状态到后台处理。
保存跨页面传递的数据（如会话ID）。
用于实现AJAX请求时的参数传递。

隐藏框在很多情况下非常实用，尤其是在需要保留某些数据而又不希望用户直接看到或修改它们的场合。

3.4.4 多行文本输入框

多行文本输入框（Textarea）是HTML表单中用于接收用户输入的一个元素，可以让用户输入多行文本。

属性

**rows**：指定可见的行数。
**cols**：指定每行的字符数。
**placeholder**：提供一个提示文本，显示在输入框内，当输入框为空时可见。
**required**：使输入框为必填项。
**maxlength**：限制输入的最大字符数。

3.4.5 下拉列表框

下拉列表框（Dropdown List）是HTML表单中用于提供选项供用户选择的一种输入元素。

**name**：指定表单数据的名称。
**id**：为下拉列表设置唯一标识，可以与标签关联。
**required**：使选择成为必填项。
**multiple**：允许用户多选（需结合CSS调整样式）。
**size**：指定可见选项的数量（默认为1）。

3.5 综合案例——表格与表单

案例1

达维工作室“联系我们”子页，用嵌套表格制作达维工作室的“联系我们”子页。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>达维工作室---联系我们</title>
        <style type="text/css">
            .chu{
                font-weight: bold;
            }
            .zi1{
                font-family: "微软雅黑";
                font-size: 20px;
                font-weight: bold;
                color: #ED630A;
            }
            .zi2{
                font-family: "微软雅黑";
                font-weight: bold;
                color: #f60;
                text-decoration: underline;
            }
            .zibai{
                font-family: "微软雅黑";
                color: #fff;
            }
            body{
                background-image:url(img/bj.jpg) ;
            }
            </style>
            
    </head>
    <body>
        <table width="1190" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="1190" border="0" align="center" cellpadding="0" cellsacing="5">
                        <tr>
                            <td width="100" align="center" valign="middle" bacolor=#FFFFFF"">
                            <img src="img/logo.jpg" alt="" width="100" height="63"/></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                                
                            
                        </tr>
                    </table>
                </td>
            </tr>
            <td>
                <table width="100%" border="0" cellspacing="20" cellpadding="0">
                <tr>
                    <td height="318">&nbsp;</td>
                    <td width="280" valign="top">
                    <table width="100% border="0" cellspacing="0" cellpadding="20">
                <tr>
                    <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                </tr>
            <tr>
                <td height="196" bgcolor="#FFAF03">
                <p class="zibai">地址：广东省江门市xxxxx<br />
                电话：0750-xxxxxx<br />
                传真：0750-xxxxxx<br />
                QQ：1234567890<br />
                电子邮箱：<br />
                www.xxxxx.com</p>
                </td>
                </tr>
                </table>
            </td>
            <td width="280" valign="top">
            <table width="100%" border="0"cellspacing="0" cellpadding="20">
            <tr>
                <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
            </tr>
            <tr>
                <td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>
                专门提供全方面的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
                达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程......</p>
                <p class="zibai">&nbsp;</p>
                <p class="zibai chu"><a href="#">更多 &gt;&gt;</a></p>
                </td>
            </tr>
        </table>
    </td>
     <td width="280">
         <table width="100% border="0" cellspacing="0" cellpadding="20">
             <tr>
                 <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作
                     
                 </td>
             </tr>
             <tr>
                 <td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队：</p>
                 <p class="zibai">成员都具有多年的设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最适合的设计方案。</p>
                 <p class="zi2">我们的承诺：</p>
                 <p class="zibai">本工作室设计与制作的网站均属原创，不套用网上的任何模板，根据每个公司的特点，设计出客户......</p>
                <p class="zibai">&nbsp;</p>
                <p class="zibai chu"><a href="#">更多 &gt;&gt;</a></p>
                </td>
             </tr>
         </table>
     </td>
    </tr>
   </table>
   
    </body>
</html>

案例2

用户注册信息，利用表单制作一个”用户注册信息“表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册信息</title>
        <style type="text/css">
        fieldset{
            width:700px;
        }
        </style>
        </head>
    <body>
        <form action="" method ="post" enctype="multipar/form-data" name="form1" id="form1">
        <fieldset>
        <legend>用户注册信息</legend>
        <table width= "600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="200" align="right">用户名:</td>
            <td><input type="text" name="textfield" id="textfield"/></td>
        </tr>
        <tr>
            <td width="200" align="right">密码:</td>
            <td> <input type="password" mame="textield2" id="texfield2"/></td>
        </tr>
        <tr>
            <td width="200" align="right">确认密码:</td>
            <td><input type="password" name="textield3" id="textfield3" /></td>
        </tr>
        <tr>
            <td width="200" align="right">性别:</td>
            <td> <input name="radio" type="radio" id= "radio" value="radio" checked="checked" />
            男 <img src="img/Male.gif" widh="22" height="21" align="absmiddle"/>
            <input type="radio" name="radio" id="radio2" value="radio2"/>
            女 <img src="img/Female.gif" width="23" heighr="21" align="absmiddle" /></td>
        <tr>
        <tr>
            <td width="200" align="right">出生年月:</td>
            <td><input name="textfield4" type="text" id="texfield4" size="12"/>年
            <select name="select" id="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
                    月</td>
            </tr>
            <tr>
                <td width="200" align="right">业余爱好:</td>
                <td> <input type="checkbox" name="checkbox" id="checkbox"/>看书
                <input type="checkbox" name="checkbox2" id="checkbox2"/>上网
                <input type="checkbox" name="checkbox3" id="checkbox3"/>打球
            </td>
            </tr>
            <tr>
                <td width="200" align="right">相片:</td>
                <td height="25"><input type="file" name="fileField" id="fileField"/></td>
            </tr>
            <tr>
                <td width="200" align="right">意见或建议:</td>
            <td>
                <textarea name="textarea" id="textarel" cols="45" rows="S"></textarea>
            </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                <input type="submit" name="button" id= "button" value="提交">
                <input type="reset" name="button2" id= "buton2" value="重置">
            </td>
            </tr>
            </table>
            </fieldset>
            </form>
    </body>
</html>

标签： css html 前端

本文转载自: https://blog.csdn.net/xs377905132/article/details/142376869
版权归原作者 @无铭 所有，如有侵权，请联系我们删除。

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

3.2 表格属性的设置

3.2.6 表格水平对齐属性

1.

2.

案例1

案例2

发表评论