0
0

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

3.1 表格概述

表格是一种用于展示数据的格式化的结构。它由行和列组成，每个交叉点称为单元格，可以放置文本、图像和其他HTML元素。

表格在网页设计中起到了重要的作用，可以用于多种用途，如：

  1. 数据展示：表格可以清晰地组织和展示大量的数据，使数据易于阅读和理解。
  2. 数据比较：通过将相关的数据放置在不同的列中，可以方便地进行比较和分析。
  3. 排序和过滤：表格通常具有排序和过滤功能，使用户可以根据需要对数据进行排序和筛选。
  4. 表单输入：表格可以用于创建输入表单，用户可以在单元格中输入数据。
  5. 布局设计：表格的格子结构可以用于网页布局，将内容分为不同的区域。

3.1.1 表格的结构

表格的结构由以下几个主要组件组成：

  1. <table>标签：用于定义整个表格，是表格的根元素。在<table>标签中，可以包含多个<tr>标签和<caption>标签。
  2. <tr>标签：用于定义表格中的行。在<table>标签内部，通过使用多个<tr>标签创建多行。每个<tr>标签中可以包含多个<td>或<th>标签。
  3. <td>标签：用于定义表格中的普通单元格。每个<td>标签表示一个单元格，可以放置文本、图像和其他HTML元素。
  4. <th>标签：用于定义表格中的表头单元格。<th>标签的内容通常用于标识列的名称或描述，具有粗体和居中对齐的默认样式。
  5. <caption>标签：可选的标签，用于在表格上方或下方添加标题。每个表格只能有一个<caption>标签。
  6. 表格的边框：可以使用CSS样式来设置表格的边框属性，包括边框宽度、边框颜色、边框样式等。

3.1.2 表格的基本语法

在HTML中，常用表格主要通过5个标记来构成：

,和表格标题标记表格表头标记表格的行标记表格的列标记

<table>
         <caption>23软件2班名单</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>

3.2 表格属性的设置

3.2.1 表格边框属性

表格边框属性是用来控制表格边框样式和宽度的属性。常见的表格边框属性包括以下几个：

  1. border：设置表格边框样式和宽度
  2. bordercolor：设置表格边框的颜色
  3. bordercolorlight:设置表格亮边框颜色
  4. bordercolordark:设置表格暗边框颜色

语法:

,
,

常用表格标记形式及说明表
标记形式说明

表格标记
..
(1)border属性。用于设置边框的粗细，单位是像素（px）。
(2)bordercolor 属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
(3) bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="3px" bordercolor="blue">
                    <caption>23软件2班名单</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.2 表格的宽度和高度属性

  • width：设置表格的宽度，可以使用像素值、百分比或其他长度单位。
  • height：设置表格的高度，可以使用像素值、百分比或其他长度单位。

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

表格背景颜色：设置bgcolor属性可以改变表格的背景颜色，

表格图像属性：可以在表格的属性或样式中插入图像。一种常见的方法是使用HTML的"img"标签

3.2.4 表格边框样式属性

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

语法：

内容

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

单元格间距属性 cellspacing：用于设置单元格之间的距离。

单元格边距属性 cellpadding：用于设置单元格内容与单元格边框之间的距离

设置单元格间距：

设置单元格边距：**

**

效果对比图：

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式，有居中、居左、居右3种。

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

居左：

居右：

居中：

​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        ​
        ​
        <table>
        
                    <caption>23软件2班名单</caption>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr align="center">
                        <td>1</td>
                        <td>张三</td>
                        <td>男</td>
                    </tr>
                    <tr align="left">
                        <td>2</td>
                        <td>李四</td>
                        <td>女</td>
                    </tr>
    
        <tr align="right">
                        <td>2</td>
                        <td>王五</td>
                        <td>男</td>
                    </tr>
        <table/>
    </body>
</html>

​​

​

3.2.8 设置单元格的属性

行背景颜色属性（bgcolor）：设置行的背景颜色。例如：

<tr bgcolor="#ff0000">
  ...
</tr>

行高度属性（height）：设置行的高度。例如：

<tr height="50">
  ...
</tr>

