製作表格

【製作表格】

程式說明

在網頁設計中，表格是經常需要使用的標籤，雖然使用的規則複雜了一點，
但是在CSS尚未發展成形以前，以及對一些簡單的網頁設計來說，
表格在排版上還是具有相當強大的功能。表格標籤無法獨立存在，
必須配合<TR> <TD> 等儲存格定義標籤來使用。

存放位置

將下列程式存放至 <body> 標籤後 </body> 標籤前。

原始碼

<TABLE BORDER=1>設定表格框架的程式原型，也是表格語法的開頭，BORDER=數字等於設定框架粗細的語法，數字零等於沒有邊框。

<TR>設定表格分行的語法開頭

<TD>設定格子數目的開頭

內容(圖&字..等等)

</TD>設定格子數目的結尾

</TR>設定表格分行的語法結束

</TABLE>表格語法的結束語法

橫向表格

各位同學應該都有看到紅色的<TD>和</TD>以及綠色的數字吧!
請把注意放在那裡，一個表格等於一組、兩個等於兩、三個等於三組以此類推。
綠色的數字可以以其他內容代替之。
這裡指的是內容、也就是說不管是圖片還是文字、或者是一些雜七雜八的東西都可以。

原始碼

範例

<TR>

</TR>

</TABLE>

直立表格

這次的程式中多了一組紫色的<TR>和</TR>別想的那麼複雜真的很簡單。
只要想像成紫色的程式是用來將表格改裝成直立式表格在用的語法就好。
跟剛剛有點不同的是這種程式是在用到分行才需要加入的。

原始碼

範例

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

左右擴張

這裡所看到的橘色COLSPAN=3便是專門合併橫向表格的程式。
也就是左右合併的改裝語法啦!那為什麼會有個3ㄋ?很簡單!下面是不是有三個表格。
換一個想法想不要當做是在合併?是的其實這不是合併這是表格擴張語法。
就像是在變魔術一樣將一個表格對應N個加上COLSPAN=數字語法就可以擴張(合併)表格了

原始碼

範例

<TR>

</TR>

<TR>

</TR>

</TABLE>

1
2	3	4

上下合併

這次不用多說了想必各位同學應該已經知道了此ROWSPAN=2黑色語法是什麼了!
是的正如您們所想像的一樣這是一種可以讓上下表格合而為一的程式語言。
這種語法跟剛剛上面所學的左右擴張是同樣的道理的、差別在於一個橫向式一個是直立式。

原始碼

範例

<TR>

</TR>

<TR>

</TR>

</TABLE>

1	2	3
1	4	5

調整大小

表格其實是一種沒有大小標籤的語法，此語法所謂的調整大小其實是寬高設定。
當然了既然只要調整一下寬高便可以設定大小的話那不是也滿簡單的。

原始碼

範例

<TR>

</TR>

</TABLE>

盡止換行

此標籤會強迫儲存格內容不因儲存格寬度不足，自動進行內容換行的動作，
而是增加儲存格的寬度來顯示儲存格的內容。

原始碼

範例

<TR>

</TR>

</TABLE>

內容位置

有沒有覺得這次的修改語法很熟悉!嗯嗯嗯...不用猜了它正是排版標籤單元的程式，
為何會跑來這裡ㄋ!?很奇怪嗎?其實一點都不奇怪既然是要設定位置當然是交給排版標籤嚕，
網路程式語法就是如此程式之間交互使用的機會其實很多，
只要經常去接觸就會很容易了解的。

原始碼

範例

<TR>

</TR>

</TABLE>

注意事項

對齊的方式除了之前所學會較常用的三種水平對齊以外，另外還有一種是垂直對齊，
以下便是所有對齊方式的總覽

ALIGN="水平對齊"，是設定此一欄位的水平對齊方式，其值有：
LEFT（向左對齊）、CENTER（向中對齊）、RIGHT（向右對齊）。

VALIGN=="垂直對齊"，是設定此一欄位的垂直對齊方式，其值有：
TOP（頂部對齊）、BOTTOM（底部對齊）、
MIDDLE（置中對齊）、BASELINE（基線對齊）。