带边框的表格: |
|
||||||
不带边框的表格: |
|
||||||
边框尺寸设置: <table border=#> #=边框粗度 <table border=10> |
|
||||||
<table border width=# height=#>width:宽度,height:高度,#=象素 |
|
||||||
<table border cellspacing=#> #=象素 表元间隙设置: |
|
||||||
<table border cellpadding=#> #=象素 |
|
||||||
<table align=#> #=left,right,center 设置表格在网页中的布局位置: |
cookies, chocolates, and more. |
||||||
表格的标题 <table border> |
|
||||||
表格边框的色彩 <table cellspacing=5 border=5 bodercolor=#ffaa00> |
|
||||||
表格边框色彩的亮度控制 <table |
|
一、表格中单元格之间分隔线的隐藏方法 |
|
这个表格去掉了单元格之间的横向分隔线(rules=cols) | |||||||||
|
这个表格去掉了单元格之间的纵向分隔线(rules=rows) | |||||||||
|
这个表格去掉了单元格之间的纵向分隔线和横向分隔线(rules=none) | |||||||||
其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。 |
二、表格边框的隐藏 |
|
这是一普通的表格 | ||||
|
只显示上边框(frame=above) | ||||
|
只显示下边框(frame=below) | ||||
|
只显示左、右边框(frame=vsides) | ||||
|
只显示上、下边框( frame=hsides) | ||||
|
只显示左边框( frame=lhs) | ||||
|
只显示右边框(frame=rhs) | ||||
|
不显示任何边框(frame=void) | ||||
表格边框的显示与隐藏,是可以用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> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表格加上了漂亮的细线 |
<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,效果却一样。 |
<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> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
立体感的表格 |
<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> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
六、一行里包含多行的表格
<html> <table border="1"> </body> ___________________________________________________________________________
<table border="1" summary="this table gives some statistics about fruit
<table width="300" border="1" bordercolor="#000000"> -----------------------------------------------------------------
代码: <p align="center">表格名称表格名称</p> ---------------------------------------------------------------------------
|
代码:
<p align="center">表格名称表格名称</p>
<table width="600" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#FF0000" bgcolor="#ECF5FF">
<tr>
<td><div align="center">第1行第1列</div></td>
<td><div align="center">第1行第2列</div></td>
<td><div align="center">第1行第3列</div></td>
<td><div align="center">第1行第4列</div></td>
</tr>
<tr>
<td><div align="center">第2行第1列</div></td>
<td><div align="center">第2行第2列</div></td>
<td><div align="center">第2行第3列</div></td>
<td><div align="center">第2行第4列</div></td>
</tr>
<tr>
<td><div align="center">第3行第1列</div></td>
<td><div align="center">第3行第2列</div></td>
<td><div align="center">第3行第3列</div></td>
<td><div align="center">第3行第4列</div></td>
</tr>
<tr>
<td><div align="center">第4行第1列</div></td>
<td><div align="center">第4行第2列</div></td>
<td><div align="center">第4行第3列</div></td>
<td><div align="center">第4行第4列</div></td>
</tr>
<tr>
<td><div align="center">第5行第1列</div></td>
<td><div align="center">第5行第2列</div></td>
<td><div align="center">第5行第3列</div></td>
<td><div align="center">第5行第4列</div></td>
</tr>
</table>
---------------------------------------------------------
第1行第1列 | 第1行第2列 | 第1行第3列 | 第1行第4列 |
第2行第1列 | 第2行第2列 | 第2行第3列 | 第2行第4列 |
第3行第1列 | 第3行第2列 | 第3行第3列 | 第3行第4列 |
第4行第1列 | 第4行第2列 | 第4行第3列 | 第4行第4列 |
第5行第1列 | 第5行第2列 | 第5行第3列 | 第5行第4列 |
代码:
<p align="center">表格名称表格名称</p>
<table width="600" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#FF0000">
<tr>
<td bgcolor="#FFFFFF"><div align="center">第1行第1列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第1行第2列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第1行第3列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第1行第4列</div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center">第2行第1列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第2行第2列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第2行第3列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第2行第4列</div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center">第3行第1列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第3行第2列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第3行第3列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第3行第4列</div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center">第4行第1列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第4行第2列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第4行第3列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第4行第4列</div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center">第5行第1列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第5行第2列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第5行第3列</div></td>
<td bgcolor="#FFFFFF"><div align="center">第5行第4列</div></td>
</tr>
</table>
------------------------------------------------------------------------------
新博进阶 | 圈子应读 |
网络安防 | 免费网盘 |
全球搜搜 | 语录名言 |
相声小品 | 影音视听 |
诗社文坛 | 时尚健身 |
智测良品 | 乱作一团 |