注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

黄山小屋

欢迎朋友光临小屋

 
 
 

日志

 
 

【转载】各种表格的基本制作解读115  

2014-01-10 22:33:17|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

☆各种表格的基本制作解读

 

一、简单表格制作

举个例子来说,如果今天我们要做一个3栏2列的表格,在 WORD 中,只要设定表格为3栏、2列就完成了,不过,在网页中做一个3栏2列的表格,可是要分成好几个步骤的,第一个步骤,利用 <TABLE></TABLE> 标签告诉电脑我要做一个表格;第二个步骤,利用一组<TR></TR>标签先做一个横列,然后在横列中利用三组 <TD></TD> 标签再分出三栏;第三个步骤,重复第二个步骤,再做一横列然后再分三栏,如此才能得到一个3栏2列的表格。听不太懂吗?没关系,以下咱们就来慢慢的看个仔细:

A、 首先我们来看一个最简单的表格:

代码:

<TABLE BORDER=1>

<TR><TD>1</TD></TR>

</TABLE>

结果:

1

利用<TABLE>这个标签来告诉电脑,这是一个表格,至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组 <TD></TD> 则是设定一个栏位。当然,文字就是要摆在这里面。

B 、现在我们再来增加二个格子: 

代码:

<TABLE BORDER=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

</TABLE>

结果:

1 2 3

C 、看见没有,<TR></TR>没有增加,<TD></TD> 却增加了二组。那如果我要再加上一列呢?很简单,就像这样:

代码:

<TABLE BORDER=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

</TABLE>

结果:

1 2 3
4 5 6

二、合并表格栏位

1、左右栏位合并:如何将 1、2、3 格通通合并变成一大格

代码:

<TABLE BORDER=1>

<TR><TD COLSPAN=3>1</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

</TABLE>

结果:

1
4 5 6

您应该会发现,怎么2、3都消失了?只剩下1,而且该栏的<TD>标签还多了一个陌生的脸孔 COLSPAN="3",没错,这就是“左右栏位合并”的属性,COLSPAN="3" 的意思就是“这个栏位左右横跨了3个栏位”,也正因如此,本来的两个 <TD> 都可以省掉了,因为都被并掉了嘛!

2、上下栏位合并:如何上下合并,将 1、4格通通合并变成一大格

代码:

<TABLE BORDER=1>

<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>5</TD><TD>6</TD></TR>

</TABLE>

结果:

1 2 3
5 6

有了上一次的经验后,我们就知道,要合并栏位就一定有些栏位会被“牺牲”掉(也就是那些被合并的栏位啦!),这次我们要“上下合并”,我们将1与4合并成一个栏位,那么被牺牲的是哪一个栏位呢?没错就是下面那一个倒楣的4,我们看看上图,果然4已经删掉了,而在1的 <TD> 标签中则多了个生面孔ROWSPAN,这就是“上下栏位合并”的属性,ROWSPAN=2 的意思就是“这个栏位上下连跨了2个栏位”。

三、表格对齐设置

1、我可以自己设定表格的大小吗?当然可以,您可以自由设定表格的“宽”及“高”喔!我们来制作一个宽100、高60的表格,做法如下:

代码:

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR><TD>1</TD></TR>

</TABLE>

结果:

1

2、哎呀!怎么 1 老是在表格的左边呢?可以弄到中间吗?当然可以,只要在<TD>加入 ALIGN=CENTER 这参数即可:

代码:

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR><TD ALIGN=CENTER>1</TD></TR>

</TABLE>

结果:

1

此外,利用 ALIGN=RIGHT可以让表格中物件置、利用 ALIGN=LEFT可以让表格中物件置(预设值),至于为什么要加在<TD>中呢?因为,<TD>是一个栏位的意思,我们要指定在这栏位中的东西要置中或置左置右,就必须将 ALIGN= 加在<TD>中

3、既然可以置中,那么也可以控制表格内文字靠上方、靠下方吗?可以的,只要利用 VALIGN=TOP  这种属性即可让表格内物件靠上方对齐。