行垂直对齐属性（valign）：设置行中内容的垂直对齐方式。例如：

<tr valign="top">
  ...
</tr>
 

​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        ​<table>
        <tr align="left" valign="top"  height="30" bgcolor="#ff0000">
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr align="right" valign="buttom">
                        <td>1</td>
                       <td align="right" valign="botton">张三</td>
                        <td>男</td>
                    </tr>
                    <tr align="center" valign="middle">
                        <td>2</td>
                        <td>李四</td>
                        <td>女</td>
                    </tr>
        </table>
    </body>
</html>

​​

​

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

3.2.9.1 单元格跨行

  • 跨行属性：使用rowspan属性来指定单元格所要跨越的行数。例如，将一个单元格跨越2行，可以将rowspan属性的值设置为2。
<td rowspan="2">跨行单元格</td>

3.2.9.2 单元格跨列

  • 跨列属性：使用colspan属性来指定单元格所要跨越的列数。例如，将一个单元格跨越3列，可以将colspan属性的值设置为3。
<td colspan="3">跨列单元格</td>

例：设置单元格合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置单元格跨行、跨列属性</title>
    </head>
    
    <body>
        <h3 align="center">设置单元格跨行、跨列属性</h3>
        <table border="1" width="500px" align="center" bordercolor="#3366ff">
            <caption>专业研讨会日程安排</caption>
            <tr align="center">
                <td colspan="2">上午</td>
                <td colspan="2">下午</td>
            </tr>
            <tr>
                <td>8:00-10:00</td>
                <td>10:10-12:00</td>
                <td>14:00-16:00</td>
                <td>16:10-18:00</td>
            </tr>
            <tr align="center">
                <td rowspan="2">学校领导讲话</td>
                <td>大会主题报告</td>
                <td>行业企业专题报告</td>
                <td rowspan="2">总结报告</td>
            </tr>
            <tr align="center">
                <td>专家报告</td>
                <td>分组讨论</td>
            </tr>
            <tr align="center">
                <td colspan="4">全天参观人工智能实训中心</td>
            </tr>
            
            </table>
    </body>
</html>

3.3 表格嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>嵌套表格布局页面</title>
                <style>
                    body{font-size: 36px;}
                </style>
    </head>
    
    <body>
        <h4 align="center">嵌套表格布局页面</h4>
            <table width="660px" border="1" align="center" bordercolor="#3333ff">
                <tr>
                    <td height="100">
                        <table width="100%" border="1" bordercolor="red">
                            <tr height="50" align="center">
                                <td rowspan="2" width="100">logo</td>
                                <td>广告条</td>
                            </tr>
                                <tr height="50" align="center">
                                    <td>导航</td>
                                </tr>
                        </table>
                    </td>
                </tr>
                    <tr>
                        <td height="300">
                            <table width="100%" border="1" bordercolor="#33ff99">
                                <tr align="center">
                                    <td height="300" width="30%">左栏目</td>
                                    <td height="300" width="70%">正文内容</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                        <tr align="center">
                            <td height="100">版权信息</td>
                        </tr>
            </table>    
    </body>
</html>

3.4 表单

3.4.1 表单标记

表单标记为成对标记，以<form>开始和</form>结束。

表单标记、取值及说明
属性取值说明namename规定表单的名称actionurl规定提交表单时，向何处发送表单数据methodget | post规定如何发送表单数据。post方法主要包含名称/值对，并且无须包含于 action 属性的URL 中。get方法把名称/值对加在action的 URL后面并且把新的URL送至服务器，不推荐使用enctypeMIME_type规定表单数据在发送到服务器之前应该如何编码

3.4.2 定义域和域标题

在HTML中，可以使用

<fieldset>

标记来定义一个字段集，用于将一组相关的表单元素分组在一起。

<fieldset>

标记包裹了一组表单元素以及一个可选的

<legend>

标记，用作字段集的标题。

