多列表格代碼

魚過大海 2011-04-09

展開全文

四列表格代碼

文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字

代碼如下：

表格邊框代碼應(yīng)用

一,、單列表格：

代碼：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" 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="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" 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="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果：

文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字

四,、首行合并,，以下兩列：

代碼：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>

</TBODY></TABLE>

效果：

文字
文字	文字
文字	文字

五、首行合并,，以下三列：

代碼：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=3>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD width="33.33%">

</TBODY></TABLE>

效果：

文字
文字	文字	文字
文字	文字	文字

五,、表格的框線設(shè)置：

1、設(shè)定表格框線的粗細(xì),，只需將屬性“border”的數(shù)值設(shè)置成自己滿意即可,，如將1改成5：

代碼：

</TABLE>

效果：

表格內(nèi)容

2,、表格框線顏色的設(shè)定，只需將屬性“borderColor”的顏色碼設(shè)置成自己滿意即可：

代碼：

</TABLE>

效果：

表格內(nèi)容

3,、設(shè)定表格的陰影,、亮面顏色，可以使表格的邊框更富立體感,，只需將屬性“borderColorLight”的顏色碼（亮面）和“ borderColorDark”的顏色碼（暗面）選定即可：

代碼：

<TABLE borderColorDark=#004B97

borderColorLight=#62B0FF border=5>

</TABLE>

效果：

表格內(nèi)容

六,、表格欄距設(shè)置：

1、利用“cellpadding”屬性設(shè)定表格內(nèi)容與格線之間的距離,，其默認(rèn)值為2,，以自己滿意即可：

代碼：

</TABLE>

效果：

表格內(nèi)容

2、利用“cellspacing”屬性設(shè)定表格欄位格線之間的距離,。其默認(rèn)值為2,，以自己滿意即可：

代碼：

</TABLE>

效果：

表格內(nèi)容

附：表格常用屬性

1、<TABLE></TABLE>：定義表格的元素,。分別作起,、始標(biāo)識(shí)符，網(wǎng)頁(yè)中有幾張表格,，就有幾對(duì)此元素,。

2、<TR></TR>：定義表格中“行”的元素,。在表格中有幾對(duì)此元素就表示當(dāng)前表格中有幾行,。

3、<TD></TD>：表示一行中單元格的元素,。一行中有幾對(duì)此元素,，就有幾個(gè)單元格。

4,、border：表格外框線寬度,，屬性值為數(shù)字。如border=5,，表示表格邊框的粗細(xì)為5個(gè)像素（默認(rèn)值為1）,，為0表示沒有邊框。

5,、borderColor：表格的邊框線顏色,，屬性值為各種顏色代碼（當(dāng)border值不為0時(shí)設(shè)置此值有效）。如 borderColor=#0080FF,，表示表格邊框線的顏色為藍(lán)色（默認(rèn)值為白色）。

6、bordercolorlight：亮邊框（表格的左邊和上邊框）顏色,，屬性值為各種顏色代碼（當(dāng)border值不為0時(shí)設(shè)置此值有效）。

7,、bordercolordark：暗邊框（表格的右邊和下邊框）顏色,，屬性值為各種顏色代碼（當(dāng)border值不為0時(shí)設(shè)置此值有效）。

8,、bgcolor：表格的背景顏色,，屬性值為各種顏色代碼。
如 bgcolor=#FF0000,，表示表格背景色為紅色（默認(rèn)值為無色）,。

9、background：表格的背景圖案,，屬性值為有效的圖片地址。

10,、cellpadding：表示單元格內(nèi)容與單元格邊框之間的距離,，屬性值為數(shù)字。

11,、cellspacing：表示表格中各單元格的間距,，屬性值為數(shù)字。當(dāng)表格只有一個(gè)單元格時(shí),，則表示該單元格與表格邊框的距離,。

12、width：表格的寬度,，屬性值為像素和百分比兩種,。

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

