如何解读HTML代码中table的含义

在HTML代码里，用的较多的表格代码 table 的基本语法格式是：

<table><tr><td>……</td></tr></table>

table ： 表示定义一个框框， table 的括号里可以跟着有多种属性例如：
width ： 表示外框的宽度
height： 表示外框的高度
border： 表示边框的粗细
bordercolor 表示边框的颜色
bgcolor 表示框框的背景底色
…………等等

tr 是定义在一个框框里从上至下的列数，
在每一套<table>……</table>里包含有多少个tr就表示将这个框框从上至下分成多少个列（row）。

td 是定义在一个框框里从左至右的栏数，
在每一套<table>……</table>里包含有多少个td就表示将这个框框从左至右分成多少个栏（column）。

例（一）：
<center>
<div style="width:300px; height:200px">
<table width=300 height=200 bgcolor=silver bordercolor=blue border=2>
<tr>
<td>定义一个框框</td>
</tr>
</table>
</div>
</center>

这个代码的一套<table>……</table>里只包含有一套<tr><td>……</td></tr>意思就是只定义一个宽度为 300 高度为 200 的有银色背景和蓝色边框、边框粗度为2的框框。
效果：

定义一个框框

例（二）：
<center>
<div style="width:300px; height:200px">
<table width=300 height=200 bordercolor=blue border=2>
<tr>
<td>第一列</td>
</tr>

<tr>
<td>第二列</td>
</tr>

</table>
</div>
</center>

这个代码的一套<table>……</table>里包含有两套<tr><td>……</td></tr>意思就是定义一个宽度为 300 高度为 200 的有蓝色边框、边框粗度为2的框框，而框框里由上到下又分隔成两列。
效果：

第一列

第二列

例（三）：
<center>
<div style="width:300px; height:200px">
<table width=300 height=200 bordercolor=blue border=2>
<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>
</div>
</center>

这个代码的每一套<tr>……</tr>里包含有三套<td>……</td>意思就是定义一个宽度为 300 高度为 200 的有蓝色边框、边框粗度为2的框框里由上到下分隔成两列，而每个列又从左到右分隔成3栏。
效果：

第1列第1栏	第1列第2栏	第1列第3栏
第2列第1栏	第2列第2栏	第2列第3栏

例（四）多层框：
<center>
<div style="width:300px; height:200px">
<table width=300 height=200 bgcolor=pink bordercolor=blue border=2>
<tr>
<td>

<center> <div style="width:200px; height:100px">
<table width=200 height=100 bgcolor=silver bordercolor=red border=1>
<tr>
<td>第二层框</td>
</tr>
</table>
</div></center>

</td>
</tr>
</table>
</div>
</center>

这个代码的一套<table><tr><td>……</td></tr></table>里又包含有另一套宽度和高度较小的一套<table><tr><td>……</td></tr></table>意思就是定义一个在宽度为 300 高度为 200 的框框里再做一个宽度为200， 高度为100 的小框。这叫做两层框。
效果：

第二层框

最简单的一层边框套装范例

 

 

 

边框的代码如下：

<DIV>
<TABLE style="WIDTH: 480px; HEIGHT: 66px" borderColor=#cc6600 cellSpacing=5 cellPadding=5 background=http://static12.photo.sina.com.cn/orignal/537b55d01e4cb5a6e074b border=8 align=center>
<TBODY>
<TR>
<TD width='100%'>此处贴上文字或图片</TD></TR></TBODY></TABLE></DIV>

 

    代码中蓝色的#cc6600是边框的颜色，红色的字母是背景图片的地址。紫色数目字可根据需要调整大小。

 

   以下列出的边框下面就是边框颜色和背景地址。（背景地址只供新浪博客用户使用，是设了防盗链的，故请勿直接套用此网址，需要使用的网友请先下载，再上传到自己的网络空间，取得外链网址再套用上去）

 

#006666

 http://static11.photo.sina.com.cn/orignal/537b55d0ee439ea47e8da

 

 

 

#CC0000

http://static16.photo.sina.com.cn/orignal/537b55d0ba9f2ad69089f

 

 

#6633CC

http://static2.photo.sina.com.cn/orignal/537b55d033b8c06255e71

 

 

#99CC66

http://static6.photo.sina.com.cn/orignal/537b55d011ba6559ad275

 

 

#66CCCC

http://static1.photo.sina.com.cn/orignal/537b55d00e77acd513260

 

 

#CC6666

http://static3.photo.sina.com.cn/orignal/537b55d0103c92c1bab82

 

 

#006699

http://static9.photo.sina.com.cn/orignal/537b55d0ed516d4207b78

 

 

 

#cc3333

http://static13.photo.sina.com.cn/orignal/537b55d06fa0421566cec

 

 

#996633

http://static12.photo.sina.com.cn/orignal/537b55d0a88f3a4e444eb

 

 

[ 本帖最後由 rainbow 於 2018-1-28 12:20 編輯 ]

五层边框范例和代码

 

 

 

 

 

 

 

    制作以上边框的代码： 

<DIV> <TABLE style="WIDTH: 700px" cellSpacing=20 cellPadding=1 align=center background=http://static12.photo.sina.com.cn/orignal/4cfd6ab45ead2f4e57b2b border=0> <TBODY> <TR> <TD> <TABLE style="WIDTH: 658px" cellSpacing=3 cellPadding=1 background=http://static13.photo.sina.com.cn/orignal/4cfd6ab4601595ac2b69c border=0> <TBODY> <TR> <TD> <TABLE style="WIDTH: 650px" cellSpacing=7 cellPadding=1 background=http://eun9696.new21.net/hyugesil/simsim/wall_paper/02/35.jpg border=0> <TBODY> <TR> <TD> <TABLE style="WIDTH: 634px" cellSpacing=3 cellPadding=1 background=http://static13.photo.sina.com.cn/orignal/4cfd6ab4601595ac2b69c border=0> <TBODY> <TR> <TD> <TABLE style="WIDTH: 626px" borderColor=#467500 cellSpacing=1 cellPadding=1 background=http://eun9696.new21.net/hyugesil/simsim/wall_paper/05/30.jpg border=0> <TBODY> <TR> <TD> 这里开始写上你的文章内容和图片等…… </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV>

 

    上面的每个边框里是五张图片的地址，把这些地址按顺序替换代码中绿色的部分，就可得到以上边框。您也可以自己选择喜欢的图片，来替换代码中的绿色部分，不过这些图片一定要有网上的地址。

    红色的数字是边框的宽度，根据您的需要调整。

   边框制作好以后，在最中间的一层上打上光标就可以开始写文章了，边框会随着文章的延长而延长。

[[i] 本帖最後由 rainbow 於 2013-7-1 22:55 編輯 [/i]]