代码:

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>

</TABLE>

结果:

1

利用 VALIGN=MIDDLE 可以让表格中物件垂直置中(预设值),VALIGN=BOTTOM可以H 让表格中物件靠下方。

四、表格背景设置

1、那么表格可以设定底色吗?可以的不但表格可以,您也可以指定某栏或某列的颜色,方法和加背景颜色一样,利用BGCOLOR="#颜色码" 就行了。以下是指定整个格表格背景颜色的方法:

代码:

<TABLE BORDER="1" BGCOLOR=#FFCC33>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

结果:

1 2
3 4

BGCOLOR="颜色码" 加在 <TR> 中,可以指定“一列”的背景颜色:

代码:

<TABLE BORDER="1" >

<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

结果:

1 2
3 4

将BGCOLOR="#颜色码"加在<TD>中,可以指定“一栏”的背景颜色:

代码:

<TABLE BORDER="1" >

<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

结果:

1 2
3 4

2、表格除了可以设定底色外,也可以用图片来作背景吗?当然可以,方法一样简单,只要将 BACKGROUND="图片名称" 加到表格中就行了。和表格背景颜色一样,不但表格可以设定背景图片,您也可以指定某栏或某列的背景图片:

代码:

<TABLE BORDER="1" BGCOLOR=#FFCC33>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

结果:

1 2
3 4

BACKGROUND="图片名称" 加在 <TD> 中,换下表格指定“一栏”的背景颜色代码 BGCOLOR=#FFCC33即可:(但这里还应加宽度代码)

代码:

<TABLE BORDER="1">

<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

结果:

1 2
3 4

五、 表格框线设置

1、如何设定表格粗细?只要利用BORDER="粗细值" 就行了。

代码:

<TABLE BORDER=5>

<TR><TD>1</TD></TR>

</TABLE>

结果:

1

2、如何设定表格颜色?只要利用BORDERCOLOR="#颜色码" 就行了

代码:

<TABLE BORDER="5" BORDERCOLOR="#0080FF">

<TR><TD>1</TD></TR>

</TABLE>

结果:

1

3、另外,我们也可以设定表格的阴影、亮面颜色,让表格看起来更有立体感喔!只要利用 BORDERCOLORLIGHT="#颜色码" (亮面设定) BORDERCOLORDARK="颜色码" (暗面设定)就行了。

代码:

<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">

<TR><TD>1</TD></TR>

</TABLE>

结果:

1

六、表格栏距设置

1、我们可以利用 CELLPADDING= 属性自由设定表格内文距离格线的距离,这个属性很好用,保持适当的距离,看起来比较舒服。一般而言内定值为2,不过我建议设定为4比较漂亮。

代码:

<TABLE BORDER="1" CELLPADDING="10">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>

结果:

1 2

2、我们可以利用 CELLSPACING= 属性设定表格栏位格线之间的距离。一般而言内定值为2,不过我通常习惯设为 0 。

代码:

<TABLE BORDER="1" CELLSPACING="5">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>

结果:

1 2

 

 例:

<TABLE borderColor=#0080ff bgColor=#ffcc33 border=5>
<TBODY>
<TR>
<TD>表格制作</TD>
<TD>表格制作</TD></TR>
<TR>
<TD>表格制作</TD>
<TD>表格制作</TD></TR></TBODY></TABLE>

 效果

表格制作 表格制作
表格制作 表格制作

 

 

  表格的常用属性主要有:
       1、<TABLE></TABLE>:定义表格的元素。分别作起、始标识符,网页中有几张表格,就有几对此元素。      

        2、<TR></TR>:定义表格中“行”的元素。在表格中有几对此元素就表示当前表格中有几行。

        3、<TD></TD>:表示一行中单元格的元素。一行中有几对此元素,就有几个单元格。

        4、border:表格外框线宽度,属性值为数字。如border=5,表示表格边框的粗细为5个像素(默认值为1),为0表示没有边框。

        5、borderColor: 表格的边框线颜色,属性值为各种颜色代码(当border值不为0时设置此值有效)。如 borderColor=#0080FF,表示表格边框线的颜色为蓝色(默认值为白色)。

       6、bordercolorlight:亮边框(表格的左边和上边框)颜色,属性值为各种颜色代码(当border值不为0时设置此值有效)。

        7、bordercolordark:暗边框(表格的右边和下边框)颜色,属性值为各种颜色代码(当border值不为0时设置此值有效)。

        8、bgcolor:表格的背景颜色,属性值为各种颜色代码。
