|
表格單元格對(duì)齊位置設(shè)定
1. 首先我們來(lái)看一個(gè)最簡(jiǎn)單的表格:
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è)單元格:
4. 看見(jiàn)了吧,<TR></TR>沒(méi)有增加,<TD></TD>卻增加了兩組。那如果我要再加上一列呢?很簡(jiǎn)單,就像這樣:
|
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> |
|
||||||
你應(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> |
|
有了上一次的經(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> |
|
2. 哎呀!怎么 1 老是在表格的左邊呢?可以弄到中間嗎?當(dāng)然可以,只要在<TD>加入 ALIGN=CENTER 這參數(shù)即可:
| 原始代碼 | 顯示結(jié)果 | |
| <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER>1</TD></TR> </TABLE> |
|
此外,利用 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> |
|
利用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> |
|
| 原始代碼 | 顯示結(jié)果 | ||||
| <TABLE BORDER="1" > <TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
| 原始代碼 | 顯示結(jié)果 | ||||
| <TABLE BORDER="1" > <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
| 原始代碼 | 顯示結(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> |
|
表格邊框線的設(shè)定
1. 如何設(shè)定表格粗細(xì)?只要利用BORDER="粗細(xì)值"就行了。
| 原始代碼 | 顯示結(jié)果 | |
| <TABLE BORDER=5> <TR><TD>1</TD></TR> </TABLE> |
|
| 原始代碼 | 顯示結(jié)果 | |
| <TABLE BORDER="5" BORDERCOLOR="#0080FF"> <TR><TD>1</TD></TR> </TABLE> |
|
| 原始代碼 | 顯示結(jié)果 | |
| <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR> </TABLE> |
|
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> |
|
| 原始代碼 | 顯示結(jié)果 | ||
| <TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE> |
|
|
|
來(lái)自: 05fxs獵人 > 《我的圖書(shū)館》