<fieldset>
            <legend align="center">个人信息</legend>
            姓名：<input type="text" name="user"/>
            <!-- 单选按钮 -->
            性别：
            <input type="radio" name="sex" value="male" checked/>男性
            <input type="radio" name="sex" value="female"/>女性
            <br />
            <!-- 复选按钮 -->
            爱好：
            <input type="checkbox" name="n1"  value="sing" checked/>唱歌
            <input type="checkbox" name="n2"  value="dance"/>跳舞
            <input type="checkbox" name="n3"  value="basketball"/>篮球
            <input type="checkbox" name="n4"  value="run"/>长跑
            
        </fieldset>
        <fieldset>
            <legend align="center">教学评价</legend>
            请选择课程：
            <select multiple>
                <option name="web">网页</option>
                <option name="java">JAVA</option>
                <option name="andriod">安卓</option>
                <option name="ps">PS</option>
                <option name="internet">网络</option>
            </select>
            请输入您的宝贵意见：
            <textarea rows="4" clos="30"></textarea>
        </fieldset>

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单输入信息标记是input标记，可以输入一行信息。

input标记属性主要有name和type等，输入类型由type属性定义，设置属性值不同，就会产生不同的界面效果。

3.4.3.1 单行文本输入框

type的属性值为text,在表单中插入一个单行文本输入框

​
        <from>
            用户名:<input type="text" name="user"/>
        </from>

​

3.4.3.2 密码输入框

type属性为

**password**,

用于接收用户输入的密码，并以星号或圆点等方式将输入内容隐藏起来。

  <form>
            用户名<input type="text" name="user"/>
            密码：<input type="password" name="password"/>
        </form>

3.4.3.3 复选框

type属性为checkbox,向表单插入一个复选框，value属性用于设置复选框的值，用户利用复选框在网页上设置多项选择，复选框有一个checked属性，可以用来设置复选框的初始选中状态。

<form>
            姓名：<input type="text" name="user"/><br />
            爱好：
            <input type="checkbox" name="n1"  value="sing" checked/>唱歌
            <input type="checkbox" name="n2"  value="dance"/>跳舞
            <input type="checkbox" name="n3"  value="basketball"/>篮球
            <input type="checkbox" name="n4"  value="run"/>长跑
            
        <form/>

3.4.3.4 单选按钮

type属性值为radio,用户可以通过单击单选按钮来选择其中一个选项。只有一个单选按钮可以被选中，选择其他的单选按钮会取消之前的选择。

在提交表单时，被选中的单选按钮的值会被提交给服务器，可以通过后端代码来处理这个值。

<form>
            姓名：<input type="text" name="user"/>
            <!-- 单选按钮 -->
            性别：
            <input type="radio" name="sex" value="male" checked/>男性
            <input type="radio" name="sex" value="female"/>女性
</from>

3.4.3.5 图像按钮

type属性值为image，可以向表单插入一个图像按钮

<form>
            <input type="image" src="img/02.jpg"/>
        </form>

3.4.3.6 提交按钮

 type属性值为**submit**,可以插入一个提交按钮，value设置按钮名称

        <form>
            <input type="submit" value="登录"/>
        </form>

3.4.3.7 重置按钮

type属性值为reset,插入一个重置按钮，将表单输入内容清空

<form>

<input type="reset"/>

    </form>

3.4.3.8 普通按钮

type属性值为button,与提交按钮不同，普通按钮通常用于执行一些前端操作，例如展示隐藏内容、弹出对话框、发送AJAX请求等。可以通过JavaScript来为普通按钮添加事件监听器，以便在用户点击按钮时执行特定的操作。

<from>

<input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>

</from>

3.4.3.9 文件选择框

  type属性值为**file**,可以向表单中插入一个文件选择框

        <form>
            请选择文件：<input type="file"/>
        </form>

3.4.3.10 隐藏框

type属性为hidden,可实现向表单中插入一个隐藏框

<form>

<input type="hidden" name="abc" value="123"/>

</form>

3.4.4 多行文本输入框

多行文本输入框（Textarea）是一种用于接收多行文本输入的表单元素。它可以用于用户输入大段文字或多行文本的情况。可以使用**

<textarea>

**标签创建多行文本输入框。

**<textarea**>

标签可以设置rows和cols属性，分别表示可见的行数和列数。可以根据实际需求调整这些属性的值。

 <form>
           请输入您的宝贵意见 <textarea rows="4" clos="30"></textarea>
        </form>

