滴墨斋主的后花园

.

日志

关于我

滴墨斋主

文章分类

引用教您制做表格嵌套

2009-06-28 17:20:39| 分类：博客技巧 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

引用

寒露游之的教您制做表格嵌套

引用

金钥匙的【教您制做表格嵌套】

表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。将从最简单的表格嵌套开始演示和讲解，不会太难的。

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

定义表格的基本语法

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

表格标记

标签

描述

<table>...</table>

用于定义一个表格开始和结束

<th>...</th>

定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内

<tr>...</tr>

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

<td>...</td>

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

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

两张表格的嵌套：

欢迎您的光临

欢迎您的光临

欢迎您的光临
代码如下（红色的为第二张表格的代码）：

<table border=8 bordercolor=#0099cc width=100%>

<tbody>

<tr>

<td>欢迎您的光临

<table border=8 bordercolor=#ccffcc width=100%>

<tbody>

<tr>

<td><br>欢迎您的光临

<br></td>

</tr>

</tbody>

</table>欢迎您的光临

</td>

</tr>

</tbody>

</table>

从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的<td>和</td>里面，这一点一定要弄清楚。不然，终止符不正确或缺少时，由于系统的容错性不好、自动修正功能不够智能化等问题，效果将会很糟糕，错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。

下面是三个表格的嵌套代码及效果，由于表格里没有内容，所以，博客教材指定了三级表格的高度。代码中，每一个表格的代码用一种颜色来区分。

代码：

<TABLE borderColor=#6633ff width="100%" border=8>

<TBODY>

<TR>

<TD>

<TABLE borderColor=#cc9966 width="100%" border=8>

<TBODY>

<TR>

<TD>

<TABLE borderColor=#003300 height=200 width="100%" border=8>

<TBODY>

<TR>

<TD></TD>

</TR>

</TBODY>

</TABLE>

</TD>

</TR>

</TBODY>

</table>

</td>

</tr>

</tbody>

</Table>

一般来说，只要结构清晰，再多的表格嵌套也是一样操作的。博客教材再次提示：不管是多少张表格嵌套，一定要注意起始标识符的正确性，稍有点错误，系统会自动帮你更正，但更正的效果或许不是你所需的，而且，一旦错误太多，系统的自动更正也无能为力

表格的嵌套(二)

先来看看以下表格：

你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。

<table border=6 bordercolor=#888888 width="100%">

<tbody><tr><td>

<table border=5 bordercolor=#ffcc00 width="100%" height=200>

<tbody><tr><td></td></tr></tbody>

</table>

<table border=5 bordercolor=#ffcc00 width="100%" height=200>

<tbody><tr><td></td></tr></tbody>

</table>

</td></tr></tbody>

</table>

这种方式的嵌套可以让你有更多的创意，比如，上面的二级表格里放置一个背景图并用透明Flash动画来修饰它，下面一个表格里放置滚动图文，总之，发挥你的想象力，充分利用这种格式制作出令人赞叹的效果来！

表格的嵌套(三)

与上一讲的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？

首先，在父表格里，我们用两次“<td>……</td>”将父表分隔成左右各一半，即父表是一个有一行两列的表格。其次，我们在父表的左、右单元格里分别放置一个表格，就形成了以上效果。请研究以下代码清单，为了区分层次，博客教材把每一个表格的代码用一种颜色表示，请特别注意父表的代码：

<TABLE borderColor=#ccffcc width="100%" border=4>

<TBODY>

<TR>

<TD width="50%">

<TABLE borderColor=#666666 height=300 width="100%" border=4>

<TBODY><TR><TD></TD></TR></TBODY>

</TABLE>

</TD>

<TD width="50%">

<TABLE borderColor=#666666 height=300 width="100%" border=4>

<TBODY><TR><TD></TD></TR></TBODY>

</TABLE>

</TD>

</TR></TBODY>

</TABLE>

表格的嵌套(四)

实例

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

.

网页标志
广告条

标题栏

标题栏

标题栏

标题栏

标题栏

标题栏

标题栏

标题栏

标题栏

内容六

内容一

内容二

内容三

内容四

内容五

表格的标题标签<caption>(五)

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

　　语法格式：

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

学生信息表

学生基本信息成绩

姓名性别专业课程分数

咚咚男计算机程序设计 68

喃喃女 89

表格的行列分组(六)

实例： <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>

姓名性别专业分数

咚咚男计算机 85

喃喃女园林 94

依依女微波通信 87

表格按列分组<colgroup> (七)

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

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

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

实例：<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>

姓名性别专业分数

咚咚男计算机 79

喃喃女园林 90

依依女微波通信 76

表格的分组 表格的行分组<thead>/<tbody>/<tfoot> (八)

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>

姓名性别专业

咚咚男计算机

喃喃女园林

设定跨多行多列单元格 (九)

    要创建跨多行、多列的单元格，只需在<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>

学生基本信息成绩

姓名性别专业课程分数

咚咚男计算机程序设计 68

喃喃女 89

单元格的设定(十)

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

实例：<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>

姓名性别年龄专业

笨笨猫女 18 学生

表格行的设定(十一)

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

<tr>标签的属性

属性

描述

align

行内容的水平对齐

valign

行内容的垂直对齐

bgcolor

行的背景颜色

bordercolo

行的边框颜色

bordercolorlight

行的亮边框颜色

bordercolordark

行的暗边框颜色

<TR> 的参数设定（常用）：
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

实例：<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>

