第5章在Web中加入表格.ppt

加入表格 一、表格将文本和图像按行、列排列、它和列表一样，有得于表达信息。同时，表格往往在主页中用来建立主页的框架，使整个页面更规则地放置图片和空白，并使条目清晰。 1、建立简单表格 最简单的表格公包括行和列。 格式：table border=n width=x或x% height=y 或 y% cellspacing=I cellpadding=j trth表头l/thth表头2/th…th表头n/th trtd表项l/tdtd表项2/td…td表项n/td …… trtd表项l/tdtd表项2/td…td表项n/td /table 说明：在浏览器中，th标记的文字按粗体显示，td标记的文字按正常字体显示。 表格的整体外观由table标记的属性决定： Border 定义表格边框的粗细，n取整数，单位是像素（如果省略， 则不带边框。 Width 定义表格的宽度，x 为像素或占窗口的百分比； Height 定义表格的高度，y为像素或占窗口的百分比； Cellspacing 定义表项间隙，单位是像素； Cellpadding 定义表项内部空白，单位是像素。 也可在第一列加表头，其格式为： table border=n width=x 或x% height=y 或y% cellspacing=I cellpadding=j trth表头１/thtd表项１/tdtd…/tdtd表项n/td trth表头2/thtd表项1/tdtd…/tdtd表项n/td …… trth表头n/thtd表项１/tdtd…/tdtd表项n/td /table 说明：数值太小不中以显示表格中的内容时，会自动以最小的宽度显示。 （建立有框线和无框线简单表格）举例(5-8)：预览： （设置表格的尺寸以及表项间隙、表项内部空白） 举例(5-9)：预览： ２、给表格加上标题 格式：table caption align=left/right/top/bottom valign=top /bottom标题 /caption /table 其中：valign 设置标题放在表的上部top(缺省),还是下部bottom; Align 设置标题放在表的上部或下部的中间center(缺省），左边left,还是右边right;也可设置标题放在表的上部(缺省),还是下部bottom。 举例（5-10）：预览： 三、跨多行、多列的表项 1、跨多列表项 格式：td colspan=x表项/td 或 tr colspan=x表项/tr 或 th colspan=x 表项/th 其中，x表示合并的列数。 2、跨多行表项 格式；td rowspan=y表项/td 或 tr rowspan=y表项/tr 或 th rowspan=y表项/th 3、同时跨多列多行表项 格式：th rowspan=x colspan=y 其中，rowspan设置表头跨过x列，colspan表头跨过y行。 举例（5-11）预览：举例（5-12）：预览： 四、表格在页面中的属性 现把表格作为一个整体，介绍表格在页面中的位置及背景的设置。 1、设定表格在页面中的位置 格式：table align=left 或center 或right 说明：当表格位于页面的左侧或右侧时，文本填充在另一侧，当表格居中时，表格两边没有文本。当align属性缺省时，文本在表格的下面。 举例（5-13）：预览： 2、表格的图像背景 由于表格能够更方便地安排文字、图片的位置，所以很多网面常用表格来制作。下面介绍用表格作为整个页面。在table、th、tr、td标记中，使用下面属性： background=“图像文件名” 设置背景图像： bordercolor=“颜色” 设定表格边框的颜色； Bordercolorlight=“颜色” 设定表格边框亮部的颜色； Rules=“row.cols或none” 设定表内线的显示方法 另外，还可以用td标记中的bgcolor属性给表格的每个单元设置背景色； td bgcolor=“颜色或颜色值” 表格的图像背景：举例（5-14）：预览： 用无线表格布置页面：举例（5-15）：预览： 五、表格的分组显示 1、按行分组 格式：table thead题头/thead