3.1 表格概述
表格是网页中的一个重要元素，可以包含文字和图像。表格可以使网页结构紧凑整齐，内容一目了然。
3.1.1 表格的结构
表格是由行和列组成的，每行又有一个或者多个单元格组成，用于放置数据。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格内容称为数据，数据单元格可以包含图片、表格、文本、列表、水平线和段落等。
3.1.2 表格的基本语法
表格的所有内容都会放在<table></table>里面
包含表格标题（<caption></caption>）
sdfghjklvbnm.bnm,./ertyuip,./,（<th></th>）表示表头，会有加粗效果
（<td></td>）表示表格内容
（<tr></tr>）表示表格的行
3.2 表格属性的设置
表格是网页文件中的重要元素，制作网页的工程中常常要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。
表格标记的属性、取值及说明表如下：
| 属性 | 取值 | 说明 |
| align | left I center I right | 规定表格相对周围元素的对齐方式 |
| bgcolor | #rrggbb | colorname b (r%,g%,b%) rgb (rr, gg,bb) | 规定表格的背景颜色 |
| border | pixels | 规定表格边框的宽度 |
| cellpadding | pixels 1 % | 规定单元边沿与其内容之间的空白 |
| cellspacing | pixels 1 % | 规定单元格之间的空白 |
| frame | above | below | hsides | vsides | lhs I rhs | border | void | 规定外侧边框的哪个部分是可见的 |
| rules | none | all | rows | colslgroups | 规定内侧边框的哪个部分是可见的 |
| height | %1 pixels | 规定表格的高度 |
| width | % | pixels | 规定表格的高度 |
3.2.1 表格边框属性
设置表格标记中的边框属性可以改变表格的外观。
| 边框属性 | 说明 | 边框属性 | 说明 |
| borde | 表示表格边框粗细 | bordercolor | 表示表格边框颜色 |
| bordercolorlight | 表示表格亮边框颜色 | bordercolordark | 表示表格暗边形颜色 |
语法:
<table border="" bordercolor=" bordercolorlight="" bordercolordark="">...</table>
(1)border属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和色英文名称。
(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性
通过设置width属性和 height,属性可以设置表格的宽度和高度。
语法:
<table width=" height=""></table>
当表格内容放不下时，宽度生效高度失效
响应式布局，设置宽和高的百分比，可以随浏览器的大小而变化。
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor="" background"">...</table>
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
3.2.4 表格边框样式属性
设置frame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
语法：
<table frame=""rules="">........内容......</table>
frame和rules属性值及说明如下：
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变单元格之间的间距。
设置表格标记中的cellpadding属性可以增加单元格之间的内容与内部边框的距离。
间距默认十个像素点。
语法：
<table cellspacing=""cellpadding=""</table>
（1）cellpadding。值的单位为像素或百分比。
（2）cellspacing。值的单位为像素或百分比，默认值为2px。
3.2.6 表格水平对齐属性
通过设置align属性，设定对齐方式（居左，居右，居中）默认居左。
3.2.7 设置表格的（tr）标记行的属性
valign 属性设置上下对齐（靠上，靠中，靠下）（top，middle，bottom）
| 属性值 | 说明 | 属性 | 说明 |
| align | 行内容水平对齐 | bordercolor | 行的边框颜色 |
| valign | 行内容垂直对齐 | bordercolorlight | 行的亮边框颜色 |
| bgcolor | 行的背景颜色 | bordercolordark | 行的暗边框颜色 |
通过r标记align属性可以设置的水平对齐方式。水平对齐方式有居左对齐居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
3.2.8 设置单元格的属性
表格的列(td)标记的属性可以设置表格单元格的显示风格。
td标记常用的属性如下：
| 属性值 | 说明 | 属性值 | 说明 |
| align | 单元格内容水平对齐 | bordercolorlight | 单元格的亮边框颜色 |
| valign | 单元格内容垂直对齐 | bordercolordark | 单元格的暗边框颜色 |
| bgcolor | 单元格的背景颜色 | rowspan | 单元格跨行 |
| background | 单元格背景图像 | colspan | 单元格跨列 |
| bordercolor | 单元格的边框颜色 | width | 单元格宽度 |
| height | 单元格高度 |
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。
语法：<td rowspan="行数">...</td>
3.2.9.2 单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：<tdcolspan="列数">...</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:00-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 表单
HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一
个完整的交互表单由两部分组成:一是客户端包含的表单页面，用于填写浏览者进行交互的
信息；另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输人信
息，然后将这些信息提交给服务器；服务器中的应用程序会对这些信息进行处理响应，这样
就完成了浏览者和服务器之间的交互。
3.4.1 表单标记
表单form标记为成对标记，以<form>开始</form>结束。表单定义了采集数据的范围，其所包含的数据内容将完整地提交给服务器。
checked设置默认被选中的选项，可以手动取消。
3.4.2 定义域和域标题
属性为：fieldset，可以在网页上定义域，使用域可以将表单里面的相关元素进行分组，fieldset标记可以将内容一部分打包，生成一组相关表单的字段
3.4.3 表单信息输入
信息输入全部使用input,使用type区别边框属性。
3.4.3.1 单行文本输入框
value可以把数据传给后端，数据需使用英文，否则后端会出现乱码。
3.4.3.2 密码输入框
设置input标记的type属性值为password，可以向表单中插入一个密码输入框。
语法：
<input name=" "type="password"maxlength=" "size=" "/>
3.4.3.3 复选框
属性值为checkbox，向表单中插入一个复选框，使用复选框可以在网页中设置多项选择。
语法：
<input name=" "type="checkbox"value=" "checked=" "/>
3.4.3.4 单选按钮
属性值为radio，像表单中插入一个单选按钮，可以在网页中为某一选择设置多个但选项。
语法：
<input name=" "type="radio"value=" "checked=" "/>
3.4.3.5 图像按钮
属性值为image，可以实现向表单发送一个图像，通过src属性加载图像。
语法：
<input name=" "type="image"src=" "width=" " height=""/>
3.4.3.6 提交按钮
属性值为submit，可以使用value修改按钮名称
3.4.3.7 重置按钮
属性值为reset,向表单中插入一个重置按钮，可以将信息清空，让用户重新填写。
3.4.3.8 普通按钮
属性值为button，按钮里面没有任何东西，可以使用value添加名称
3.4.3.9 文件选择框
属性为file，可以实现向表单里面插入一个文件选择框。
3.4.3.10 隐藏框
属性为：hidden，不需要用户输入，但是可以使用vlaue把信息传给后端
3.4.4 多行文本输入框
textarea标记可以向表单中插入多行文本输入框，可以换行。
name：定义textarea标记名称
rows：规定文本区内的可见行数
clos：规定文本区内的可见宽数
3.4.5 下拉列表框
属性为：select
按住ctrl健可以多选
标签：表格,单元格,边框,设置,表单,交互,属性 From： https://blog.csdn.net/2301_80756005/article/details/142377643