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

最新推荐文章于 2024-11-07 16:35:05 发布

傻子和白痴

最新推荐文章于 2024-11-07 16:35:05 发布

阅读量635

点赞数 7

文章标签： css html 前端

本文链接：https://blog.csdn.net/2402_87155212/article/details/142370060

版权

3.1 表格概述

3.1.1 表格的结构

二维表，行列组成

3.1.2 表格的基本语法

HTML中，表格是用于组织和显示数据的常见元素。表格的基本语法包括使用 <table> 、 <tr> 、 <th> 、 <td> 等标签来创建表格的行、列和单元格。以下是一个简单的表格示例及其基本语法：

<table>23</table>
		<tr>
			<th>xx</th>
			<th>xx</th>
			<th>xx</th>
		</tr>
		<tr>
			<td>yy</td>
			<td>yy</td>
		</tr>

以下是表格基本语法的主要部分：

<table> ：定义表格的开始和结束。
<tr> ：定义表格中的一行。
<th> ：定义表格中的表头单元格。
<td> ：定义表格中的标准单元格。

表头（ <th> ）通常使用加粗字体，并且会居中对齐。
标准单元格（ <td> ）默认左对

3.2 表格属性的设置

在HTML中，你可以通过为表格元素添加属性来控制表格的显示样式和行为。以下是一些常见的表格属性及其用法：

border ：设置表格边框的宽度，默认值为 1 像素。
cellpadding ：设置单元格内容与单元格边框之间的空白区域，单位为像素。
cellspacing ：设置相邻单元格之间的空白区域，单位为像素。
width ：设置表格的宽度，单位可以是像素或百分比。
height ：设置表格的高度，单位为像素。
align ：设置表格的水平对齐方式，可以是 left 、 center 或 right 。
bgcolor ：设置表格的背景颜色。
summary ：提供关于表格内容的描述性文本，主要用于辅助技术。

<table border="1" cellpadding="5" cellspacing="0" width="50%" height="200" align="center" bgcolor="#f0f0f0">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <!-- 更多的行和单元格 -->
</table>

3.2.1 表格边框属性

表格边框的属性用于定义表格边框的样式、宽度和颜色。以下是一些常用的表格边框属性：
1. border：设置表格边框的宽度和样式，可以是一个数字或一个字符串值。例如，`<table border="1">`将表格边框设置为1像素宽。
2. bordercolor：设置表格边框的颜色，可以使用颜色名称或十六进制颜色代码。例如，`<table bordercolor="#FF0000">`将表格边框颜色设置为红色。
3. bordercollapse：决定是否将表格边框合并为单一边框或分开显示。取值可以是"collapse"（合并）或"separate"（分开）。
4. frame：设置表格外边框的显示方式，可以是"void"（无边框）、"above"（仅顶部有边框）、"below"（仅底部有边框）、"hsides"（仅左右两侧有边框）、"vsides"（仅上下两侧有边框）、"lhs"（仅左侧有边框）、"rhs"（仅右侧有边框）、"box"（四周都有边框）、"border"（与"box"相同）。
5. rules：设置表格内部单元格之间的边框显示方式，可以是"none"（无内部边框）、"groups"（在行组和列组之间显示边框）、"rows"（在行之间显示边框）、"cols"（在列之间显示边框）、"all"（在所有单元格之间显示边框））。
6. cellspacing：设置单元格之间的间距，通常使用像素作为单位。例如，`<table cellspacing="5">`将单元格之间的间距设置为5像素。
7. cellpadding：设置单元格内边距的大小，通常使用像素作为单位。例如，`<table cellpadding="10">`将单元格内边距设置为10像素。

3.2.2 表格的宽度和高度属性

在HTML中，你可以通过为表格的 <table> 标签添加 width 和 height 属性来设置表格的宽度和高度。以下是这两个属性的基本用法和示例：

width属性：

width="value" ：设置表格的宽度，单位可以是像素（px）或百分比（%）。
默认值是 auto ，表示表格会根据内容自动调整宽度。
height属性：

height="value" ：设置表格的高度，单位是像素（px）。
默认值是 auto ，表示表格会根据内容自动调整高度。

<table width="50%" height="200">
     <!-- 表格内容 -->
   </table>

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

<table bgcolor="" background="">...</table>

bgcolor:背景颜色 background：背景图像路径

3.2.4 表格边框样式属性

