第10章 在网页中使用表格

10.1 表格概述

表格 =》 用于排版页面内容

表格通过行列的形式直观形象将内容表达出来

通过HTML表格中的单元格可以放进任何的网页元素，比如：导航条、文字、图像、动画等

=》用于声明一个表格对象
=> 用于声明一行
标记对都必须放到

=> 用于声明一个单元格 基本语法： ... ... 单元格内容 单元格内容 语法说明：表格中所有

标记对之间，一个标记对可以包含一个或多个,而标记对之间，一个标记对可以包含一个或多个标记

使用

标记对需要放到
标记对，需要注意的是，所有需在表格中显示的内容包括嵌套表格都是放到单元格	标记队之间 10.2 表格标记 使用 可以设置表格宽度、高度、边框线、对齐方式、背景颜色、背景图片、单元格间距、边距等表格属性 10.2.1 设置表格的边框 默认情况下创建的表格是没有边框的， border属性 =》设置边框的粗细， 显示边框时，bordercolor属性 =》 设置边框颜色， 默认的边框颜色是黑色。 基本语法： 语法说明： 表格边框宽度值是一个数值，单位是像素，数值越大，边框越粗，当值为0时不显示边框。边框颜色可以使用英文颜色单词表示，也可以使用十六进制的颜色值。 10.2.2 设置表格的宽度和高度 默认情况下，创建的表格的宽度和高度将根据单元格中的内容自动调整。 基本语法： 语法说明： 表格的宽度和高度既可以是像素值，也可以是百分数。需要注意的是，这个百分数是相对于表格的上一级对象的一个值。 10.2.3 设置表格的对齐方式 默认情况下，创建的表格在窗口中居左对齐，使用align属性可以修改表格的对齐方式。 基本语法： 语法说明： 对齐方式有3种取值：left(居左对齐)，center(居中对齐)，right(居右对齐) 10.2.4 设置表格的背景颜色 默认情况下，创建的表格的背景颜色是白色，可以通过bgcolor属性修改背景颜色为其他颜色 基本语法： 10.2.5 设置表格的背景图片 基本语法： 语法说明： 背景图片路径可以使用相对路径和绝对路径 10.2.6 设置表格的边距 表格的边距指单元格内容与单元格边框之间的间距 当没有设置指定表格的高度时，表格单元格中的内容与单元格的边框靠得比较近 改变单元格内容和边框的间距 =》 设置cellpadding属性 基本语法： 语法说明： 边距值的单位是像素，值越大，单元格内容和边框的间距越大 10.2.7 设置表格的间距 表格的间距指的是单元格与单元格之间的间距。 当我们设置表格显示边框时，单元格与单元格之间默认情况下存在2个像素大小的间距 单元格之间间距 =》 使用cellspacing属性 基本语法： 10.2.8 设置表格的标题 创建表格时，为了概括表格内容或提供有关表格内容的一些有关信息，常常会设置表格的标题。 表格的标题使用表格的子标记 语法说明： 之间的内容就是表格的标题，表格标题默认情况下在表格上居中显示，align和valign属性的取值情况如下表： 来设置 基本语法： 表格标题 和 属性 描述 align 设置水平对齐方式，取值：left/center/right,默认取center | valign | 设置垂直对齐方式，取值：top/bottom.默认取top| 10.3

可以从总体上设置表格属性，根据网页布局的需要，还可以单独对表格中的某一行和某一单元格进行属性设置。
在HTML文档中，标记就是用来产生和设置表格中的行的标记，一个标记对表示表格的一行

基本语法：

语法说明：行的属性说明如下表：

属性	描述
height	设置行高度
align	设置行中各单元内容相对于单元格水平对齐方式，可取left、center和right 3个值，默认取值是left,即左对齐
valign	行中各单元格内容相对于单元格的垂直对齐方式，可取top、middle和bottom 3 个值，默认是middle，即居中垂直对齐
bgcolor	设置行中单元格的背景颜色
bordercolor	设置行中各个单元格的边框颜色

10.4 和标记

一般单元格 =》 =》默认居左并以普通格式显示
特殊(标题)单元格 =》 =》 默认居中并且加粗显示

和标记常用属性：

属性	描述
align	设置单元格内容相对于单元格水平对齐方式，可取left、center和right 3 个值，	标记的默认值是left,	标记的默认值是center
valign	设置单元格内容相对于单元格的垂直对齐方式，可取top、middle、bottom 3 个值，默认是middle,即垂直居中对齐
bgcolor	设置单元格的背景颜色
background	设置单元格的背景图片
bordercolor	设置单元格的边框颜色
width	设置单元格的宽度，单位为像素或表格宽度的百分比
height	设置单元格的高度,单位是像素
rowspan	设置单元格的跨行操作
colspan	设置单元格的跨列操作

10.4.1 使用创建表头

在表格的第一行或第一列中使用标记可以创建标题单元格，即表头
基本语法：

表头内容

语法说明：设置的表头内容将加粗并居中显示在单元格中。

10.4.2 设置单元格对齐方式

一般单元格的内容在水平方向居左对齐，在垂直方向居中对齐，可分别通过td标记的align和valign属性修改单元格内容的水平和垂直方向的对齐方式。
基本语法：

语法说明：
“水平对齐方式”可取left、center和right 3 个值，默认值是left.
"垂直对齐方式"可取top、middle和bottom 3 个值，默认值是middle

10.4.3 设置单元格的背景颜色和边框颜色

默认情况下，单元格的背景颜色为白色，边框颜色为黑色。

bgcolor => 单元格背景颜色
bordercolor => 边框颜色

基本语法：

10.4.4 设置单元格的背景图片

background属性对单元格设置背景图片
基本语法：

语法说明：背景图片既可以是相对路径，也可以是绝对路径

10.4.5 设置单元格的宽度和高度

基本语法：

语法说明：
“宽度”既可以是一个像素值，也可以是一个百分数，百分数表示该单元格占所属行宽度的百分比。“高度”只能是像素

10.4.6 单元格的跨行和跨列设置

跨行 =》 rowspan
跨列 =》 colspan

基本语法：

语法说明：rowspan和colspan的属性值是一个具体的数值

10.5 使用表格布局网页

此处略