如何解读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
|
|
#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 編輯 ]
五层边框范例和代码
|
|
|
|
|
歡迎光臨 華中天地論壇 (http://huachung.freebbs.tw/) | Powered by Discuz! 5.0.0 |