使用表格排版1：結構對齊
雖然這樣說很令人吃驚～向來不建議使用表格做網頁排版的我，今天這個標題實在可以上報紙頭條了。而「使用表格做網頁排版」系列，也並不是使用表格來做出合理的網頁排版。而是我們來借用表格，來解惑使用表格排版，會產生哪些不穩定的因素，以及要注意哪些設定事項。並且藉由表格，來讓大家對更正確的網頁排版方式有更明確的概念，未來，就可以更輕鬆的使用CSS排版，脫離table排版的魔咒了！
表格排版，要注意結構對齊
什麼是結構對齊，首先，我們必須要瞭解表格的HTML碼，表格的原始碼是HTML結構中最常見，最複雜的結構，因為多數網頁設計師都用表格排版，所以也算是也是讓HTML混亂的元兇之一。以下是表格不考慮所有屬性時，二欄二列的原始碼：
第一列第一欄 第一列第二欄 第二列第一欄 第二列第二欄 <table>
<tr>
<td>第一列第一欄</td><td>第一列第二欄</td>
</tr>
<tr>
<td>第二列第一欄</td><td>第二列第二欄</td>
</tr>
</table>
我們可以看見表格是用<table><tr><td>這三種標籤組合而成的，以下我們簡單的替這三個標籤做介紹
- <table>表格父標籤：表格的最父層結構，他本身可以做到表格與頁面間對齊方式、欄內內距、欄內行距設定，邊框寬度與邊框顏色，整個表格的寬度還可以指定所有欄標籤背景色。
- <tr>表格列標籤：表格的列結構，統整欄位高度，一般在看網頁的時候看不見他的視覺效果，但卻是使用表格排版時扮演最重要的角色。他可以控制所管轄的該列背景色，邊框顏色，背景顏色，背景影像，欄內對齊方式。
- <td>表格欄標籤，表格的最小結構，主要目的是讓網頁設計師放置文字，圖案等作用，可以控制本身的邊框顏色，背景顏色，欄內對齊方式。
表格的欄標籤與欄標籤，列標籤與列標籤之間會相互牽制。所以沒辦法做出不對齊的列或是不對齊的欄。如右圖，雖然在一個表格中切的出來，但是卻沒辦法讓所有切好的欄位，都具有自己的寬度與高度，換言之，欄位們會各被所屬的列所牽制著，當超出指定寬度與高度時，整個版面即會破裂。
因此，要做出右圖般複雜的欄與列排版，就要使用很多表格來幫忙完成，我會先做一個四列一欄的表格，然後在第二列中，再置入一個一列五欄的表格，下面依次，第三列與第四列再各置入一個二欄的表格；再回到第三列的第一欄放入一個六列的表格，第二欄放入一個二列的表格。看不懂上面步驟說明的，這裡有影片可以讓您觀看我是如何建構右圖的複雜排版的。
|