本週課程中，學員都練習了網頁表格的建立，也認識了網頁表格相關的HTML標籤與基本屬性設定。雖然第一個表格網頁已經完成，大多數的人也已經成功上傳到個人的網站中，但因課堂上的時間有限，雖然完成了，難免還有一些疑惑；我們在這裡就綜合學員課堂上的問題，將這些困惑解答如下。已經會的學員，就當它是複習吧，溫故可以知新！何況，有一些我們在課堂上還沒提到...
A.網頁表格的HTML標籤以<table ...>為起始標籤，以</table>為結束標籤。
起始標籤<table ...>中常見的屬性設定有：
1. 表格寬度的 width 屬性值有兩種設定方式
a. 以實際像素值(pixel,整數)表示，例如 width="778"
b. 以相對於螢幕解析度的百分比表示，例如 width="80%"
2. 表格框線寬度的 border 屬性值以像素值(整數)表示，例如 border="2"
3. 表格儲存格之間的間距 cellspacing 屬性值以像素值(整數)表示
例如 cellspacing="3"
4. 儲存格線與資料間的間距 cellpadding 屬性值以像素值(整數)表示
例如 cellpadding="2"
5. 表格背景圖片 background 屬性值以圖片的路徑表示
例如 background="images/pic1.jpg"
6. 表格背景顏色 bgcolor 屬性值(設定前項背景圖時會被遮蔽)
以#rrggbb顏色值或已定義的顏色名稱表示(請參考先前文章)
B.表格橫列(row)的HTML標籤以<tr>為起始標籤，以</tr>為結束標籤。
表格各列的起始標籤 <tr> 中通常沒有屬性設定
C.表格直欄(column)的HTML標籤以<td ...>為起始，以</td>為結束。
(標籤命名的由來是因為各欄為實際存放資料的 data cell)
每列各欄的起始標籤 <td ...> 中常見的屬性設定有：
1. 該欄寬度的 width 屬性值有兩種設定方式
a. 以實際像素值(整數)表示，例如 width="120"
b. 以相對於表格總寬度的百分比表示，例如 width="20%"
2. 該欄資料的水平對齊 align 屬性值(預定為"left"靠左對齊)
a. align="center" 為置中對齊
b. align="right" 為靠右對齊
3. 該欄資料的垂直對齊 valign 屬性值(預定為"middle"置中對齊)
a. align="top" 為靠上對齊
b. align="bottom" 為靠下對齊
4. 儲存格跨欄合併的 colspan 屬性值
colspan="3" 表示該儲存格合併3欄
5. 儲存格跨列合併 rowspan 屬性值
rowspan="2" 表示該儲存格合併2列
6. 表格背景圖片 background 屬性值以圖片的路徑表示
例如 background="images/pic2.jpg"
7. 表格背景顏色 bgcolor 屬性值(設定前項背景圖時會被遮蔽)
D.表格標題欄(header)的HTML標籤以<th ...>為起始，以</th>為結束。
標題欄中的資料預定以水平置中、粗體字的方式呈現(也可以加以設定)。
表格是網頁設計時最好用的資料(包括文字、圖片、影片...等)定位工具。別忘了，在HTML中，無論多少連續的空白(包括Space、Tab、Enter、Ctrl+Enter)都將被視為是一個Space空白而已；所以，編寫HTML內容時，以往在Word中養成的定位習慣是行不通的。因此，想要好好地將網頁上的資料放在你想要的位置上，你最好熟悉HTML表格的撰寫，否則，你的麻煩就大了。雖然，透過網頁編輯軟體，你也是可以使用以往在Word中的方式來定位網頁上的資料(因為網頁編輯軟體會將你的Space鍵翻譯成 、Tab鍵翻譯成四個 、Enter鍵翻譯成<p></p>、Ctrl+Enter鍵翻譯成<br>)，但是，這樣的定位方式不但會讓你的網頁檔案變大，而且HTML內容也會變得很難解讀與維護；更麻煩的是，往往你在網頁編輯軟體中所定位的效果並非用瀏覽器所看到的實際結果。
我的名言是，如果你網頁的HTML內容中出現連續四個以上的 (Space空白)，請不要跟人家說你的網頁設計是我教的！我，一定會否認...
請看以下的表格範例HTML內容，他們將產生圖示的網頁效果：
<table border="5" cellpadding="10" cellspacing="3"
bordercolor="#008080" width="80%">
<tr>
<td width="30%">ABC</td>
<td width="40%" colspan="2" align="center">DEF</td>
<td width="30%" align="right">GHI</td>
</tr>
<tr>
<td width="30%" rowspan="2" valign="top" align="right"
bgcolor="#FFFF00" background="images/pyj_180x226.jpg">JKL</td>
<td width="20%">MNO</td>
<td width="20%" bgcolor="#FFFF00">PQR</td>
<td width="30%" align="right">STU</td>
</tr>
<tr>
<td width="70%" colspan="3" bordercolor="#FF0000">VWX</td>
</tr>
</table>
我想請問，當我將這些資料複製到我的筆記本中，全文並沒有像老師所寫的這樣，段落分明，記事本下面都有出現水平軸，這樣再看的時候，都要去轉動水平軸，相當不方便，有什麼方法，不要有水平軸，請老師幫我解答
喔！這簡單。只要在記事本視窗上方的 " 格式 " 功能表中將點按〝自動換行〞即可。一但勾選了自動換行，視窗下方就不會出現水平捲軸啦。
記事本雖然是一個非常陽春的軟體，但它可是很好用耶，任何你從其他檔案(例如：網頁、Word...)上複製下來的文字資料，只要將它們貼在記事本中，那所有的格式都會消失無蹤，只剩下〝純文字〞ㄌ。你只要將這些文字複製後貼到任何可以輸入文字的地方，就等同你一下子打了那麼多的字，這些文字會承接你貼入處的格式，而不是原來的樣式喔。
以前人家給我的Word檔，在轉製為網頁前，我都會先將Word檔另存為.txt的存文字檔，這樣，我就不需要再去打那些字了。反之，如果你想取出Word、PowerPoint檔中的圖片時，你就必須要將它們另存成Web網頁，轉存成網頁後，在該網頁的同一資料夾中會出現一個XXX.file的子資料夾，該檔案中的所有圖片會被存入在該資料夾中，要怎麼用，就隨便你啦！
在 "jkl"的圖片中, 只有"width=30%" , 可是並沒有講到heigh
所以我仍不懂要如何設定他的高度
ㄚ～.偶講夠了啊！限定表格的高度是沒意義的，因為表格會自動因為內容物而擴展，之所以限定寬度，是為了不想產生左右的視窗拉把(但，除了文字外，其他的內容也不受限制)...
妳的問題是出在你自己電腦上的圖片長、寬壓縮比例不同，或者是你在HTML中的<img標籤中沒有按照比例調整顯示圖片區域的長、寬！......跟表格完全無關！
<table border="5" cellpadding="10" cellspacing="3"
bordercolor="#008080" width="80%">
<tr>
<td width="30%">ABC</td>
<td width="40%" colspan="2" align="center">DEF</td>
<td width="30%" align="right">GHI</td>
</tr>
<tr>
<td width="30%" rowspan="2" valign="top" align="right"
bgcolor="#FFFF00" background="images/pyj_180x226.jpg">JKL</td>
<td width="20%">MNO</td>
<td width="20%" bgcolor="#FFFF00">PQR</td>
<td width="30%" align="right">STU</td>
</tr>
<tr>
<td width="70%" colspan="3" bordercolor="#FF0000">VWX</td>
</tr>
</table>