表格的基本架構
：
繪製表格算是html語法中，比較難懂得一環了，因為變化很多，傲
楓想了很久，才想出一個淺顯易懂的方式來完成這一篇嘔心瀝血之
作。希望大家一定要一步一步的跟我做。
先介紹表格的基本架構
| 原始碼 | 結果 |
<table border="1">
<tr><td>1-1</td></tr>
</table>
|
|
<table>...</table>
代表一個表格的開始與結束。
border
用這個屬性來控制框線的粗細，數字越大，框線越粗，也就越有立
體感。
<tr>...</tr>
代表往下多增加一橫列。
<td>...</td>
代表在那一橫列中，往右多加一格。
現在我們練習畫一個 1 x 2 的表格。
１、先寫好一組<tr>...</tr>，如此一來我們就有一橫列了。
２、在<tr>...</tr>中加入兩組<td>...</td>，如此一來，在第一列中就
有兩格了。
３、在<td>...</td>中輸入任意文字，然後存檔，用瀏覽器看結果。
| 原始碼 | 結果 |
<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
</table>
|
|
現在我們練習畫一個 2 x 2 的表格。
１、先寫好兩組<tr>...</tr>，如此一來我們就有兩橫列了。
２、分別在<tr>...</tr>中加入兩組<td>...</td>，如此一來，每一列中
就都有兩格了。
３、在<td>...</td>中輸入任意文字，然後存檔，用瀏覽器看結果。
| 原始碼 | 結果 |
<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</table>
|
|
現在我們練習畫一個比較奇怪的，第一、第二列各有兩格，第三列
有三格。
１、先寫好三組<tr>...</tr>，如此一來我們就有三橫列了。
２、第一、第二列只需要兩格，所以在第一、第二組<tr>...</tr>中，
分別加入兩組<td>...</td>
３、第三列需要三格，故在第三組<tr>...</tr>中，放三組<td>...</td>
４、在<td>...</td>中輸入任意文字，然後存檔，用瀏覽器看結果。
| 原始碼 | 結果 |
<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
|
|
|
|
跨越的技巧
：
大家看了上一個範例，有沒有覺得第一、二列的右方很醜呢？沒關
係，傲楓教你一招，就是跨越的技巧。
先將上一個範例的表格整容一下。
| 原始碼 | 結果 |
<table border="1">
<tr><td>1-1</td><td colspan="2">1-2</td></tr>
<tr><td>2-1</td><td colspan="2">2-2</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
|
|
怎麼做到的呢？請看以下步驟：
１、先重複上一個範例的步驟１ ~ ３。
２、因為我們希望讓1-2與2-2，一共橫跨兩格， 所以我們分別在它
們的<td>中加入一個屬性colspan="2"
３、存檔後看結果。
有了橫跨，當然也有直跨的技巧囉！
| 原始碼 | 結果 |
<table border="1">
<tr><td>1</td><td rowspan="3">2</td><td>3</td></tr>
<tr><td>4</td><td>5</td></tr>
<tr><td>6</td><td>7</td></tr>
</table>
|
|
怎麼做到的呢？請看以下步驟：
１、因為有三列，所以先寫三組<tr>...</tr>。
２、通常 2這一格，認定為屬於第一列，所以第一列有三格，第二
、第三列各有兩格。
在第一組<tr>...</tr>中，加入三組<td>...</td>
在第二、第三組<tr>...</tr>，分別加入兩組<td>...</td>
３、我們希望讓 2，一共直跨三格，所以在它的<td>中加入一個屬性
rowspan="3"
４、存檔看結果。
多練習幾次，相信你會熟悉畫表格的方式。再複習一次：
colspan
代表橫跨。等號後面的數字，代表橫跨的格數。
rowspan
代表直跨。等號後面的數字，代表直跨的格數。
|
|
回上一章 水平線條 到下一章 表格進階
|