HTML基础教程:TABLE表格


 表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格。

  7-1 定义表格的基本语法

  在html文档中,表格是通过<table>,<th>,<tr>,<td>标签来完成的,如下表所示:

  表格标记

  标 签

  描 述

<table>...</table> 用于定义一个表格开始和结束
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示,在表格中也可以不用此标签,<th>标签必须放在<tr>标签内
<tr>...</tr>

  定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td> 定义单元格标签,一组<td>标签将将建立一个单元格,<td>标签必须放在<tr>标签内

  在一个最基本的表格中,必须包含一组<table>标签,一组标签<tr>和一组<td>标签或<th>。

  实例:7-1.html

<HTML>
<HEAD>
<TITLE>一个简单的表格</TITLE>
</HEAD>
<BODY>
<center>
<table>
<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>
<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
</center>
</BODY>
</HTML>

  7-2(1)表格<table>标签的属性

  表格标签<table>有很多属性,最常用的属性有:

  <table>标签的属性

属 性 描 述
width 表格的宽度
height 表格的高度
align 表格在页面的水平摆放位置
background 表格的背景图片
bgcolor 表格的背景颜色
border 表格边框的宽度(以像素为单位)
bordercolor 表格边框颜色
bordercolorlight 表格边框明亮部分的颜色
bordercolordark 表格边框昏暗部分的颜色
cellspacing 单元格之间的间距
cellpadding 单元格内容与单元格边界之间的空白距离的大小

  实例:7-2-1.html

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table border=10 bordercolor="#006803" align="center" bgcolor="#DDFFDD" width=500 height="200"bordercolorlight="#FFFFCC" bordercolordark="#660000" background="../../imge/b0024.gif" cellspacing="2" cellpadding="8">
<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>
<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
</body>
</html>

  7-2(2) 表格的边框显示状态 frame

  表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态

  语法格式:<table frame="边框显示值">

  表格边框显示状态frame的值的设定

frame的值 描 述
box 显示整个表格边框
void 不显示表格边框
hsides 只显示表格的上下边框
vsides 只显示表格的左右边框
alove 只显示表格的上边框
below 只显示表格的下边框
lhs 只显示表格的左边框
rhs 只显示表格的右边框

  实例:7-2-2.html

<HTML>
<HEAD>
<TITLE>表格边框的显示状态</TITLE>
</HEAD>
<BODY >
<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="160">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>卡卡</TD>
<TD>男</TD>
<TD>50</TD>
<TD>计算机</TD>
</TR>
</TABLE>
</BODY>
</HTML>

  7-4(3) 设置分隔线的显示状态 rules

  语法格式:<table rules="值">

  分隔线的显示状态rules的值的设定

rules的值 描 述
all 显示所有分隔线
groups 只显示组与组的分隔线
rows 只显示行与行的分隔线
cols

  只显示列与列的分隔线

none 所有分隔线都不显示

  实例:7-2-3.html

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>笨笨猫</TD>
<TD>女</TD>
<TD>99</TD>
<TD>计算机</TD>
</TR>
</TABLE><p>
<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>笨笨猫</TD>
<TD>女</TD>
<TD>99</TD>
<TD>计算机</TD>
</TR>
</TABLE>
</body>
</html>

  7-3 表格行的设定

  表格是按行和列(单元格)组成的,一个表格有几行组成就要有几个行标签<tr>,行标签用它的属性值来修饰,属性都是可选的。

  <tr>标签的属性

属 性 描 述
align 行内容的水平对齐
valign 行内容的垂直对齐
bgcolor 行的背景颜色
bordercolo 行的边框颜色
bordercolorlight 行的亮边框颜色
bordercolordark 行的暗边框颜色

  <TR> 的参数设定(常用):

   <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

  实例:7-3.html

<HTML>
<HEAD>
<TITLE>表格行的控制</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="80%" height="150">
<TR ALIGN="CENTER">
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>年 龄</TH>
<TH>专 业</TH>
</TR>
<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">
<TD>咚 咚</TD>
<TD>男</TD>
<TD>18</TD>
<TD>学 生</TD>
</tr>
<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom bordercolorlight="#E1F0FD" bordercolordark="#002346">
<TD>楠 楠</TD>
<TD>女</TD>
<TD>17</TD>
<TD>学 生</TD>
</TR>
</TABLE>
</BODY>
</HTML>

  7-4 单元格的设定

  <th>和<td>都是插入单元格的标签,这两个标签必须嵌套在<tr>标签内。是成对出现的。<th>用于表头标签,表头标签一般位于首行或首列,标签之间的内容就是位于该单元格内的标题内容,其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<td>标签的属性都是一样的,属性设定如下:

  <th>和<td>的属性

属 性 描 述
width/height 单元格的宽和高,接受绝对值(如 80)及相对值(如 80%)。
colspan 单元格向右打通的栏数
rowspan 单元格向下打通的列数
align 单元格内字画等的摆放贴,位置(水平),可选值为: left, center, right。
valign 单元格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。
bgcolor 单元格的底色
bordercolor 单元格边框颜色
bordercolorlight 单元格边框向光部分的颜色
bordercolordark 单元格边框背光部分的颜色
background 单元格 背景图片

  <TD> 的参数设定格式:

  例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> 

  实例:7-4.html

