电竞比分网-中国电竞赛事及体育赛事平台

分享

學(xué)習(xí)網(wǎng)頁(yè)制作基礎(chǔ)入門(mén)教程(7)表格標(biāo)簽

 05fxs獵人 2011-05-08
表格單元格對(duì)齊位置設(shè)定

  1. 首先我們來(lái)看一個(gè)最簡(jiǎn)單的表格:

原始代碼 顯示結(jié)果
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
1

  2. 利用<TABLE>這個(gè)標(biāo)簽來(lái)告訴瀏覽器,這是一個(gè)表格,至于 BORDER=1 這參數(shù)是設(shè)定此表格的框線粗細(xì)為 1。一組 <TR></TR> 是設(shè)定一行的開(kāi)始位置。一組 <TD></TD> 則是設(shè)定一個(gè)單元格。當(dāng)然,文字就是要放在這里面。

  3. 現(xiàn)在我們?cè)賮?lái)增加兩個(gè)單元格:

原始代碼 顯示結(jié)果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
1 2 3

  4. 看見(jiàn)了吧,<TR></TR>沒(méi)有增加,<TD></TD>卻增加了兩組。那如果我要再加上一列呢?很簡(jiǎn)單,就像這樣:

原始代碼 顯示結(jié)果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
4 5 6

  合并表格單元格

  1. 并非所有的表格都是規(guī)規(guī)矩矩的只有幾行、幾列而已,有時(shí)候,我們還會(huì)希望能夠“合并單元格”,讓表格更美觀、更實(shí)用一點(diǎn),而談到“合并單元格”,我們就必須知道,合并的方向有兩種:一種是上下合并(也就是行列間的合并),一種是左右合并(也就是行間的合并),這兩種合并方式各有不同的屬性設(shè)定方法。

  2. 左右合并:基本上,你的表格已經(jīng)學(xué)會(huì)了!接下來(lái),咱們就來(lái)看看,如何將 1、2、3 單元格合并為一個(gè)大格:

原始代碼 顯示結(jié)果
<TABLE BORDER=1>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1
4 5 6

  你應(yīng)該會(huì)發(fā)現(xiàn),怎么2、3都消失了?只剩下1,而且該行的<TD>標(biāo)簽還多了一個(gè)陌生的臉孔COLSPAN="3",沒(méi)錯(cuò),這就是“左右合并”的屬性,COLSPAN="3"的意思就是“這個(gè)行左右橫跨了3個(gè)單元格”,也正因如此,本來(lái)的兩個(gè)<TD>都可以省掉了,因?yàn)槎急缓喜⒌袅耍?/p>

  3. 上下合并:學(xué)會(huì)了左右合并!接下來(lái),咱們就來(lái)看看,如何上下合并,將 1、4單元格通通合并成一個(gè)大格:

原始代碼 顯示結(jié)果
<TABLE BORDER=1>
<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
5 6

  有了上一次的經(jīng)驗(yàn)后,我們就知道,要合并單元格就一定有些單元格的屬性“犧牲”掉(也就是那些被合并的單元格?。?,這次我們要“上下合并”,我們將1與4合并為一個(gè)單元格,那么就要犧牲哪一個(gè)單元格呢?沒(méi)錯(cuò)就是下面那一個(gè)倒霉的4,我們看看上圖,果然4已經(jīng)被刪掉了,而在1的 <TD> 標(biāo)簽中則多了個(gè)生面孔R(shí)OWSPAN,這就是“上下單元格合并”的屬性,ROWSPAN=2 的意思就是“這個(gè)單元格上下連跨2個(gè)單元格”,其結(jié)果如上所士。

  表格單元格對(duì)齊位置設(shè)定

  1. 我可以自己設(shè)定表格的大小嗎?當(dāng)然可以,你可以自由設(shè)定表格的“寬”及“高”!我們來(lái)制作一個(gè)寬100、高60的表格,做法如下:

原始代碼 顯示結(jié)果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
1

  2. 哎呀!怎么 1 老是在表格的左邊呢?可以弄到中間嗎?當(dāng)然可以,只要在<TD>加入 ALIGN=CENTER 這參數(shù)即可:

原始代碼 顯示結(jié)果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
1

  此外,利用 ALIGN=RIGHT可以讓表格中元素置右、利用 ALIGN=LEFT可以讓表格中元素置左(默認(rèn)值),至于為什么要加在<TD>中呢?因?yàn)椋?lt;TD>是一個(gè)單元格的意思,我們要指定在這個(gè)單元格中的元素要置中或置左置右,就必須將ALIGN加在<TD>中。

  3. 既然可以置中,那么也可以控制表格內(nèi)文字靠上、靠下嗎?可以的,只要利用 VALIGN=TOP 這個(gè)屬性即可讓表格內(nèi)元素靠上方對(duì)齊。

原始代碼 顯示結(jié)果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
1

  利用VALIGN=MIDDLE可以讓表格中元素垂直置中(默認(rèn)值),VALIGN=BOTTOM可以讓表格中元素靠下方。

  表格背景、底色設(shè)定

  1. 表格可以設(shè)定底色嗎?可以的不但表格可以,你也可以指定某行或某列的顏色,方法和加背景顏色一樣,利用BGCOLOR="顏色代碼"就行了。下面是指定整個(gè)表格背景顏色的方法:

原始代碼 顯示結(jié)果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

  將BGCOLOR="顏色代碼"加在<TR>中,可以指定“一行”的背景顏色:

原始代碼 顯示結(jié)果
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

  將BGCOLOR="顏色代碼"加在<TD>中,可以指定“一個(gè)單元格”的背景顏色:

原始代碼 顯示結(jié)果
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

  2. 表格除了可以設(shè)定底色外,也可以用圖片來(lái)作背景嗎?當(dāng)然可以,方法一樣簡(jiǎn)單,只要將BACKGROUND="圖片名稱" 加到表格中就行了。和表格背景顏色一樣,不但表格可以設(shè)定背景圖片,你也可以指定某行或某列的背景圖片:

原始代碼 顯示結(jié)果
<TABLE BORDER="1" BGCOLOR="/images/bg.gif">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

  表格邊框線的設(shè)定

  1. 如何設(shè)定表格粗細(xì)?只要利用BORDER="粗細(xì)值"就行了。

原始代碼 顯示結(jié)果
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
1

  2. 如何設(shè)定表格顏色?只要利用BORDERCOLOR="顏色代碼"就行了。

原始代碼 顯示結(jié)果
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
1

  3. 另外,我們也可以設(shè)定表格的陰影、亮面顏色,讓表格看起來(lái)更有立體感!只要利用 BORDERCOLORLIGHT="#顏色代碼"(亮面設(shè)定) BORDERCOLORDARK="顏色代碼"(暗面設(shè)定)就行了。

原始代碼 顯示結(jié)果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
1

  表格間距設(shè)定

  1. 我們可以利用CELLPADDING屬性自由設(shè)定表格內(nèi)容距離邊線的距離,這個(gè)屬性很好用,保持適當(dāng)?shù)木嚯x,看起來(lái)比較舒服。一般而言內(nèi)定值為2,不過(guò)建議設(shè)定為4比較漂亮。

原始代碼 顯示結(jié)果
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2

  2. 我們可以利用CELLSPACING屬性設(shè)定表格單元格邊線之間的距離。一般而言默認(rèn)值為2,不過(guò)建議設(shè)置為 0 。

原始代碼 顯示結(jié)果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2

    本站是提供個(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)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多
    喜歡該文的人也喜歡 更多
    熱門(mén)閱讀 換一換