如 bgcolor=#FF0000,表示表格背景色为红色(默认值为无色)。

        9、background:表格的背景图案,属性值为有效的图片地址。

        10、cellpadding:表示单元格内容与单元格边框之间的距离,属性值为数字。

        11、cellspacing:表示表格中各单元格的间距,属性值为数字。当表格只有一个单元格时,则表示该单元格与表格边框的距离。

        12、width:表格的宽度,属性值为像素和百分比两种。

        13、height:表格的高度,取值方法同width。

        14、align:表格的对齐方式,属性值为left(左对齐,默认)、center(居中)以及right(右对齐)。

        15、colspan:定义合并表格的列数,属性值是数字。

        16、rowspan:定义合并表格的行数,属性值是数字。

        17、BORDER-RIGHT: 表示右边框,BORDER-TOP: 表示上边框,BORDER-LEFT: 表示左边框,BORDER-BOTTOM: 表示下边框。 它们的属性取值一般为颜色、像素和某一特定的属性。

        18、<th>表头</th> :定义表头,表头内容置于<TH>和</TH>之间,显示时呈粗体字形式。

        19、<caption></caption> :建立表格的标题,通过align属性定义标题的位置,其属性有四:即 top(在表格上方)、bottom(在表格下方)、left(在表格的左上方)、right(在表格的右上方)。

 

 

表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示左、右边框 <table frame=vsides>

只显示上、下边框 <table frame=hsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

 

二、表格边框和单元格的特殊效果。
这是一普通的表格
<table border="1" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td>普</td><td>表</td></tr><tr align="center"> <td>通</td><td>格</td></tr></table>
线
表格加上了漂亮的细线

(利用cellspacing1像素间隙和表格与单元格背景的不同)

<table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" ><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">细</td><td bgcolor="#FFFFFF">表</td></tr><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">线</td><td bgcolor="#FFFFFF">格</td></tr></table>
线
这和上面那个可不一样,它用的是CSS,效果却一样。

(对单元格border的定义)

<table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">细</td><td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td></tr><tr align="center"> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">线</td><td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td></tr></table>
线
再进一步,把边框变成虚线,同样是CSS的神奇作用。
<table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">细</td><td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td></tr><td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">线</td><td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td></tr></table>
 
 
 
 
细线表格的扩展应用,奥妙就是在第个单元格中再套入一个表格。
<table width="200" border="0" cellspacing="2" cellpadding="0"><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td></tr><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td></tr></table>
立体感的表格

(简单的亮暗边框设置,注意只有IE支持这种效果)

<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td></tr><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td></tr></table>
无名表格

给表格加上一个表头

(应用<fieldset>和</legend>标签)

<table width="200" cellpadding="0" cellspacing="0"><tr> <td><fieldset style="width:200" align="center"> <legend> 无名表格 </legend> <p align="right"> </fieldset></td></tr></table>
表中表效果Ⅰ

给表头再加个框

(用CSS为<legnd>定义一个边框)

<table width="200"" cellspacing="0" cellpadding="0"><tr> <td><fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center"> <legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend> <br></fieldset></td></tr></table>
表中表效果Ⅱ

看起来和上面的一样,可是这个才是真正的表中表哦。

(在<legnd>中插入一个表格)

<table width="200"><tr> <td><fieldset style="width:200" align="center"> <legend> <table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20"><tr> <td><font color=blue>表中表效果Ⅱ</font></td></tr></table></legend><br></fieldset></td></tr></table>

