HTML5技术

第七章 TABLE表格_HTML教程(4)

字号+ 作者:H5之家 来源:H5之家 2015-09-24 14:14 我要评论( )

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学生信

<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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评