一、介绍
表格，又称为表，即是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。各种表格常常会出现在印刷介质、手写记录、计算机软件、建筑装饰、交通标志等许许多多地方。随着上下文的不同，用来确切描述表格的惯例和术语也会有所变化。此外，在种类、结构、灵活性、标注法、表达方法以及使用方面，不同的表格之间也炯然各异。在各种书籍和技术文章当中，表格通常放在带有编号和标题的浮动区域内，以此区别于文章的正文部分。
HTML中表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。
二、知识点介绍
1、表格
2、表格的基本语法
3、表格<table>标签的常用属性
4、设置分隔线的显示状态 rules
5、表格的边框显示状态 frame
6、表格行的设定
7、单元格的设定
8、设定跨多行多列单元格
9、表格的行分组
10、表格的列分组
11、表格行列分组
12、表格的标题标签
13、表格的嵌套
三、上课对应视频的说明文档
1、表格
表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格
2、表格的基本语法
html 文档中，表格是通过<table>,<th>,<tr>,<td>标签来完成的，如下表所示：
<HTML>
<HEAD>
<TITLE>一个简单的表格</TITLE>
</HEAD>
<BODY>
<center>
<table>
< caption >表格标题</caption >
<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>
3、表格<table>标签的常用属性
<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>
4、设置分隔线的显示状态 rules
语法格式：<table rules="值">
<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>
5、表格的边框显示状态 frame
表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态
语法格式：<table frame="边框显示值">
<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>
6、表格行的设定
表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>，行标签用它的属性值来修饰，属性都是可选的。
<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、单元格的设定
<th>和<td>都是插入单元格的标签，这两个标签必须嵌套在<tr>标签内。是成对出现的。<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<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">
<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>
<html>
<head>
<title>wrap 属性研究</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>测试字符串：</p>
<p>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</p>
<p>单元格未设置nowrap 属性的空表：</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<p>加入测试字符串：</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td>
</tr>
</table>
<p>单元格设置了nowrap 属性，未设置width 属性：</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……
</td>
</tr>
</table>
<p>单元格设置了nowrap 属性，也设置了width 属性：</p>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="120" nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得
多、耐磨的多……</td>
<td> </td>
</tr>
</table>
</body>
</html>
8、设定跨多行多列单元格
要创建跨多行、多列的单元格，只需在<TH>或<TD>中加入ROWSPAN 或COLSPAN 属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。
跨多列的语法： <th colspan=#> <td colspan=#>
colspan 表示跨越的列数，例如colspan=2 表示这一格的宽度为两个列的宽度。
跨多行的语法： <th rowspan=#> <td rowspan=#>
rowspan 所要表示的意义是指跨越的行数，例如rowspan=2 就表示这一格跨越表格两个行的高度。
<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>
9、表格的行分组
html 文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签，其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素，可出现多次。<thead>和<tbody>标签的属性和<th><td>标签是一样的。
<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>
10、表格列分组
html 使用<colgroup>标签来将表格分组。
语法格式：<colgroup span="数值" align="参数">
说明：<colgroup>标签有两个属性，span 和align, 他们都是可选的。span 属性的值是数字，表示该组包含的列数，默认值为1。align 属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right 之一。它们表示单元格的内容是左对齐，水平居中还是右对齐。
<html>
<head>
<title>表格按列分组</title>
</head>
<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>
11、表格行列分组
组合行列分组
<HTML>
<HEAD>
<TITLE>同时进行行列分组</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<COLGROUP SPAN=2 ALIGN=CENTER>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
<TR>
</THEAD>
<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>
12、表格的标题标签
置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。
语法格式：
<caption align="值" valign="值" >表哥标题</caption>
<caption>应放在<table>标签内，在表格行标签<tr>标签之前。
<caption>标签的默认属性是标题位于表格的上方中间位置。
<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>
13、表格的嵌套
在 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>
网友评论