HTML&CSS精选笔记_表格与表单

表格与表单

表格标记

创建表格

要想创建表格，就需要使用表格相关的标记

<table>

    <tr>

   
<td>单元格内的文字</td>

      ...

    </tr>

    ...

</table>

 包含三对HTML标记，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标记，缺一不可

<table></table>：用于定义一个表格。

<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，在<table></table>中包含几对<tr></tr>，就有几行表格。

<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。





注意:

学习表格的核心是学习<td></td>标记，他就像一个容器，可以容纳所有的元素，<td></td>中甚至可以嵌套表格<table></table>。但是<tr></tr>中只能嵌套<td></td>，直接在<tr></tr>标记中输入文字的做法是不被允许的。

<table>标记的属性

属性名
含义
常用属性值

border
设置表格的边框（默认border="0"无边框） 像素值 

cellspacing
设置单元格与单元格边框之间的空白间距
像素值（默认为2像素）

cellpadding
设置单元格内容与单元格边框之间的空白间距
像素值（默认为1像素）

width
设置表格的宽度
像素值

height
设置表格的高度
像素值

align
设置表格在网页中的水平对齐方式
left、center、right

bgcolor
设置表格的背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)

background
设置表格的背景图像
url地址

1、border属性

用于设置表格的边框，默认为0

<table border=“20”>

2、cellspacing属性

用于设置单元格与单元格边框之间的空白间距，默认为2px

<table border=“20” cellspacing=“20”>

3、cellpadding属性

用于设置单元格内容与单元格边框之间的空白间距，默认为1px

<table border=“20” cellspacing=“20” cellpadding=“20”>





注意:

cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子模型的内外边距理解cellpadding与cellspacing的不同。

4、width与height属性

默认情况下，表格的宽度和高度靠其自身的内容来支撑。要想更改表格的尺寸，就需对其应用宽度属性width或高度属性height

当为表格标记<table>同时设置width、height和cellpadding属性时，cellpadding的显示效果将不太容易观察，所以一般在未给表格设置宽高的情况下测试cellpadding属性。

5、align属性

align属性用于定义元素的水平对齐方式，其可选属性值为left、center、right。值得一提的是，当对<table>标记应用align属性时，控制的为表格的水平对齐方式，单元格中的内容不受影响。

6、bgcolor属性

在<table>标记中，bgcolor属性用于设置表格的背景颜色。

7、background属性

在<table>标记中，background属性用于设置表格的背景图像。

<tr>标记的属性

制作网页时，有时需要表格中的某一行特殊显示，这时就可以为行标记<tr>定义属性

属性名
含义
常用属性值

height
设置行高度 像素值 

align
设置一行内容的水平对齐方式
left、center、right

valign
设置一行内容的垂直对齐方式
top、middle、bottom

bgcolor
设置行背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)

background
设置行背景图像
url地址





注意

<tr>标记无宽度属性width，其宽度取决于表格标记<table>。

可以对<tr>标记应用valign属性，用于设置一行内容的垂直对齐方式。

虽然可以对<tr>标记应用background属性，但是在<tr>标记中此属性兼容问题严重。

<td>标记的属性

在网页制作过程中，有时仅仅需要对某一个单元格进行控制，这时就可以为单元格标记<td>定义属性

属性名
含义
常用属性值

width
设置单元格的宽度
像素值 

height
设置单元格的高度
像素值

align
设置单元格内容的水平对齐方式
left、center、right

valign
设置单元格内容的垂直对齐方式
top、middle、bottom

bgcolor
设置单元格的背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)

background
设置单元格的背景图像
url地址

colspan
设置单元格横跨的列数（用于合并水平方向的单元格）
正整数

rowspan
设置单元格竖跨的行数（用于合并竖直方向的单元格）
正整数





注意:

1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。

2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。

3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

<th>标记及其属性

表头一般位于表格的第一行或第一列，其文本加粗居中

设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚

<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。

<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。

<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。

CSS控制表格样式

CSS控制表格边框

使用CSS边框样式属性border可以轻松地控制表格的边框





注意:

1、 border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。

2、当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。

3、行标记<tr>无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

CSS控制单元格边距

使用<table>标记的属性美化表格时，可以通过cellpadding和cellspacing分别控制单元格内容与边框之间的距离以及相邻单元格边框之间的距离。





注意:

行标记<tr>无内边距属性padding和外边距属性margin

CSS控制单元格的宽高

单元格的宽度和高度，有着和其他元素不同的特性，主要表现在单元格之间的互相影响上。

对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者

认识表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。





表单控件是表单的核心，常用的表单控件

<input />
表单输入控件（可定义多种表单项）

<textarea></textarea>
定义多行文本框

<select></select>  
定义一个下拉列表（必须包含列表项）

创建表单

在HTML中，<form></form>标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form> </form>中的所有内容都会被提交给服务器

<form action="url地址" method="提交方式" name="表单名称">

各种表单控件

</form>

<form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单标记<form>的常用属性

Action：请求路径，确定表单提交到服务器的地址（路径）

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址

method：请求方式

method属性用于设置表单数据的提交方式，其取值为get或post。





get：默认值

     提交时数据追加在请求路径上

     数据格式k/v，追加使用？连接，之后每一对数据使用&连接

     请求长度有限所以get请求提交的数据有限

如:/1.html?username=jack&password=1234





post:

提交数据不再请求路径上追加（即不显示在地址栏上）

提交是的数据大小不显示

name

name属性用于指定表单的名称，以区分同一个页面中的多个表单。

注意：要想让一个表单有意义，就必须在<form>与</form>之间添加相应的表单控件

表单控件

input控件(输入域标签)

<input  type=“控件类型”>

<input />标记为单标记，type属性为其最基本的属性，用于获取用户输入信息，type属性值不同，搜集方式不同。其取值有多种，用于指定不同的控件类型。





属性
属性值
描述

type


text
单行文本输入框（默认宽度为20）

password
密码输入框

radio
单选按钮

checkbox
复选框

button
普通按钮

submit
提交按钮

reset
重置按钮

image
图像形式的提交按钮

hidden
隐藏域

file
文件域

image:图形提交按钮

name
由用户自定义
控件的名称。元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获取提交的数据

value
由用户自定义
input控件中的默认文本值

size
正整数
input控件在页面中的显示宽度

readonly
该控件内容为只读（不能编辑修改）

disabled
第一次加载页面时禁用该控件（显示为灰色）

checked
定义选择控件默认被选中的项

maxlength
正整数
控件允许输入的最多字符数

textarea控件(文本域)

通过textarea控件可以轻松地创建多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数">

       文本内容

</textarea>



其中cols用来定义多行文本输入框每行中的列数，rows用来定义多行文本输入框显示的行数，他们的取值均为正整数

注意:

各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽高。

select控件(下拉列表标签)

定义下拉菜单

<select>

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

       ...

</select>

每对<select></select>中至少应包含一对<option></option>

在HTML中，可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果

标记名
常用属性
描述

<select>


name:发给服务器的名称

size
指定下拉菜单的可见选项数（取值为正整数）。

multiple
定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。

<option>
selected
 定义selected =" selected "时，当前项即为默认选中项。

按钮标签:<button>

<button type="button|reset|submit">提供"普通|重置|提交"功能

CSS控制表单样式

使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。

注意

由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。

input控件默认有边框效果，当使用<input />标记定义各种按钮时，通常需要清除其边框。

通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框。