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

最新推荐文章于 2024-09-30 14:30:30 发布

233M

最新推荐文章于 2024-09-30 14:30:30 发布

阅读量1k

点赞数 12

文章标签： css html 前端

本文链接：https://blog.csdn.net/2302_80555711/article/details/142370034

版权

3.1 表格概述

HTML表格是一种用于在网页中以行和列的形式展示数据的结构。

3.1.1 表格的结构

HTML表格使用<table>标签来定义，其中包含多个<tr>标签表示各行，每个行内可以有多个<th>（表头单元格）和<td>（数据单元格）

3.1.2 表格的基本语法

 
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <!-- 可以继续添加更多行和单元格 -->
</table>

在浏览器窗口表现为

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

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

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

3.2 表格属性的设置

HTML表格的属性用于定义表格的结构和样式。以下是一些常用的表格属性：

1. width：设置表格的宽度，可以使用像素（px）、百分比（%）或其他单位来指定。例如，`<table width="50%">`将表格宽度设置为其父元素宽度的50%。

2. height：设置表格的高度，同样可以使用像素、百分比或其他单位来指定。例如，`<table height="300px">`将表格高度设置为300像素。

3. border：设置表格边框的宽度和样式，可以是一个数字或一个字符串值。例如，`<table border="1">`将表格边框设置为1像素宽。

4.cellspacing：设置单元格之间的间距，通常使用像素作为单位。例如，`<table cellspacing="5">`将单元格之间的间距设置为5像素。

5. cellpadding：设置单元格内边距的大小，通常使用像素作为单位。例如，`<table cellpadding="10">`将单元格内边距设置为10像素。

6. align：设置表格的水平对齐方式，可以是"left"、"center"或"right"。例如，`<table align="center">`将表格居中对齐。

7. valign：设置表格的垂直对齐方式，可以是"top"、"middle"或"bottom"。例如，`<table valign="middle">`将表格垂直居中对齐。

8. bgcolor：设置表格的背景颜色，可以使用颜色名称或十六进制颜色代码。例如，`<table bgcolor="#FFCC00">`将表格背景颜色设置为黄色。

9. colspan：用于跨列合并单元格，使一个单元格横跨多列。例如，`<td colspan="2">`将一个单元格横跨两列。

10. rowspan：用于跨行合并单元格，使一个单元格横跨多行。例如，`<td rowspan="3">`将一个单元格横跨三行。

这些属性可以通过在相应的标签中添加属性值来应用到表格上。需要注意的是，某些属性如`width`、`height`、`border`等可能被CSS样式覆盖，因此在使用这些属性时需要谨慎考虑样式优先级。

 <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 表格的宽度和高度属性

同上参考3.2第1，2条

代码如下

<table width="50%" height="200"><table>

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

同上参考3.2第8条

background:表格图像属性；用于设置表格背景为图片等

代码如下

<table brcolor="颜色" background="图片路径"><table>

3.2.4 表格边框样式属性

参考3.2.1的第4，5条。

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

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

参考3.2.1的第6，7条。

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

3.2.6 表格水平对齐属性

参考3.2的第6条。

  <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）标记行的属性

在HTML中，可以使用`<tr>`标签来定义表格的行。

1. align: 用于设置文本对齐方式（已废弃，建议使用CSS）。
2. bgcolor: 用于设置背景颜色（已废弃，建议使用CSS）。
3. char: 用于设置单元格中字符的对齐方式（已废弃，建议使用CSS）。
4. charoff: 用于设置对齐字符的偏移量（已废弃，建议使用CSS）。
5. class: 用于为行应用CSS类。
6. dir: 用于设置文本方向（从左到右或从右到左）。
7. id: 用于为行设置唯一的ID。
8. lang: 用于设置行内容的语言。
9. onclick: 用于设置点击事件处理程序。
10. style: 用于直接设置行的内联样式。
11. title: 用于为行设置工具提示文本。
12. valign: 用于设置垂直对齐方式（已废弃，建议使用CSS）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Attributes</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr align="center" style="background-color: lightgray;">
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr class="highlight" onclick="alert('Row clicked!')">
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr id="row3" title="This is row 3">
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

3.2.8 设置单元格的属性

在HTML中，可以使用<td>标签来定义表格的单元格。

