第三篇
HTML教學 		網頁研習室 第七節
表格運用 		 
表格基本架構標籤
<Table><Tr><Td>文字或圖片</Td></Tr></Table>
Tr 原文為 Table Row
Td 原文為 Table Data
請注意：
邊框線 Border 用法與網頁圖片一樣！
語   法   說   明
<Table> 標籤很重要，前面教過的任何標籤，都無法達到這樣完美的排版效果，知道原理後，就很容易學會。
Table下一步驟中譯為桌子、檯、表、目錄之意，在這裡當然就是指網頁的表格。
宣告一個表格開始 <Table>，宣告這個表格結束 </Table>，每一個表格都要有這個結束 </Table> 標籤。
<Tr>是英文組合字，原文為 Table Row，是指這個表格的列位，負責表格由上而下的縱向(垂直)延伸設定。
<Td>是英文組合字，原文為 Table Data，表格資料格的內容(欄位)，負責由左至右的橫向(水平)延伸設定。
<Table> 、 <Tr> 與 <Td> 的內容資料預設(默認)值都是置左，他們的結束</>標籤也都不能省略。
如果 <Table> 或 <Td> 資料格都沒有內定寬度與高度時，它會隨存放資料內容自動放大縮小。
範例(一) HTML標籤 <Table><Tr><Td>文字或圖片</Td></Tr></Table>
顯示結果
文字或圖片
怎麼沒看到表格呢？原來表格的外框屬性 Border 內定值是 "0"，所以就看不到表格的外框線了 。
範例(二) HTML標籤 <Table Border="1"><Tr><Td>文字或圖片</Td></Tr></Table>
顯示結果
文字或圖片
一般我們在製做 <Table> 標籤時，都會將 Border 屬性值設為 "1" ，以利瞭解排版狀況。
其實單一的表格標籤，也可以這樣表示下一步驟<Table><Td>文字或圖片</Td></Table>。
範例(三) HTML標籤 <Table Border="1"><Td>文字或圖片</Td></Table>
顯示結果
文字或圖片
因為 <Tr> 就是指這一列，所以可以省略；當然習慣上還是要養成加入 <Tr> 是比較正確用法喔。
表   格   語   法   徹   底   解   說
<Table Border="1">下一步驟表格宣告開始，並將 Border 屬性值設為 "1"，讓它產生邊框線。
<Tr>下一步驟表格列 Tr 宣告開始。
<Td>下一步驟資料儲存格 (欄) Td 宣告開始。
此內放置各種文字或圖片
</Td>下一步驟表格列 Tr 宣告結束。
</Tr>下一步驟資料儲存格 (欄) Td 宣告結束。
</Table>下一步驟表格宣告結束。
<Table>標籤架構就這麼簡單，難嗎？後面教的表格屬性也不難，您會發現學會 HTML 真的是非常值得的。
很容易吧？請記住這個基本表格標籤下一步驟<Table Border="1"><Tr><Td>文字或圖片</Td></Tr></Table> 。
表格橫向延伸 <Td> ... </Td> 標籤說明
HTML標籤及說明顯示結果
<Table Border="1">
<Tr><Td>
文字或圖片1
</Td><Td>下一步驟
只要再加一個 <Td>文字或圖片</Td> 資料欄就可以了。
文字或圖片2
</Td></Tr>
</Table>
文字或圖片1文字或圖片2
表格橫向延伸一格，只要增加一個<Td>文字或圖片</Td>資料格(欄)標籤，第三個就再加一次，依此類推。
表格縱向延伸 <Tr> ... </Tr> 標籤說明
HTML標籤及說明顯示結果
<Table Border="1">
<Tr><Td> 文字或圖片1 </Td></Tr>
下一步驟
往下列增加一組表格列位及(資料)欄位。
下一步驟也就是再複製一份上面這列<Tr> ... </Tr> 完整標籤
<Tr><Td> 文字或圖片2 </Td></Tr>
</Table>
文字或圖片1
文字或圖片2
表格縱向延伸一格，就只要增加一組<Tr><Td> ... </Td></Tr>完整標籤，第三組就再加一列，依此類推。
雖然<Tr> ... </Tr>已表示表格這一列，但是如果沒有<Td> ... </Td>資料格(欄)標籤，還是無法顯示的。
表格橫、縱向延伸標籤組合說明
HTML標籤及說明顯示結果
<Table Border="1">
<Tr><Td> 文字或圖片1-1 </Td><Td> 文字或圖片1-2 </Td></Tr>
下一步驟技巧同上面要領，用複製的方式
下一步驟再增加上面這列 <Tr> ... </Tr> 完整標籤即可。
<Tr><Td> 文字或圖片2-1 </Td><Td> 文字或圖片2-2 </Td></Tr>
</Table>
文字或圖片1-1 文字或圖片1-2
文字或圖片2-1 文字或圖片2-2
技巧：先完成一份橫向連續的 2 格表格，用複製的方式再增加這組<Tr><Td> ... </Td></Tr>標籤就可以。
不管要幾個橫、縱向延伸表格，製作規則及順序都是用這樣方式來思考製作，簡單又好用，不是嗎？