<HTML>
<HEAD>
<TITLE>单元格的设定</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" height="150" width="80%">
<TR>
<TH width=70 bgcolor="#FFCC00">姓 名</TH>
<TH bgcolor="#FFCCFF">性 别</TH>
<TH background="../../imge/b0024.gif">年 龄</TH>
<TH background="../../imge/aki-5.gif">专 业</TH>
</TR>
<TR>
<TD bordercolor=red align="left">笨笨猫</TD>
<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>
<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>
<TD bgcolor="#CCFFFF" align="right">学生</TD>
</TR>
</TABLE>
</BODY>
</HTML>

  7-5 设定跨多行多列单元格

  要创建跨多行、多列的单元格,只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性的属性值,默认值为1。表明了表格中要跨越的行或列的个数。

  跨多列的语法: <th colspan=#> <td colspan=#>

  colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。

  跨多行的语法: <th rowspan=#> <td rowspan=#>

  

  rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。

  实例:7-5.html

<html>
<head>
<title>跨多行跨多列的单元格</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<TR ALIGN=center>
<TH colspan=3> 学生基本信息</TH>
<TH colspan=2>成 绩</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
<TH>课 程</TH>
<TH>分 数</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</table>
</body>
</html>

  7-6 表格的分组

  7-6-1 表格的行分组<thead>/<tbody>/<tfoot>

  html文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签,其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素。<thead>和<tbody>标签的属性和<th><td>标签是一样的。

  实例:7-6-1.html

<html>
<head>
<title>表格按行分组</title>
</head>
<body>
<center>
<table border=3 width=60% align="center" height="150">
<thead bgcolor="#CCFFCC">
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
</TR>
</thead>
<tbody bgcolor="#448FBD">
<TR ALIGN=center>
<TD>咚 咚</TD><TD>男</TD><TD>计算机</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD><TD>女</TD><TD>园 林</TD>
</TR>
</tbody>
</table>
</body>
</html>

  7-6-2 表格按列分组<colgroup>

  html使用<colgroup>标签来将表格分组。

  语法格式:<colgroup span="数值" align="参数">

  说明:<colgroup>标签有两个属性,span和align, 他们都是可选的。span属性的值是数字,表示该组包含的列数,默认值为1。align属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right之一。它们表示单元格的内容是左对齐,水平居中还是右对齐。

  实例:7-6-2.html

<html>
<head>
<title>表格按列分组</title>
</head>
<body>
<center>
<table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF" bordercolordark="#9900FF">
<tr>
<th>姓名</th><th>性别</th><th>专业</th><th>分数</th>
</tr>
<colgroup span=2 align=center>
<colgroup align =left>
<colgroup align=right>
<tr>
<td>咚 咚</td><td>男</td><td>计算机</td><td>79</td>
</tr>
<tr>
<td>喃 喃</td><td>女</td><td>园 林</td><td>90</td>
</tr>
<tr>
<td>依 依</td><td>女</td><td>微波通信</td><td>76<td>
</tr>
</table>
</body>
</html>

  7-6-3 表格的行列分组

  实例:7-6-3.html 

<HTML>
<HEAD>
<TITLE>同时进行行列分组</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<TBODY bgcolor="#FFCCFF">
<TR>
<TD>咚 咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>
</TR>
<TR>
<TD>喃 喃</TD><TD>女</TD><TD>园 林</TD><TD>94</TD>
</TR>
<TR>
<TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

  7-7 表格的标题标签<caption>

  表格标题的位置,可由ALIGN属性和VALIGN属性来设置,ALIGN属性设置标题位于文档的左,中,右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。

  语法格式:

<caption align="值" valign="值" >表哥标题</caption>
<caption>应放在<table>标签内,在表格行标签<tr>标签之前。
<caption>标签的默认属性是标题位于表格的上方中间位置。

  实例:7-7.html

<html>
<head>
<title>表格的标题标签</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<caption>学生信息表</caption>
<TR ALIGN=center>
<TH colspan=3> 学生基本信息</TH>
<TH colspan=2>成 绩</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
<TH>课 程</TH>
<TH>分 数</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</body>
</html>

  7-8 表格的嵌套

  在html页面中,使用表格排版是通过嵌套来完成的,即一个表格内部可以嵌套另一个表格,用表格来排版页面的思路是:由总表格规划整体的结构,由嵌套的表格负责各个子栏目的排版,并插入到表格的相应位置,这样就可以使页面的各个部分有条不紊,互不冲突,看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚,都设置了有边框。

  实例7-8.html

<html>
<head>
<title>表格嵌套</title>
</head>
<body bgcolor="#555555" text="#FFFFFF">
<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="100" height="69">网页标志</td>
<td colspan="2"><div align="center">广告条</div></td>
</tr>
<tr>
<td height="330"><table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td height="90">内容六</td>
</tr>
</table></td>
<td width="275"><table width="275" height="325" border="3" cellpadding="1" cellspacing="1">
<tr>
<td width="263">内容一</td>
</tr>
<tr>
<td>内容二</td>
</tr>
</table></td>
<td width="163"><table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">
<tr>
<td width="136" height="94">内容三</td>
</tr>
<tr>
<td height="62">内容四</td>
</tr>
<tr>
<td height="160">内容五</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3