14、align：表格的對(duì)齊方式,，屬性值為left（左對(duì)齊,，默認(rèn)）、center（居中）以及right（右對(duì)齊）,。

15,、colspan：定義合并表格的列數(shù)，屬性值是數(shù)字,。

16,、rowspan：定義合并表格的行數(shù),，屬性值是數(shù)字。

17,、<th>表頭</th> ：定義表頭,，表頭內(nèi)容置于<TH>和</TH>之間，顯示時(shí)呈粗體字形式,。

18,、<caption></caption> ：建立表格的標(biāo)題，通過align屬性定義標(biāo)題的位置,，其屬性有四：即 top（在表格上方）,、bottom（在表格下方）、left（在表格的左上方）,、right（在表格的右上方）。

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

表格邊框

普	表
通	格

這是一普通的表格

細(xì)	表
線	格

表格加上了漂亮的細(xì)線
(利用cellspacing1像素間隙和表格與單元格背景的不同)

細(xì)	表
線	格

這和上面那個(gè)可不一樣,，它用的是CSS，效果卻一樣,。
(對(duì)單元格border的定義)

細(xì)	表
線	格

再進(jìn)一步,，把邊框變成虛線,，同樣是CSS的神奇作用。

細(xì)線表格的擴(kuò)展應(yīng)用,，奧妙就是在第個(gè)單元格中再套入一個(gè)表格,。

立	表
體	格

立體感的表格
(簡(jiǎn)單的亮暗邊框設(shè)置，注意只有IE支持這種效果)

無名表格

給表格加上一個(gè)表頭
(應(yīng)用<fieldset>和</legend>標(biāo)簽)

表中表效果Ⅰ

給表頭再加個(gè)框
(用CSS為<legnd>定義一個(gè)邊框)

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

表中表效果Ⅱ

看起來和上面的一樣,，可是這個(gè)才是真正的表中表哦,。
(在<legnd>中插入一個(gè)表格)

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

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

一個(gè)1×3即一行三列的表格。

代碼：

效果：（1×3表格）

單元格一（即列1）

單元格二（即列2）

單元格三（即列3）

在上述示例里,，只有一組<tr>,，故而表格只有一行，<tr>...</tr>里有三組td,，因此,，表格有三列，這就是所謂的1×3表格?，F(xiàn)在我們把代碼擴(kuò)展一下,，即增加一組tr，請(qǐng)看代碼和效果：

代碼：

效果：（2×3表格）

單元格一（即列1）	單元格二（即列2）	單元格三（即列3）
單元格四（即列4）	單元格五（即列5）	單元格六（即列6）

多單元格表格里一個(gè)有趣的問題是單元格合并，其概念與Excel的合并單元格是一致的,，只是實(shí)現(xiàn)方法不同,。在HTML代碼里，我們用colspan屬性合并左右單元格,，記作：colspan=數(shù)值,，“數(shù)值”即為需要合并的單元格總數(shù)；而rowspan屬性則合并上下單元格,，記作：rowspan=數(shù)值,。

讓我們用上面的第二組示例表格來加工一下。先看合并左右的單元格——

代碼：

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

效果：

1,，2單元格合并了		3
4	5	6

下面是表格的上下單元格合并——

代碼：

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

效果：

1,4單元格合并了	2	3
1,4單元格合并了	5	6

通過HTML代碼實(shí)現(xiàn)單元格的合并略顯抽象一些，你可以研究本示例代碼和第二組代碼（2×3表格）的區(qū)別并比較兩組表格的樣式來慢慢領(lǐng)會(huì),，要完全掌握這一技術(shù),，你還需要親自做些嘗試。最后順便提一下：有些論壇可能不支持表格單元格的合并,。

立體表格

<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

兩種細(xì)線表格做法

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

文章來源,；http://www./

http://czh15031742384llz.blog.163.com/blog/static/1718568472010927537731/

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

多列表格代碼

表格邊框代碼應(yīng)用