|
四列表格代码
代码如下：
<div> </div> <div><br><br> </div> <div><br><br><br> </div> <table border=3 cellSpacing=5 borderColor=#00ffff cellPadding=10 width=600 align=center> <tbody> <tr> <td width="25%"> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td width="25%"> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td width="25%"> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td width="25%"> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> <tr> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> <tr> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> <tr> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> <tr> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> <tr> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> <tr> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> <td> <div><a href="链接网址" target=_blank>文字</a></div> </td> </tr> </tbody> </table> <div> </div> <div> </div>
一、单列表格：
代码：
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果：
二、双列表格：
代码：
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果：
三、四列表格：
代码：
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果：
四、首行合并，以下两列：
代码：
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=2>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果：
五、首行合并，以下三列：
代码：
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=3>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="33.33%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="33.33%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="33.33%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果：
五、表格的框线设置：
1、设定表格框线的粗细，只需将属性“border”的数值设置成自己满意即可，如将1改成5：
代码：
<TABLE border=5>
<TR><TD>表格内容</TD></TR>
</TABLE>
效果：
2、表格框线颜色的设定，只需将属性“borderColor”的颜色码设置成自己满意即可：
代码：
<TABLE borderColor=#0080FF border=5>
<TR><TD>表格内容</TD></TR>
</TABLE>
效果：
3、设定表格的阴影、亮面颜色，可以使表格的边框更富立体感，只需将属性“borderColorLight”的颜色码（亮面）和“ borderColorDark”的颜色码（暗面）选定即可：
代码：
<TABLE borderColorDark=#004B97
borderColorLight=#62B0FF border=5>
<TR><TD>表格内容</TD></TR>
</TABLE>
效果：
六、表格栏距设置：
1、利用“cellpadding”属性设定表格内容与格线之间的距离，其默认值为2，以自己满意即可：
代码：
<TABLE cellpadding=5 border=1>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
</TABLE>
效果：
2、利用“cellspacing”属性设定表格栏位格线之间的距离。其默认值为2，以自己满意即可：
代码：
<TABLE cellspacing=5 border=1>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
</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、<th>表头</th> ：定义表头，表头内容置于<TH>和</TH>之间，显示时呈粗体字形式。
18、<caption></caption> ：建立表格的标题，通过align属性定义标题的位置，其属性有四：即 top（在表格上方）、bottom（在表格下方）、left（在表格的左上方）、right（在表格的右上方）。
------------------------------------------------------------------------------------------------------------------------
|
这是一普通的表格 |
<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×3即一行三列的表格。
代码：
<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
<tbody>
<tr>
<td align=center>单元格一（即列1）</td>
<td align=center>单元格二（即列2）</td>
<td align=center>单元格三（即列3）</td>
</tr>
</tbody>
</table>
效果：（1×3表格）
| 单元格一（即列1） |
单元格二（即列2） |
单元格三（即列3） |
在上述示例里，只有一组<tr>，故而表格只有一行，<tr>...</tr>里有三组td，因此，表格有三列，这就是所谓的1×3表格。现在我们把代码扩展一下，即增加一组tr，请看代码和效果：
代码：
<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
<tbody>
<tr>
<td align=center>单元格一（即列1）</td>
<td align=center>单元格二（即列2）</td>
<td align=center>单元格三（即列3）</td>
</tr>
<tr>
<td align=center>单元格四（即列4）</td>
<td align=center>单元格五（即列5）</td>
<td align=center>单元格六（即列6）</td>
</tr>
</tbody>
</table>
效果：（2×3表格）
| 单元格一（即列1） |
单元格二（即列2） |
单元格三（即列3） |
| 单元格四（即列4） |
单元格五（即列5） |
单元格六（即列6） |
多单元格表格里一个有趣的问题是单元格合并，其概念与Excel的合并单元格是一致的，只是实现方法不同。在HTML代码里，我们用colspan属性合并左右单元格，记作：colspan=数值，“数值”即为需要合并的单元格总数；而rowspan属性则合并上下单元格，记作：rowspan=数值。
让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格——
代码：
<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
<tbody>
<tr>
<td align=center colspan=2>1，2单元格合并了</td>
<td align=center>3</td>
</tr>
<tr>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr>
</tbody>
</table>
效果：
下面是表格的上下单元格合并——
代码：
<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
<tbody>
<tr>
<td align=center rowspan=2>1,4单元格合并了</td>
<td align=center>2</td>
<td align=center>3</td>
</tr>
<tr>
<td align=center>5</td>
<td align=center>6</td>
</tr>
</tbody>
</table>
效果：
通过HTML代码实现单元格的合并略显抽象一些，你可以研究本示例代码和第二组代码（2×3表格）的区别并比较两组表格的样式来慢慢领会，要完全掌握这一技术，你还需要亲自做些尝试。最后顺便提一下：有些论坛可能不支持表格单元格的合并。
立体表格
<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef>
<tr bgcolor=#cccccc>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
</tr>
<tr bgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
</tr>
</table>
<center>
表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc
两种细线表格做法
<table width="100%" border="1" bordercolor="#000000">
<tr bordercolor="#FFFFFF">
<td>表格边线为1，线色为黑，行线色为白。</td>
</tr>
</table>
<p>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF">表格边线为0，间距为1，背景色为黑，行背景色为白。</td>
</tr>
</table>
|
