使用＜table＞标记控制Web页面布局

2023-11-19 理论教育版权反馈

【摘要】：＜table＞表格标记是最常用的页面元素。使用“记事本”输入如下“E_table_1.htm”程序并存放在应用目录“webapps/ROOT”下的“E13”目录中。图3-4 E_table_1.htm表格＜table＞标记定义表格，＜tr＞标记定义表格中的行，＜td＞标记定义行中的列。下面以“E_table_1.htm”为例说明各标记的属性。

＜table＞表格标记是最常用的页面元素。用户经常用表格来完成许多较复杂的页面布局，在页面中用表格来布局数据，直观且清晰。HTML中的表格使用非常灵活，表格中的单元格还可以嵌套表格。在HTML中，表格是由一个表格名称（标题）再加上一行或多行表格内容所构成的块状结构。

使用“记事本”输入如下“E_table_1.htm”程序并存放在应用目录“webapps/ROOT”下的“E13”目录中。在浏览器地址栏中输入：http：//192.168.2.1：8080/E13/E_table_1.htm，则浏览器窗口显示如图3-4所示。

图3-4 E_table_1.htm表格

＜table＞标记定义表格，＜tr＞标记定义表格中的行，＜td＞标记定义行中的列。下面以“E_table_1.htm”为例说明各标记的属性。＜table＞标记中，border属性定义表格及表格内单元格的边框，其值用整数表示边框的像素点宽度，border=“1”表示一个像素点宽，border=“0”表示无边框；bordercolor=“red”定义边框的颜色为red；width=“100%”表示表格的宽占满浏览器窗口，其值可用其他长度单位表示；cellspacing=“4”表示表格中各单元格之间相隔4个像素点；cellpadding=“4”表示各单元格内文字与边框相距4个像素点；经常用cellspacing属性控制表格中各单元格之间的间隔，例如，在E_table_1.htm程序的第二个＜table＞标记中，用cellspacing=“1”定义各单元格之间的间隔为1个像素点，再用2种不同的颜色间隔表示各行，因各单元格之间的间隔有1个像素点，屏幕上会看到单元格之间有一条白线，达到整齐区分行列的目的；align=＂center＂定义表格在浏览器窗口中的显示位置，Center表示居中，还可是Left靠左，Right靠右；style=＂font-size：12px；＂是CSS定义，此处表示表格内的文字大小为12个像素（见“实训20——用CSS设置字体、颜色及背景、文本、边框”）。＜tr＞标记中，align=＂center＂表示该行每个单元格中文字居中显示，还可是Left靠左，Right靠右；bgcolor=＂rgb（145，174，224）＂表示该行的背景色为rgb（145，174，224），也可用其他表示颜色的单位，如#112233，height=＂30px＂表示该行的高度为30个像素点。＜td＞标记中，width=＂30%＂表示该单元格的宽度占该行宽度的30%，width=＂*＂表示该行余下宽度全部给该单元格；valign=＂top＂表示该单元格中的文字贴上部，还可为middle表示上下居中、bottom表示贴下部；style=＂border：0；＂是CSS定义，表示该单元格无边框，style=＂border-left：none＂表示该单元格无左边框。(www.chuimin.cn)

E_table_1.htm：

使用＜table＞标记控制Web页面布局

相关推荐