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

第6章 使用表格

表格是網(wǎng)頁制作中使用最多的工具之一，在制作網(wǎng)頁時(shí)，使用表格可以更清晰地排列數(shù)據(jù)。但在實(shí)際制作過程中，表格更多地用在網(wǎng)頁布局定位上。很多網(wǎng)頁都是以表格布局的，這是因?yàn)楸砀裨谖谋竞蛨D像的位置控制方面都有很強(qiáng)的功能。靈活、熟練地使用表格，在網(wǎng)頁制作時(shí)會(huì)有如虎添翼的感覺。

學(xué)習(xí)目標(biāo)

• 掌握創(chuàng)建表格
• 掌握設(shè)置表格基本屬性
• 掌握設(shè)置表格的邊框
• 掌握設(shè)置表格背景
• 掌握設(shè)置表格的行屬性
• 掌握調(diào)整單元格屬性

6.1 創(chuàng)建表格

表格是網(wǎng)頁排版布局不可缺少的一個(gè)工具，能否熟練地運(yùn)用表格將直接影響到網(wǎng)頁設(shè)計(jì)的好壞。下面就講述表格的創(chuàng)建。

6.1.1 表格的基本構(gòu)成table、tr、td
表格由行、列和單元格3部分組成，一般通過3個(gè)標(biāo)記來創(chuàng)建，分別是表格標(biāo)記table、行標(biāo)記tr和單元格標(biāo)記td。表格的各種屬性都要在表格的開始標(biāo)記< table >和表格的結(jié)束標(biāo)記 table >之間才有效。

• 行：表格中的水平間隔。
• 列：表格中的垂直間隔。
• 單元格：表格中行與列相交所產(chǎn)生的區(qū)域。
  語法：

說明：

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

舉例：

在代碼中加粗部分的代碼標(biāo)記是表格的基本構(gòu)成，在瀏覽器中預(yù)覽可以看到在網(wǎng)頁中添加了一個(gè)2行2列的表格，表格沒有邊框，如圖6.1所示。

在制作網(wǎng)頁的過程中，一般都使用表格來排列網(wǎng)頁數(shù)據(jù)，如圖6.2所示。

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

語法：

舉例：

在代碼中加粗部分的標(biāo)記為設(shè)置表格的標(biāo)題，在瀏覽器中預(yù)覽，可以看到表格的標(biāo)題，如圖6.3所示。

提示

使用標(biāo)記創(chuàng)建表格標(biāo)題的好處是標(biāo)題定義包含在表格內(nèi)。如果表格移動(dòng)或在HTML文件中重定位，標(biāo)題會(huì)隨著表格相應(yīng)地移動(dòng)。
6.1.3 表頭th
表格的表頭是單元格的一種變體，實(shí)質(zhì)上仍是一種單元格。它一般位于第一行和第一列，用來表明這一行或列的內(nèi)容類別。在一般情況下，瀏覽器會(huì)以粗體和居中的樣式顯示元素中的內(nèi)容。

語法：

說明：

元素的起始標(biāo)記必須有，但是結(jié)尾標(biāo)記是可選的。

舉例：

在代碼中加粗部分的代碼標(biāo)記為設(shè)置表格的表頭，在瀏覽器中預(yù)覽可以看到表格的表頭效果，如圖6.4所示。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。