<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
相关文章
精彩导读
热门资讯
关注我们
