<!--1.表格的基本格式 2.<table>标签下的常用属性 3.<table>标签下的边框设置 -->
<!--4.<tr><th><td>标签下的常用属性 5.拆分与合并单元格 6.表格的结构化、直列化、标题-->
<!--7.表格的嵌套-->
<html> <!--根控制标记(头)-->
<head><!--头控制标记(头)-->
<title>表格应用</title> <!--标题标记-->
</head> <!--头控制标记(尾)-->
<body leftmargin="0" topmargin="5" bgcolor="white">
<!--网页显示区域 leftmargin显示内容与左边框间距 topmargin显示内容与上边框间距-->
<!--table表头，border="边框大小" cellspacing="单元间距" cellpadding="数据与边框的间距"-->
<!--alight="表格位置" height="像素绝对百分比绝对" width="同height"-->
<!--bordercolor 火狐和IE效果不同-->
<!--light dark 火狐不支持，light 表格上左色，单元右下色 dark表格左下色 单元上左色-->
<table bordercolorlight="red" bordercolordark="green"
bordercolor="yellow" border="1" cellspacing="5" summary="一群可怜的人" width="50%" align="center" cellpadding="5" height="300">
<tr> <!--表格的行(头)-->
<th>姓名1</th><th>学号</th><th>性别</th><th>现住地</th><!--用来设置标题栏位-->
</tr><!--表格的行(尾)-->
<tr>
<td>晴天</td><td>A110</td><td>女</td><td>济南</td><!--用来设置数据栏位-->
</tr>
<tr>
<td>SOUL</td><td>A111</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>包子</td><td>A112</td><td>男</td><td>南京</td>
</tr>
<tr>
<td>月夜</td><td>A113</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>tomcat</td><td>A114</td><td>男</td><td>西安</td>
</tr>
<tr>
<td>学习</td><td>A115</td><td>男</td><td>北京</td>
</tr>
</table> <!--表尾-->
<!--table属性frame void 不要显示表格的外边线-->
<!--table属性frame above 只要显示表格的外上边线-->
<!--table属性frame below 只要显示表格的外下边线-->
<!--table属性frame hsides只要显示表格的外上下边线-->
<!--table属性frame vsides只要显示表格的外左右边线-->
<!--table属性frame lhs 只要显示表格的外左边线-->
<!--table属性frame rhs 只要显示表格的外右边线-->
<!--table属性frame border/box 只要显示表格的所有外边线(默认)-->
<!--table属性rules rows 只要显示出横行内框线-->
<!--table属性rules cols 只要显示出竖行内框线-->
<!--table属性rules all 显示出全部内框线-->
<!--table属性rules groups 表示列组合水平部分-->
<!--table属性rules groups 不显示任何格框线-->
<table border="1" frame="border" rules="none" width="300" height="200" align="center">
<tr> <!--表格的行(头)-->
<th>姓名1</th><th>学号</th><th>性别</th><th>现住地</th><!--用来设置标题栏位-->
</tr><!--表格的行(尾)-->
<tr>
<td>晴天</td><td>A110</td><td>女</td><td>济南</td><!--用来设置数据栏位-->
</tr>
<tr>
<td>SOUL</td><td>A111</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>包子</td><td>A112</td><td>男</td><td>南京</td>
</tr>
<tr>
<td>月夜</td><td>A113</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>tomcat</td><td>A114</td><td>男</td><td>西安</td>
</tr>
<tr>
<td>学习</td><td>A115</td><td>男</td><td>北京</td>
</tr>
</table> <!--表尾-->
<table bgcolor="orange" border="1" width="300" height="300" align="center">
<tr height="45"> <!--表格的行(头)-->
<th nowrap>姓名1</th><th nowrap>学号</th><th nowrap>性别</th><th nowrap>现住地</th><!--用来设置标题栏位,Nowrap 在单元格中换行-->
</tr><!--表格的行(尾)-->
<tr bgcolor="red"><!--整行背景颜色-->
<td nowrap>晴天</td><td nowrap>A110</td><td newrap>女</td><td nowrap>济南</td><!--用来设置数据栏位-->
</tr>
<tr align="center"><!--align="居中"-->
<td nowrap>SOUL</td><td nowrap>A111</td><td nowrap>男</td><td nowrap>北京</td>
</tr>
<tr align="right"><!--align="居右"-->
<td nowrap><b>包子</b></td><td nowrap>A112</td><td nowrap>男</td><td nowrap>南京</td>
</tr>
<tr valign="bottom"> <!--valign="垂直方向top靠上，middle靠中，bottom靠下"-->
<td bgcolor="green" nowrap>月夜</td><td nowrap>A113</td><td nowrap>男</td><td>北京</td>
</tr>
<tr valign="bottom" align="right">
<td nowrap>tomcat</td><td>A114</td><td nowrap>男</td><td nowrap>西安</td><!--在单元格中换行-->
</tr>
<tr>
<td nowrap>学习学习学习学习学习学习学习</td><td nowrap>A115</td><td nowrap>男</td><td>北京</td>
</tr>
</table> <!--表尾-->
<br>
<table border="1" width="300" height="200" align="center">
<tr> <!--表格的行(头)-->
<th>姓名1</th><th>学号</th><th>性别</th><th>现住地</th> <!--用来设置标题栏位-->
</tr><!--表格的行(尾)-->
<tr>
<td colspan="2">晴天</td><td>女</td><td>济南</td> <!--colspan="向两边扩展栏位"-->
</tr>
<tr>
<td>SOUL</td><td>A111</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>包子</td><td>A112</td><td>男</td><td>南京</td>
</tr>
<tr>
<td>月夜</td><td>A113</td><td>男</td><td rowspan="2">北京</td> <!--rowspan="向下扩展栏位"-->
</tr>
<tr>
<td>学习</td><td>A115</td><td>男</td>
</tr>
<tr>
<td>tomcat</td><td>A114</td><td>男</td><td>西安</td>
</tr>
</table> <!--表尾-->
<br>
<table border="1" width="300" height="200" align="center">
<thead> <!--表头区(头)-->
<tr> <!--表格的行(头)-->
<th>姓名1</th><th>学号</th><th>性别</th><th>现住地</th> <!--用来设置标题栏位-->
</tr><!--表格的行(尾)-->
</thead> <!--表头区(尾)-->
<tbody><!--表体区(头)-->
<tr>
<td>晴天</td><td>A110</td><td>女</td><td>济南</td> <!--用来设置数据栏位-->
</tr>
<tr>
<td>SOUL</td><td>A111</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>包子</td><td>A112</td><td>男</td><td>南京</td>
</tr>
<tr>
<td>月夜</td><td>A113</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>tomcat</td><td>A114</td><td>男</td><td>西安</td>
</tr>
<tr>
<td>学习</td><td>A115</td><td>男</td><td>北京</td>
</tr>
</tbody> <!--表体区(尾)-->
<tfoot><!--表尾区(头)-->
<tr>
<td colspan="4" align="center">这里是大家的粗略信息表</td>
</tr>
</tfoot><!--表尾区(尾)-->
</table> <!--表尾-->
<br>
<table border="1" width="300" height="200" align="center" cellspacing="0" cellpadding="0">
<caption>这里是大家的粗略信息表<caption> <!--表格的标题 align = top标题在表格上方 bottom标题在表格下方-->
<colgroup span="1" bgcolor="red"></colgroup><!--直列设置span="1-N列"-->
<col></col><!--个别直列设置-->
<col span="1" bgcolor="green"></col><!--个别直列设置-->
<thead> <!--表头区(头)-->
<tr> <!--表格的行(头)-->
<th>姓名1</th><th>学号</th><th>性别</th><th>现住地</th> <!--用来设置标题栏位-->
</tr> <!--表格的行(尾)-->
</thead> <!--表头区(尾)-->
<tbody> <!--表体区(头)-->
<tr>
<td>晴天</td><td>A110</td><td>女</td><td>济南</td><!--用来设置数据栏位-->
</tr>
<tr>
<td>SOUL</td><td>A111</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>
<!--frame=void 外边框不显示 cellspcing="内框间距" cellpadding="数据与内框间距"-->
<table frame="void" border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>A112</td><td>男</td><td>南京</td>
</tr>
<tr>
<td>月夜</td><td>A113</td><td>男</td><td>北京</td>
</tr>
<tr>
<td>tomcat</td><td>A114</td><td>男</td><td>西安</td>
</tr>
<tr>
<td>学习</td><td>A115</td><td>男</td><td>北京</td>
</tr>
</tbody> <!--表体区(尾)-->
<tfoot></tfoot> <!--表尾区-->
</table> <!--表尾-->
</body> <!--网页显示区域(尾)-->
</html> <!--根控制标记(尾)-->
XHtmlThree
最新推荐文章于 2024-10-18 16:39:57 发布
扫一扫
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