-------------------------------------------------------------------------------------------------------------------

★ 置入博客的方法:

1. 进入编辑→2. 排版→3. 模块→

4. 添加自定义html(显示)(出现在网页左下角)→

5. 复制下列语法後贴上→6. 新增→

7. 将模块移到想显示的位置→8. 再保存(右上角)→

9. 预览我的博客。→10. 就可以看到出现在你的博客上了!

<div align="center">

<table cellspacing="1" cellpadding="0" width="100%" bgcolor="#FF0000" border="0">

<tbody>

<tr bgcolor="#FFFFFF" height="20">

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<tr bgcolor="#FFFFFF" height="20">

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

<td><div align="center">表格内容</div></td>

</tr></table></div>

表格内容
表格内容
表格内容
表格内容
表格内容
表格内容
表格内容
表格内容

 

 

各种表格的基本制作解读115 - 邓吾佳 - 邓吾佳的个性小屋 

 

表格与分割文版代码

表格代码:

<TABLE cellSpacing=0 cellPadding=0  bgColor=#ff0000  border=1>

<TBODY>

<TR>

<TD>

   表格代码除了制表用外,还有一很重要的作用就是编写日志割分版块,就是说能把一个日志版面分成几个文版使用,在自定义模块时也一样,设有边线时就是表格,把所有边线设为0时就是割分版块,如果要给割分版块加于分隔线,横线用代码<HR>, 竖线可割取6像素(调整到最小)列格后再用竖排字的方式用直点符号代用。<HR>可做竖线,但也要是在独立的列格上使用,宽设为0,加<BR>换行代码用多个<HR>连接。这种竖隔线是不漂亮的,如果你想做成漂亮的,请你再请教专业的编程老师。

代码说明:

<TR>       是行,只是换行作用,

<TD>       是列,编辑文件是在列上,从左至右

colSpan=2  合并列

rowSpan=4  合并行

cellSpacing=0(外框)cellPadding=0(内框)border=0(表格线)全零为无线

cellSpacing=2外表格框与内设框距离,默认为二个像素

cellPadding=2字、图与边框四周距离,默认为二个像素

border=0     边框宽度默认值为0,即没有边框

bgColor=#ff0000背景颜色

borderColor=#ff0000边框颜色

borderColorDark=#00ff00内边框上左颜色,又叫暗边框的顏色

bordercolorlight=#0000FF内边框下右颜色,又叫亮边框的顏色


下面是割分(表格)排列顺序1-2-3-4-5-6-7-8-9-10-11样表及代码:

<TABLE cellSpacing=0 cellPadding=1 width=680 align=center bgColor=#ff0000  border=5>

<TBODY>

<TR>

<TD vAlign=top width=244 colSpan=2> 1 </TD>

<TD vAlign=top width=218 colSpan=2> 2 </TR>

<TR>

<TD vAlign=top width=42 rowSpan=4> 3 </TD>

<TD vAlign=top width=202 rowSpan=2> 4 </TD>

<TD vAlign=top width=99> 5 </TD>

<TD vAlign=top width=119> 6 </TD></TR>

<TR>

<TD vAlign=top width=99> 7 </TD>

<TD vAlign=top width=119 rowSpan=3> 8 </TD></TR>

<TR>

<TD vAlign=top width=202 rowSpan=2> 9 </TD>

<TD vAlign=top width=99> 10 </TD></TR>

<TR>

<TD vAlign=top width=99> 11 </TD></TR></TBODY></TABLE></P>

1 2
3 4 5 6
7 8
9 10
11


1 2
3 4 5 6
7 8
9 10
11


 

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

博客教材将从最简单的表格嵌套开始演示和讲解,不会太难的。

两张表格的嵌套:

【博客教材】欢迎您的光临

【博客教材】欢迎您的光临

【博客教材】欢迎您的光临
代码如下(红色的为第二张表格的代码):

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

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

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

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

 

 

  评论这张
 
阅读(20)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017