建立表格

建立表格

在网页中熟练使用表格,可以将网页内容更加有序排列,增加网页的可读性和美观性。本节将介绍表格的使用方法。

8.1.1 表格、行、单元格标签代码<table>、<tr>、<td>

表格常用来对页面进行排版,表格标签是<table>和</table>,表格的其他各种属性都要在表格的开始标签<table>和表格的结束标签</table>之间才有效;创建表格还必须有行标签<tr>和单元格标签<td>才可以实现。

【标签说明】

<table> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> … </tr> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> … </tr> … </table>

说明:<table>和</table>标签分别表示一个表格的开始和结束;而<tr>和</tr>则分别表示表格中一行的开始和结束,在表格中包含几组<tr>…</tr>,就表示该表格为几行;<td>和</td>表示一个单元格的起始和结束,也可以说表示一行中包含了几列。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="314" border="1"align="center"> <tr> <td width="75">姓名</td> <td width="86">班级</td> <td width="131">住址</td> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到在网页中添加了一个3行3列的表格,设置表格边框宽度为1像素,如

创建表格

8.1.2 表格的标题标签代码<caption>

表格的标题一般位于整个表格的第一行,为表格添加一个标题行,如同在表格上方加一个没有边框的行。使用<caption>标签来设置表格的标题。

【标签说明】

<caption>表格的标题</caption>

说明:在<caption>标签中添加标题内容。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="314" border="1"align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <td width="75">姓名</td> <td width="86">班级</td> <td width="131">住址</td> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码,看到在表格内容的上方一行添加了一个标题“学生信息表”,这一行标题居中显示,如

添加表格标题

8.1.3 表格的表头标签代码<th>

在表格中还有一种特殊的单元格,称为表头。表格的表头一般位于第1行或第1列,用<th> </th>标签对来表示。

【标签说明】

<table> <tr> <th>表格的表头</th> <th>表格的表头</th> … </tr> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> … </tr> … </table>

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table border="1"align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行程序看到在表格中包含一行加粗字体,这就是表格的表头,如

表格表头

注意:表格的表头与<td>标签使用方法相同,但是表头的内容是加粗显示的。

8.1.4 表格宽度标签代码width

在默认情况下,表格的宽度是根据表格内的文字内容自动调整的。如果想要指定表格的宽度,可以为表格设置width参数。

【标签说明】

<table width=表格宽度>

说明:表格宽度的值可以设置为具体的像素数,也可以设置为浏览器的百分比数。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" border="1"align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到表格的效果如

设置表格宽度

表格宽度随浏览器变化

注意:如果将表格中的宽度值设置为固定的像素数,那么当浏览器大小变化时,表格不会再随之变化。

8.1.5 表格高度标签代码height

设置表格的高度与设置表格宽度的方法相同,可以将表格的高度设置为浏览器高度的百分比或者固定的像素值。

【标签说明】

<table height=表格高度>

说明:表格高度可以是具体的像素值,也可以是百分比。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="1"align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到,由于将表格高度设置了固定的像素值,所以无论浏览器如何变化,表格的高度都保持不变,如

表格的高度

8.1.6 表格的边框宽度标签代码border

使用 Dreamweaver 软件添加的表格,在默认情况下,表格边框宽度为1像素,可以使用border参数重新设置边框宽度。

【标签说明】

<table border=边框宽度>

说明:border 的单位为像素。只有设定了 border 参数,且其值不为0,在网页中才能显示出表格的边框。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行程序,设置表格的边框宽度为2像素,效果如

表格边框设置

8.1.7 表格边框颜色标签代码bordercolor

表格边框的颜色默认值是灰色的,可以使用bordercolor参数设置不同的表格边框颜色。如果边框宽度为0,表格边框颜色设置不起作用。

【标签说明】

<table border=边框宽度 bordercolor= "边框颜色" >

说明:在该语法中,边框宽度不能为0,边框颜色为十六进制颜色码。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" bordercolor= "#3300CC" align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到表格的边框颜色发生了变化,如

表格边框颜色设置

8.1.8 表格的单元格间距标签代码cellspacing

表格的单元格间距是指表格内部各单元格之间的距离,通过设置cellspacing参数的值改变单元格之间的间距。

【标签说明】

<table cellspacing=单元格间距值>

说明:单元格间距值的单位为像素。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" bordercolor= "#3300CC" cellspacing="5"align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到表格中单元格之间的距离拉大了,如

设置单元格间距效果

设置单元格间距为0时的页面效果

8.1.9 表格的单元格边距标签代码cellpadding

在默认情况下,表格内的内容会紧贴着表格的边框,可以使用cellpadding参数来调整这一距离。

【标签说明】

<table cellpadding=单元格边距值>

说明:单元格的内容与边框的距离以像素为单位,一般可以根据需要设置,但要注意不能过大。因为这个值不只对左右距离有效,同时也设置了上下边框与文字的间隔。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" bordercolor= "#3300CC" cellspacing="0" cellpadding="5" align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码效果如

设置单元格边距

8.1.10 表格背景色标签代码bgColor

设置表格背景,最简单的就是给表格设置背景颜色,通过设置bgColor参数的值来定义表格背景色。

【标签说明】

<table bgColor="颜色值">

说明:颜色值可以是英文的颜色名称,也可以用十六进制颜色值表示。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width=300 border="1" bordercolor="#3300CC" bgColor ="#CCFFCC"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到表格设置了浅绿色的背景,如

设置表格背景色

8.1.11 表格的背景

除了可以为表格设置背景色外,还可以设置一个背景

【标签说明】

<table background="背景

说明:背景

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" background= "007g.jpg"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码可以看到表格的背景

设置表格背景

8.1.12 表格的对齐方式标签代码align

表格的对齐方式是设置整个表格在网页或者区块中的位置,可以设置为左对齐、居中对齐和右对齐。

【标签说明】

<table align="表格对齐方式">

说明:align参数可以取值为left、center或者right。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" align="center"> <caption> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码看到表格在网页中居中对齐,如

设置表格对齐方式

8.1.13 表格标题的垂直对齐方式标签代码valign

前面介绍了使用<caption>标签来设置表格标题,表格标题是一种特殊的行,这种行没有边框,可以设置水平对齐方式和垂直对齐方式。其水平对齐方式的设置与其他行相同,通过align参数来设置;标题的垂直对齐方式,使用 valign 参数来设置,标题的垂直对齐是指标题位于表格的上方或下方。

【标签说明】

<caption valign="垂直对齐方式">表格的标题</caption>

说明:在该语法中,垂直对齐方式的值可以是top或者bottom。取值为top,是将标题文字设置在表格的上方;取值为bottom,是将标题文字设置为表格下方。默认情况为top。

【实例】

<html> <head> <title>使用表格</title> </head> <body> <table width="50%" height=150 border="2" align="center"> <caption valign="bottom"> <strong>学生信息表</strong> </caption> <tr> <th width="75">姓名</th> <th width="86">班级</th> <th width="131">住址</th> </tr> <tr> <td>王三</td> <td>计0911</td> <td>北京市海淀区</td> </tr> <tr> <td>李四</td> <td>计0912</td> <td>北京市丰台区</td> </tr> </table> </body> </html>

【运行结果】

运行代码的效果如

设置表格标题垂直对齐方式

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

建立表格