1.创建表格
在HTML网页中,所有的元素都是通过标签定义的,要想创建表格,就需要使用表格相关的标签。
1.1基本语法格式:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1.2表格的各项属性
<table></table>:定义一个表格
<tr></tr>:定义表格中的一行,嵌套在<table></table>中
学习<tr>的属性时需要注意以下几点:
1.<tr>标签无宽度属性width,其宽度取决于表格标签<table>。
2.对<tr>标签应用valign属性,用于设置一行内容的垂直对齐方式。
<td></td>:定义表格中的单元格,嵌套在<tr></tr>中
学习<td>的属性时需要注意以下几点:
1.在<td>标签的属性中,重点掌握colspan和rolspan,其他的属性了解即可,不建议使用,均可用CSS样式属性替代。
2.当对某一个<td>标签应用width属性设置宽度时,该列中的所有单元格均会以设置的宽度显示。
3.当对某一个<td>标签应用height属性设置高度时,该行中的所有单元格均会以设置的高度显示。
1.3<th>标签及其属性
<th></th>标签用来设置表头,其文本默认加粗居中显示。
1.4表格的结构
为了使搜索引擎更好地理解网页,可以将表格划分为头部、主体和页脚。
1.头部
定义表格的头部,包含网页的logo和导航等头部信息。
基本语法格式:
<thead></thead>
2.主体
定义表格的页脚,包含网页底部的企业信息等。
基本语法格式:
<tfoot></ tfoot >
3.页脚
定义表格的主体,包含网页中除头部和底部之外的内容。
基本语法格式:
<tbody></tbody>
学习表格的结构时需要注意:
一个表格只能定义一对<thead></thead>、一对<tfoot></ tfoot >和多对<tbody></ tbody >,它们必须按<thead></thead>、<tfoot></tfoot >和<tbody></tbody >的顺序使用。之所以将 <tfoot></ tfoot >置于<tbody></ tbody >之前,是为了使浏览器在收到全部数据之前即可显示页脚。
2.CSS控制表格样式
学习CSS控制表格边框时需要注意以下几点:
border-collapse属性的属性值除了collapse(合并)之外,还可以为separate(分离),默认为separate。
当表格的border-collapse属性设置为collapse时, HTML中设置的cellspacing属性值无效。
行标签<tr>无border样式属性,本书不再做具体的演示,初学者可以自己测试加深理解。
学习CSS控制单元格边距时需要注意:
行标签<tr>无内边距属性padding和外边距属性margin。
学习CSS控制单元格边距时需要注意:
对同一行中的单元格定义不同的高度,或对同一列中的单元格定义不同的宽度时,最终的宽度或高度将取其中的较大者。
3.表单
<form></form>标签用来创建表单。
<form>与</form>之间的表单控件是由用户自定义的,action、method和name为表单标签<form>的常用属性。
基本语法格式:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
3.1表单控件
表单控件是表单的核心部分,常见的表单控件有<input />、<textarea>、<select>。
3.2action属性
action属性用于指定接收并处理表单数据的服务器程序的url地址。
3.3method属性
method属性用于设置表单数据的提交方式,其取值为get或post。
3.4name属性
name属性用于指定表单的名称,以区分同一个页面中的多个表单。
4.input控件
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等,要想定义这些元素就需要使用input控件。
基本语法格式:
<input type="控件类型"/>
在HTML中,<input>标签拥有多个type属性值,用于定义不同的控件类型。
4.1单行文本输入框
4.2密码输入框
4.3单选框
4.4复选框
4.5普通按钮
4.6提交按钮
4.7重置按钮
4.8图像按钮
4.9隐藏域
4.10文本域
5.textarea控件
基本语法格式:
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
cols和rows为<textarea>标记的必须属性,其中cols用来定义多行文本输入框每行中的字符数,rows用来定义多行文本输入框显示的行数,取值均为正整数。
6.select控件
基本语法格式:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
7.CSS控制表单样式
使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。