HTML中，你可以通过为表格的 <table> 标签添加 borderstyle 属性来设置表格边框的样式。以下是 borderstyle 属性的基本用法和示例：

属性值：

solid ：实线边框。
dashed ：虚线边框。
dotted ：点线边框。
double ：双线边框。
groove ：凹槽边框。
ridge ：脊边框。
inset ：嵌入边框。
outset ：凸出边框。
none ：无边框。

   <table border="1" borderstyle="solid">
     <!-- 表格内容 -->
   </table>

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

在HTML中，你可以通过为表格的 <table> 标签添加 cellpadding 和 cellspacing 属性来设置单元格间距和单元格边距。以下是这两个属性的基本用法和示例：

cellpadding 属性

cellpadding="value" ：设置单元格内容与单元格边框之间的空白区域，单位为像素。
默认值为 1 像素。

cellspacing 属性

cellspacing="value" ：设置相邻单元格之间的空白区域，单位为像素。
默认值为 2 像素。

 <table border="1" cellpadding="5" cellspacing="0">
  <!-- 表格内容 -->
</table>

3.2.6 表格水平对齐属性

HTML中，你可以通过为表格单元格（ <td> 或 <th> ）标签添加 align 属性来设置单元格内容的水平对齐方式。以下是 align 属性的基本用法和示例：

属性值：

left ：左对齐。
center ：居中对齐。
right ：右对齐。

  <table>
     <tr>
       <th align="left">左对齐</th>
       <th align="center">居中对齐</th>
       <th align="right">右对齐</th>
     </tr>
     <tr>
       <td align="left">左对齐</td>
       <td align="center">居中对齐</td>
       <td align="right">右对齐</td>
     </tr>
     <!-- 更多的行和单元格 -->
   </table>

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

align 属性：

设置表格行的水平对齐方式。
可能的值有 left （左对齐）、 center （居中对齐）、 right （右对齐）。
默认值为 left 。
valign 属性：

设置表格行的垂直对齐方式。
可能的值有 top （顶部对齐）、 middle （居中对齐）、 bottom （底部对齐）。
默认值为 baseline ，即基线对齐。
bgcolor 属性：

设置表格行的背景颜色。
可以使用预定义的颜色名称或十六进制颜色代码。

bordercolor：行的边框颜色

brdercolorlight：行的亮边框颜色

3.2.8 设置单元格的属性

表格的列（td）标记的属性可以设置单元格属性。

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

在HTML中，你可以通过为表格单元格（ <td> 或 <th> ）标签添加 rowspan 和 colspan 属性来设置单元格跨行和跨列的属性。以下是这两个属性的基本用法和示例：

rowspan 属性

rowspan="value" ：设置单元格跨越的行数。
默认值为 1 ，即单元格只占据一行。

colspan 属性

colspan="value" ：设置单元格跨越的列数。
默认值为 1 ，即单元格只占据一列。

 <table border="1">
  <tr>
    <th rowspan="2">表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td colspan="2">单元格1</td>
  </tr>
  <tr>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
  <!-- 更多的行和单元格 -->
</table>

3.2.9.1 单元格跨行

3.2.9.2 单元格跨列

3.3 表格嵌套

在HTML中，表格嵌套是指在表格的单元格（ <td> 或 <th> ）中包含另一个表格。这种结构通常用于创建更复杂的表格布局，例如表单、数据表或复杂的数据展示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>嵌套表格布局</title>
	</head>
	<style>body{font-size: 36px;}</style>
	<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 表单标记

在HTML中，表单（Form）是用于收集用户输入数据的重要元素。表单由一系列的表单元素组成，如文本框、复选框、单选按钮、下拉列表等。这些表单元素使用特定的标记来定义，并且通常包含在 <form> 标签中。

以下是一些常用的表单元素及其标记：

文本框（Text Field）：

<input type="text"> ：用于输入单行文本。
密码框（Password Field）：

<input type="password"> ：用于输入密码，文本不会显示。
单选按钮（Radio Button）：

<input type="radio" name="radio-group"> ：用于选择一个选项，名称相同的单选按钮会形成一个组。

3.4.2 定义域和域标题

在HTML中，表单中的域（Field）是指用户可以在其中输入信息的表单元素，如文本框、密码框、复选框等。域标题（Field Label）则是指示用户应该在域中输入什么内容的文本标签。