3.4.5 下拉列表框

下拉列表框（Select）是一种用于提供选项选择的表单元素。它允许用户从预定义的选项中选择一个或多个值，可以使用**

<select>

标签创建下拉列表框，内部使用

<option>

**标签定义每个选项。

<form>
            <!-- 下拉列表框 -->
            请选择课程：
            <select multiple>
                <option name="web">网页</option>
                <option name="java">JAVA</option>
                <option name="andriod">安卓</option>
                <option name="ps">PS</option>
                <option name="internet">网络</option>
            </select>
            
        </form>

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" cellspacing="5">
                        <tr>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
                                <img src="img/logo.png" alt="" width="100" height="63"/>
                            </td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">网站首页</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</td>
                            
                        </tr>
                    </table>
                </td>
            </tr>
            <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" aligh="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                                    </tr>
                                    <tr>
                                        <td height="196" bgcolor="#FFAF03">
                                            <p class="zibai">地址:广东省江门市XXXXXXXXX<br />
                                            电话:0750-XXXXXX<br />
                                            传真:0750-XXXXXX<br />
                                            QQ:12345678<br />
                                            电子邮箱:<br />
                                            [email protected]<br />
                                            工作室网站:<br/>
                                            www.XXXX.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 calss="zibai">&nbsp;</p>
                                            <p calss="zibai chu"><a href="#">更多&gt;&gt;</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280">
                                <table widht="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>
                </td>
            </tr>
        </table>
    </body>
</html>

​

案例2——用户注册信息

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

​​<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>用户注册信息</title>
        <style type="text/css">
            fieldset{
                width: 700px;
            }
        </style>
        </head>
        <body>
            <form action="" method="post" enctype="multipart/form-data" name="form" id="form">  
                <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="radio" name="radio" id="radio1" value="radio" checked="checked" />  
                                男<img src="img/Male.png" width="22" height="21" align="absmiddle"/> 
                                <input type="radio" name="radio" id="radio2" value="radio" />  
                                女<img src="img/Female.png" width="23" height="21" align="absmiddle"/>
                            </td>  
                        </tr>  
                        <tr>  
                            <td width="200" align="right">密码：</td>  
                            <td><input type="password" name="textfield2" id="textfield2" /></td>  
                        </tr>  
                        <tr>  
                            <td width="200" align="right">出生年月：</td>  
                            <td><input name="textfield4" type="text" id="textfield4" 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" />  
                                <label for="checkbox">看书</label>  
                                <input type="checkbox" name="checkbox2" id="checkbox2" />  
                                <label for="checkbox2">上网</label>  
                                <input type="checkbox" name="checkbox3" id="checkbox3" />  
                                <label for="checkbox3">打球</label>  
                            </td>  
                        </tr>  
                        <tr>  
                            <td width="200" align="right">相片：</td>  
                            <td><input type="file" name="filefield" id="filefield" /></td>  
                        </tr>  
                        <tr>  
                            <td width="200" align="right">意见或建议：</td>  
                            <td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>  
                        </tr>  
                        <tr>  
                            <td colspan="2" align="center">  
                                <input type="submit" name="button" id="button" value="提交" />  
                                <input type="reset" name="button2" id="button2" value="重置" />  
                            </td>  
                        </tr>  
                    </table>  
                </fieldset>  
            </form>
        </body>
</html>

标签： css html 前端
本文转载自: https://blog.csdn.net/2401_87174676/article/details/142374018
版权归原作者 昼夜ɑː 所有， 如有侵权，请联系我们删除。
登录后发布评论

“第三章表格布局与表单交互”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

推荐开源项目：ScubaGear - 守护您的Microsoft 365安全配置

甲方安全和乙方安全的区别

全面解析 iOS 和 Android 内嵌 H5 页面通信与交互实现方案

解决Docker中使用 Open WebUI识别不到本地ollama中的模型

Keepalived + Nginx 实现高可用

【华三】不懂链路聚合？看这篇就够了！华三配置详解

【白嫖 Cloudflare】之免费 AI 服务，从API调用到应用搭建

文章导航