本節書摘來自異步社區《HTML、CSS、JavaScript 網頁制作從入門到精通》一書中的第6章，第6.1節，作者：【美】John Resig（萊西格） , Bear Bibeault（貝比奧特) 譯者： 徐濤 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

第6章 使用表格

表格是網頁制作中使用最多的工具之一，在制作網頁時，使用表格可以更清晰地排列數據。但在實際制作過程中，表格更多地用在網頁布局定位上。很多網頁都是以表格布局的，這是因為表格在文本和圖像的位置控制方面都有很強的功能。靈活、熟練地使用表格，在網頁制作時會有如虎添翼的感覺。

學習目標

• 掌握創建表格
• 掌握設置表格基本屬性
• 掌握設置表格的邊框
• 掌握設置表格背景
• 掌握設置表格的行屬性
• 掌握調整單元格屬性

6.1 創建表格

表格是網頁排版布局不可缺少的一個工具，能否熟練地運用表格將直接影響到網頁設計的好壞。下面就講述表格的創建。

6.1.1 表格的基本構成table、tr、td
表格由行、列和單元格3部分組成，一般通過3個標記來創建，分別是表格標記table、行標記tr和單元格標記td。表格的各種屬性都要在表格的開始標記< table >和表格的結束標記 table >之間才有效。

• 行：表格中的水平間隔。
• 列：表格中的垂直間隔。
• 單元格：表格中行與列相交所產生的區域。
  語法：

說明：

< table >標記和< /table >標記分別表示表格的開始和結束，而< tr >和 tr >則分別表示行的開始和結束，在表格中包含幾組< tr>… tr >就表示該表格為幾行；< td >和< /td >表示單元格的起始和結束。

舉例：

在代碼中加粗部分的代碼標記是表格的基本構成，在瀏覽器中預覽可以看到在網頁中添加了一個2行2列的表格，表格沒有邊框，如圖6.1所示。

在制作網頁的過程中，一般都使用表格來排列網頁數據，如圖6.2所示。

6.1.2 設置表格的標題caption
可以使用來設置標題單元格，表格的標題一般位于整個表格的第1行。一個< table >表格只能含有一個表格標題。

語法：

舉例：

在代碼中加粗部分的標記為設置表格的標題，在瀏覽器中預覽，可以看到表格的標題，如圖6.3所示。

提示

使用標記創建表格標題的好處是標題定義包含在表格內。如果表格移動或在HTML文件中重定位，標題會隨著表格相應地移動。
6.1.3 表頭th
表格的表頭是單元格的一種變體，實質上仍是一種單元格。它一般位于第一行和第一列，用來表明這一行或列的內容類別。在一般情況下，瀏覽器會以粗體和居中的樣式顯示元素中的內容。

語法：

說明：

元素的起始標記必須有，但是結尾標記是可選的。

舉例：

在代碼中加粗部分的代碼標記為設置表格的表頭，在瀏覽器中預覽可以看到表格的表頭效果，如圖6.4所示。

總結

以上是生活随笔為你收集整理的《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章 使用表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。