在 WordPress 文章中手動創建一個表格，也就是一個使用 HTML 語言編寫的表格。這對於那些只是偶爾用到表格工具的 WPer 幾乎是必須掌握的方法。當然如果怕麻煩，還是使用 WordPress 表格外掛吧，下面的方法只適合不怕麻煩、喜歡磨練的人用。

1、前言

因為這篇文章是針對新手的，所以需要先介紹一些基礎知識。

首先就是構成一個美觀表格的要素：框架（使用 HTML 代碼實現）和樣式（由 CSS 樣式來實現）。我們可以在寫 HTML 表格代碼的時候直接將樣式（如表格行高度、行寬度、線型、背景色、文字位置等）使用 style="{將對應的樣式寫在這裡}" 這樣的方法寫在表格元素標籤裡，也可以單獨使用 CSS 來寫，然後在表格元素裡引用。下面為了與當前網頁設計的趨勢相一致，同時使之看起來美觀、直接，而且還方便以後修改樣式，我將採取後一種方法來處理表格的樣式。

其次是表格的結構，包括表頭（thead，一般指第一行，用於表示該列資料的類別/屬性等；非必須）、表尾（tfoot，一般指最後一行，用於注釋說明等；非必須）、表體（tbody，表頭和表尾之間的部分，必須）。另外，這些標記，如 <table> 與 </table>、<thead> 與 </thead>、<td> 與 </td> 等等都是成對出現的，不能遺漏。

然後是 WordPress 編輯模式。在 WordPress 後台編輯文章的時候可以有 2 種方式來寫：視覺化和 HTML。如下圖所示。寫表格 HTML 代碼時應該切換到 HTML 模式。

2、編寫 HTML 表格

下面就來說明一個基本表格的 HTML 應該怎麼寫。使用代碼和注釋相結合的方法來說明。

<TABLE class="post-table"<!-- 指明應用於該表格的樣式的類,名稱為 post-table --> width="500px"<-- 在定義類 .post-table 的時候可能已經指明了寬度，但是這裡想修改一下 --> ><!-- 標誌表格的開始 -->
 <THEAD><!-- 表頭開始標誌 -->
 <TR><!-- 表格一行開始的標誌 -->
 <TH><!-- 一個儲存格的開始，突出是表頭所以用 th，也可以用 td，可以將這裡的表格與本文後面的例子進行對比  -->列1<!-- 該儲存格中的內容 --></TH><!-- 該儲存格結束 -->
 <TH COLSPAN="2"<!-- 指明該儲存格跨2列 -->>列2和列3合併成一個儲存格</TH>
 </TR>
 <TR><!-- 表頭的第二行開始 -->
 <TH>列1第2行</TH>
 <TH>列2第2行</TH>
 <TH>列3第2行</TH>
 </TR>
 </THEAD><!-- 表頭結束標誌 -->
 <TBODY><!-- 表體開始標誌 -->
 <TR><!-- 表體第1行開始標誌 -->
 <TD>表體列1行1</TD>
 <TD>列2行1</TD>
 <TD ROWSPAN="2"<!-- 指明該儲存格跨2行 -->>列3行1、2</TD>
 </TR>
 <TR><!-- 表體第2行開始標誌 -->
 <TD>表體列1行2</TD>
 <TD>列2行2</TD>
 <!-- 因為上面一儲存格跨了2行，這個儲存格就不要再寫了 -->
 </TR>
 <!-- 還可以寫更多行 -->
 </TBODY><!-- 表體結束 -->
 <TFOOT><!-- 表尾開始 -->
 <tr>
 <td colspan="3">這是表尾</td>
 </tr>
 <!-- 這裡類似表體那樣加上行，如果不需要，可以連同前面的 <TFOOT> 及後面的 </TFOOT> 一起刪除 -->
 </TFOOT><!-- 表尾結束 -->
</TABLE><!-- 表格結束 -->

上面只是簡單的舉個例子，還可以根據需要進行擴充：無非就是增加行和/或列，或者合併儲存格等。

3、準備 CSS 樣式

前面舉例子的時候給 <table> 應用了一個樣式類 post-table，比如我用的一個樣式類是這樣定義的（下面 /* 與 */ 之間的內容是注釋說明）：

/* table */
.post-table { /* 注意 post-table 前有個英文半形的小圓點 */
 font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;/* 字體 */
 font-size: 12px; /* 字體大小 */
 margin: 15px 30px;
 width: 520px;
 text-align:center;
 border-collapse: collapse;}
.post-table th { /* 表頭儲存格 th 的樣式 */
 padding: 8px;
 font-weight: normal;
 font-size: 14px;
 color: #039;
 background: #b9c9fe;}
.post-table td { /* 表格儲存格 td 的樣式 */
 padding: 8px;
 background: #e8edff;
 border-top: 1px solid #fff;
 color: #669;}
.post-table tbody tr:hover td {background: #d0dafd;} /* 有滑鼠懸停的時的行背景色 */

將編輯好的 CSS 代碼放在主題資料夾中的 style.css 檔的結尾，保存並上傳到伺服器即可。（如果上傳新的 CSS 樣式後，刷新頁面看不到效果，這是因為流覽器緩存了舊樣式表，請按 Ctrl+F5 來徹底刷新頁面。）

4、附不包含注釋的代碼

HTML:

<table class="post-table" width="500px">
<thead>
<tr>
<th>列1</th>
<th colspan="2">列2和列3合併成一個儲存格</th>
</tr>
<tr>
<th>列1第2行</th>
<th>列2第2行</th>
<th>列3第2行</th>
</tr>
</thead>
<tbody>
<tr>
<td>表體列1行1</td>
<td>列2行1</td>
<td rowspan="2">列3行1、2</td>
</tr>
<tr>
<td>表體列1行2</td>
<td>列2行2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">這是表尾</td>
</tr>
</tfoot>
</table>

CSS:

/* table */
.post-table-sample {
 font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 font-size: 12px;
 margin: 15px 30px;
 width: 500px;
 text-align:center;
 border-collapse: collapse;}
.post-table-sample th {
 padding: 8px;
 font-weight: normal;
 font-size: 14px;
 color: #039;
 background: #b9c9fe;}
.post-table-sample td {
 padding: 8px;
 background: #e8edff;
 border-top: 1px solid #fff;
 color: #669;}
.post-table-sample tbody tr:hover td {background: #d0dafd;}

相关文章