文档介绍：第4章用HTML布局网页
创建表格
表格属性设置
使用表格布局网页
创建框架
框架控制
使用框架布局网页
本章主要内容:
《网页设计制作基础与上机指导——HTML+CSS+JavaScript》清华大学出版社
创建表格
表格在网站应用中非常广泛,几乎所有的HTML页面中都或多或少地采用表格,表格可以方便灵活地实现对网页的排版,可以把相互关联的信息元素集中定位,使浏览页面的人一目了然,赏心悦目。所以说要制作好网页,就要学好表格,熟练掌握和运用表格的各种属性。
表格标记
表格由<table>标记来定义。每个表格均有若干行(由<tr> 标记定义),每个表格可以定义第一行的单元格为表头(由<th>标记定义),其余每行被分割为若干单元格(由<td> 标记定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
表格标记
基本语法:
<table>
<tr>
<th> head1</th>
<th> head2</th>
……
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
……
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
……
</tr>
……
</table>
表格标题
表格标题,就是对表格内容的简单说明,用<caption>标记来定义。
基本语法:
<caption>表格标题</caption>
语法解释:
<caption>标记在表格标记范围内,表格标题一般显示在表格上方,是对表格内容的简略说明。
划分表格结构
创建表格时,如果希望拥有一个表头行,一些带有数据的行,以及位于底部的一个总计行。thead 元素用于对 HTML 表格中的表头内容进行分组,tfoot 元素用于对 HTML 表格中的总计行(页脚)内容进行分组,tbody 元素用于对 HTML 表格中的数据主体内容进行分组。
基本语法:
<table>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
划分表格结构
语法解释:
(1)<thead>标记定义表格的表头,用于组合 HTML 表格的表头内容。
(2)<tfoot>标记定义表格的页脚(脚注或表注),用于组合 HTML 表格中的表注内容。
(3)<tbody>标记表格主体(正文),用于组合 HTML 表格的主体内容。
(4)如果使用<thead>、<tfoot> 以及<tbody> 标记划分表格,就必须使用全部的元素。它们的出现次序是:<thead>、<tfoot>、<tbody>,这样浏览器就可以在收到所有数据前呈现页脚了,必须在<table> 标记范围内部使用这些标签。
表格属性设置
本节介绍表格、行和单元格标记中常用属性的设置,控制表格的显示效果。
<table>标记属性
通过<table>标记属性值可以控制表格的显示效果,表格标记常用的属性及其含义如表4-1所示。
属性
描述
align
规定表格相对周围元素的水平对齐方式。
bgcolor
规定表格的背景颜色。
border
规定表格边框的宽度。
cellpadding
规定单元边沿与其内容之间的空白。
cellspacing
规定单元格之间的空白。
frame
规定外侧边框的哪个部分是可见的。
rules
规定内侧边框的哪个部分是可见的。
summary
规定表格的摘要。
width
规定表格的宽度。
<table>标记属性
1. 设置表格水平对齐属性
在水平方向上,可以设置表格的对齐方式为:居左、居中、居右。如果没特别进行设置,则默认为居左排列。
基本语法:
<table align=””>
语法解释:
属性可选的值有left 、center 和right ,代表表格出现在窗口的左侧、中间和右侧位置。