1. align: 用于设置文本对齐方式（已废弃，建议使用CSS）。
2. bgcolor: 用于设置背景颜色（已废弃，建议使用CSS）。
3. colspan: 用于指定单元格跨越的列数。
4. rowspan: 用于指定单元格跨越的行数。
5. class: 用于为单元格应用CSS类。
6. dir: 用于设置文本方向（从左到右或从右到左）。
7. id: 用于为单元格设置唯一的ID。
8. lang: 用于设置单元格内容的语言。
9. onclick: 用于设置点击事件处理程序。
10. style: 用于直接设置单元格的内联样式。
11. title: 用于为单元格设置工具提示文本。
12. valign: 用于设置垂直对齐方式（已废弃，建议使用CSS）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Cell Attributes</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr align="center" style="background-color: lightgray;">
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td class="highlight" onclick="alert('Cell clicked!')">Data 1</td>
            <td rowspan="2">Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

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

表格单元格的跨行和跨列属性主要通过HTML中的rowspan和colspan来实现。。

Rowspan：rowspan属性用于指定一个单元格跨越的行数。例如，如果一个单元格的rowspan属性设置为2，那么这个单元格将占据两行的高度。

Colspan：colspan属性用于指定一个单元格跨越的列数。例如，如果一个单元格的colspan属性设置为2，那么这个单元格将占据两列的宽度

3.2.9.1 单元格跨行

<table>
  <tr>
    <td rowspan="2">跨两行的单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
  </tr>
</table>

3.2.9.2 单元格跨列

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>1234567890</td>
    <td>0987654321</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>9876543210</td>
    <td>1234567890</td>
  </tr>
</table>

3.3 表格嵌套

表格嵌套是指在一个表格内部包含另一个或多个表格。在HTML中，可以使用<table>标签来创建嵌套的表格。

代码演示

 <table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>
      <table>
        <tr>
          <th>电话</th>
          <th>邮箱</th>
        </tr>
        <tr>
          <td>1234567890</td>
          <td>zhangsan@example.com</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>
      <table>
        <tr>
          <th>电话</th>
          <th>邮箱</th>
        </tr>
        <tr>
          <td>9876543210</td>
          <td>lisi@example.com</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

运行展示

3.4 表单

HTML表单是用于收集和提交用户输入的网页元素集合。它通常由多种不同类型的控件组成，如文本框、按钮、复选框等。

3.4.1 表单标记

表单标签：<form> 标签用于定义一个表单，其中可以包含各种输入元素。表单标签内的所有内容都将作为提交数据的一部分。

3.4.2 定义域和域标题

HTML中，域标签和域标题也有不同的定义。域标签通常用于将表单中的多个元素进行分组显示，而域标题则用于为各组区域显示标题。例如，使用<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 单行文本输入框

用于创建一个单行文本输入框，用户可以在其中输入文本。这是最常见的输入类型之一。

3.4.3.2 密码输入框

与文本输入类似，但输入的内容会被隐藏，通常用于输入密码。

3.4.3.3 复选框

允许用户选择一个或多个选项。

3.4.3.4 单选按钮

允许用户从一组选项中选择一个选项。

3.4.3.5 图像按钮

允许用户通过点击图像来提交表单，常用于自定义提交按钮样式。

3.4.3.6 提交按钮

用于提交表单数据到服务器。

3.4.3.7 重置按钮

用于将表单中所有输入的数据清除。

3.4.3.8 普通按钮

<button> :标签用于创建普通按钮，可以执行JavaScript函数或其他操作。

3.4.3.9 文件选择框

用于需要上传文件时使用的组件。name定义input标记的名称

3.4.3.10 隐藏框

<input type="hidden"> :用于存储表单中的隐藏数据，用户不可见。

3.4.4 多行文本输入框

多行文本输入框可以使用HTML的<textarea>标签来创建。

<form action="submit.php" method="post">
  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
  <input type="submit" value="Submit">
</form>

rows:指定文本框有多少行。

cols:指定每行文本框的字符宽度

3.4.5 下拉列表框

下拉列表框可以使用HTML的<select>标签来创建。

<form action="submit.php" method="post">
  <label for="fruits">Choose a fruit:</label><br>
  <select id="fruits" name="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="grape">Grape</option>
  </select><br>
  <input type="submit" value="Submit">
</form>

<option>：每个独立的选项标签

value:选项的值

如果需要用户可以选择多个选项，可以在<select>标签中添加multiple属性。

<select id="fruits" name="fruits" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
</select>

当添加multiple属性时可以按住Ctrl建或mac系统上的command建进行多选。

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" width="25%">&nbsp</td>
							<td height="280" valign="top">
								<table width="100%" border="0" cellpadding="20" cellspacing="0">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
									</tr>
									<tr>
										<td height="196" bgcolor="#ffaf03">
											<p class="zibai">地址:广东省江门市XXXXXXXXXXXXX<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="20" cellspacing="0">
									<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" style="border-spacing: 0px;">
									<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>