姓名性别年龄专业

咚咚男 18 学生

楠楠女 17 学生

设置分隔线的显示状态 rules (十二)

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

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

rules的值

描述

all

显示所有分隔线

groups

只显示组与组的分隔线

rows

只显示行与行的分隔线

cols

只显示列与列的分隔线

none

所有分隔线都不显示

实例:

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

姓名性别年龄专业

笨笨猫女 99 计算机

姓名性别年龄专业

笨笨猫女 99 计算机

表格的边框显示状态 frame (十三)

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

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

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

frame的值

描述

box

显示整个表格边框

void

不显示表格边框

hsides

只显示表格的上下边框

vsides

只显示表格的左右边框

alove

只显示表格的上边框

below

只显示表格的下边框

lhs

只显示表格的左边框

rhs

只显示表格的右边框

实例：

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

姓名性别年龄专业

卡卡男 50 计算机

表格<table>标签的属性 (十四)

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

<table>标签的属性

属性

描述

width

表格的宽度

height

表格的高度

align

表格在页面的水平摆放位置

background

表格的背景图片

bgcolor

表格的背景颜色

border

表格边框的宽度（以像素为单位）

bordercolor

表格边框颜色

bordercolorlight

表格边框明亮部分的颜色

bordercolordark

表格边框昏暗部分的颜色

cellspacing

单元格之间的间距

cellpadding

单元格内容与单元格边界之间的空白距离的大小

实例：<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>

第1行中的第1列第1行中的第2列第1行中的第3列

第2行中的第1列第2行中的第2列第2行中的第3列

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

上述代码里，博客教材定义了二级表格的高度，在实际使用中，你可以根据情况定义或不定义，但要注意两个子表格的高度要一致，否则就很难看。此外，表格的border值要不要应该根据实际需要而定，博客教材之所以定义为4，是为了使效果更加明显。

表格是HTML文档里的元素之一，它还可以是容器，因此，表格里甚至是表格的单元格里又有表格是正常的，我们就是充分利用这一特点来装饰我们的文档（或贴子）。

第五讲的三个讲义专门研究了表格嵌套，嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的，但它们已经将表格的嵌套结构展示完毕，在这个基础上，我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的，这就看你的了 !

学生信息表
学生基本信息	成绩
姓名	性别	专业	课程	分数
咚咚	男	计算机	程序设计	68
喃喃	女	89

姓名	性别	专业	分数
咚咚	男	计算机	85
喃喃	女	园林	94
依依	女	微波通信	87

姓名	性别	专业	分数
咚咚	男	计算机	79
喃喃	女	园林	90
依依	女	微波通信	76

姓名	性别	专业
咚咚	男	计算机
喃喃	女	园林

学生基本信息	成绩
姓名	性别	专业	课程	分数
咚咚	男	计算机	程序设计	68
喃喃	女	89

姓名	性别	年龄	专业
笨笨猫	女	18	学生

姓名	性别	年龄	专业
咚咚	男	18	学生
楠楠	女	17	学生

姓名	性别	年龄	专业
笨笨猫	女	99	计算机

姓名	性别	年龄	专业
笨笨猫	女	99	计算机

姓名	性别	年龄	专业
卡卡	男	50	计算机

评论这张

转发至微博

阅读(1081)| 评论(4)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_082071087086084065080095094095080084083069080087083070',
              blogTitle:'引用 教您制做表格嵌套',
              blogAbstract:'<P\> </P\>  <P\><EM\>引用</EM\></P\>  <BLOCKQUOTE\><A target=\"_blank\" href=\"http://cgzxp385438.blog.163.com/\" \>寒露游之</A\> 的 <A target=\"_blank\" href=\"http://cgzxp385438.blog.163.com/blog/static/10583022320095128291615\" \>教您制做表格嵌套</A\><BR\>  <P\> </P\>  <P\><EM\>引用</EM\></P\>  <BLOCKQUOTE\><A target=\"_blank\" href=\"http://wwfhh.blog.163.com/\" \>金钥匙</A\> 的 <A target=\"_blank\" href=\"http://wwfhh.blog.163.com/blog/static/461426762008112353946912\" \>【教您制做表格嵌套】</A\><BR\>  <P\> </P\>  <P\> </P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"3\" \><STRONG\><FONT color=\"#008000\" \>表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。</FONT\></STRONG\><STRONG\><FONT color=\"#008000\" \>将从最简单的表格嵌套开始演示和讲解，不会太难的。</FONT\></STRONG\></FONT\></P\>  <P\></P\></BLOCKQUOTE\></BLOCKQUOTE\>',
              blogTag:'',
              blogUrl:'blog/static/42264155200952852039944',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317413408297,
              publishTime:1246180839944,
              permalink:'blog/static/42264155200952852039944',
              commentCount:4,
              mainCommentCount:2,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:true,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/42264155200952852039944">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

滴墨斋主的后花园

导航

日志

引用教您制做表格嵌套

历史上的今天

最近读者

热度

评论

页脚

标签	描述
<table>...</table>	用于定义一个表格开始和结束
<th>...</th>	定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内
<tr>...</tr>	定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<td>...</td>	定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内

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

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

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

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

第1行中的第1列	第1行中的第2列	第1行中的第3列
第2行中的第1列	第2行中的第2列	第2行中的第3列

滴墨斋主的后花园

导航

日志

引用 教您制做表格嵌套

历史上的今天

最近读者

热度

评论

页脚

引用教您制做表格嵌套