使用<fieldset>标签可以给表单元素进行分组，而<legend>标签则用于定义某一组表单的标题。

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <form>
        <!-- 定义域标签 -->
        <fieldset>
            <!-- 域标题 -->
            <legend>个人信息</legend>
            姓名：<input type="text" name="name"><br>
            年龄：<input type="number" name="age"><br>
            性别：
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
        </fieldset>
        <fieldset>
            <legend>联系方式</legend>
            邮箱：<input type="email" name="email"><br>
            电话：<input type="tel" name="phone"><br>
        </fieldset>
        <input type="submit" value="提交">
    </form>
</body>
</html>

3.4.3 表单信息输入

表单信息输入是指用户在网页上填写表单时，将数据输入到相应的字段中。这些字段可以是文本框、下拉菜单、单选按钮、复选框等不同类型的输入元素。

3.4.3.1 单行文本输入框

文本框（Text Field）：

name="定义元素名" maxlength="规定字段字符的长度" size="定义输入字段的宽度" value="默认值" readonly=“规定文本框只读，不可修改或编辑”

<input name="" type="text" maxlength="" size="" value="" readonly/>

3.4.3.2 密码输入框

密码框（Password Field）：

<input type="password"> ：用于输入密码，文本不会显示。

3.4.3.3 复选框

复选框（Checkbox）：

<input type="checkbox"> ：用于选择多个选项。

3.4.3.4 单选按钮

单选按钮（Radio Button）：

<input type="radio" name="radio-group"> ：用于选择一个选项，名称相同的单选按钮会形成一个组。

3.4.3.5 图像按钮

<input type="image">` 允许用户通过点击图像来提交表单，常用于自定义提交按钮样式。

3.4.3.6 提交按钮

<input type="submit"> ：用于提交表单。

3.4.3.7 重置按钮

<input type="reset"> ：用于重置表单。

3.4.3.8 普通按钮

<input name="" type="button" value="" onclick=""/>

value:规定标记的值

onclick:事件代码

3.4.3.9 文件选择框

<input name="" type="file" value=""/>

3.4.3.10 隐藏框

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

3.4.4 多行文本输入框

<textarea name="" rows="" cols="" wrap="">初始内容</textarea>

3.4.5 下拉列表框

下拉列表（Dropdown List）：

<select> ：用于创建下拉列表。
<option> ：用于定义下拉列表中的选项。

<select name="" size="" multiple>
			<option value="" selected>xxx</option>
			<option value="">xxx</optgroup>
		</select>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室————联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:hold;
			}
			.zil{
				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">
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">
							<img src="img/logo.jpg" alt="" width="100" height="63"/></td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">网站首页</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">关于我们</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">团队合作</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">相关作品</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">设计理念</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">人物介绍</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">联系我们</td>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellpadding="0" cellspacing="20">
						<tr>
							<td height="318">&nbsp;</td>
							<td height="280" valign="top">
								<table width="100%" border="0" cellpadding="0" cellspacing="20">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
									</tr>
									<tr>
										<td height="196" bgcolor="#ffaf03">
											<p class="zibai">地址:广东省江门市XXXXXXXXXXXXXXX<br />
											电话:0750-XXXXXXX<br />
											传真:0750-XXXXXXX<br />
											QQ:12345678<br />
											电子邮箱:<br />
											123@163.com<br />
											工作室网站:<br />
											www.XXXX.com</p >
										</td>
									</tr>
								</table>
							</td>
							<td width="280" valign="top">
								<table width="100%" border="0" cellpadding="0" cellspacing="20">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">关于我们</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" cellspancing="0" cellpadding="20">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">团队合作</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 chu"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

第二个

<!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="multipart/form-data" name="form1" id="form1">
			<fieldset>
				<legend>用户注册</legend>
				<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
				  <tr>
				    <td><img src="img/a.png" width="600" height="195" /></td>
				  </tr>
				</table>
				<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
				  <tr>
				    <td width="200" align="right">用户名：</td>
				    <td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></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 type="password" name="textfield3" 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="images/Male.gif" width="22" height="21" align="absmiddle" />
				      <input type="radio" name="radio" id="radio2" value="radio2" />
				      女<img src="images/Female.gif" width="23" height="21" align="absmiddle" /></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>
				      </select>
				        月
				        <select name="select2" id="select2">
				          <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>
				        </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="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>