開始使用 HTML 製作簡單的表格

HTML 表是迄今為止創建的最好的 HTML 語句之一。 使用表格語句格式化網頁的能力令人驚嘆！ 學習他們，使用他們，愛他們！

基本表：

讓我們把我們在列表教程中使用的雜貨清單做成一個表格。 我們將把商品放在第一列，將價格放在第二列。

這是實現它的代碼。 實際代碼在左邊，英文描述在右邊。 描述縮進以顯示表語句的“結構”。

使困惑？ 好的，讓我們看看上面的表格。 這個表其實很簡單。 你建立表格的方式與閱讀書籍的方式非常相似； 從左到右，從上到下。 表格以<table>標記開始，以</table>標記結束。 每行以<tr>標記開始，以</tr>標記結束。 每條表數據都以<td>標記開始，以</td>標記結束。

但是，那不是一張桌子，你說！ 它沒有邊框！ 其實就是一張桌子。 這是一個沒有邊框或BORDER=”0″的表格。 當您想使用TABLE語句來格式化您的網頁時，這個概念非常重要。 你並不總是想要一個厚邊框。 好的，這次讓我們用BORDER製作一張桌子。

此表與上一個表之間的唯一區別是<table>語句，如下所示。

<表格邊框=”7″>

很容易吧？ 邊框的大小以像素表示。 好的，現在讓我們來多一點CELLSPACING 。 這是我們表格單元格之間的間距。 您也可以將其視為表格單元格之間的壁厚。

那看起來好多了。 你能看到差別嗎？ 同樣，唯一的變化是在<table>語句中，如下所示。

<表格邊框=”7″ 單元格間距=”7″>

CELLSPACING與BORDER一樣，也以像素為單位。 但是，你說，文字看起來太靠近桌牆了！ 好的，好的，我們也可以解決這個問題。 它被稱為CELLPADDING 。 它是細胞內容物和細胞壁邊緣之間的空間。

啊，現在是你想要的方式嗎？ 不？ 好吧，我不得不誇大一些數字，但這只是為了說明一點。 我希望你能看到不同之處。 上一個表是使用如下所示的<table>語句創建的。

<表格邊框=”7″ 單元格間距=”7″ 單元格填充=”7″>

構圖：

現在我們想進入更有趣的東西。 構圖是增強圖片的好方法。 這讓他們似乎直接跳出頁面。 這是我的5秒傑作。

很酷的藝術品，它甚至讓我討厭的照片看起來不錯。 這是實現它的代碼。

<表格邊框=”7″ alt=””>
<tr>
<td><img src=”image.gif”></td>
</tr>
</table>

如果您願意，可以省略<tr>標籤和</tr>標籤。 它仍然可以正常工作。 HTML 純粹主義者可能會爭辯說這些標籤需要在那裡。 如果您像我通常那樣有這種感覺，請使用它們。

或者您也可以使用如下所示的文字框住您的圖片。

內托，哈！ 代碼如下所示。

<表格邊框=”7″ cellpadding=”10″>
<tr>
<td><img src=”image.gif” alt=””></td>
<td>真是一個<br>傑作！</td>
</tr>
</table>

我還有一個關於構圖的注意事項。 如果您在將圖像居中時遇到問題，請嘗試以下操作。

<td align=”center”><img src=”image.gif”></td>

裝幀鏈接：

您還可以將鏈接放在表格中。 事實上，如果你願意的話，你可以將整個頁面放在一堆表格命令中，並且使用BORDER=”0”沒有人能真正分辨出來。 你問為什麼要這樣做？ 用於在您的頁面上將圖像和文本一起格式化； 想想看。 好的，回到鏈接框架。

這是執行此操作的代碼。

<表格邊框=”7″ cellpadding=”10″>
<tr>
<td><a href=”http://www.google.com/”>Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>雅虎！</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/">JJW 設計</a></td>
<td><a href=”http://www.iproundup.com/”>IP 綜述</a></td>
</tr>
</table>

好吧，我希望你喜歡<table>語句的這一小節。 您可以使用<table>語句做的事情比本教程所能做的要多得多。 不過，我希望這有所幫助。

鏈接到本教程！

您覺得本教程有幫助嗎？ 如果是這樣，請幫助我通過鏈接與他人分享。 只需將下面的 HTML 代碼放到您自己的網頁上即可創建指向本教程的鏈接。