在WordPress中手工编写HTML表格管理资料

在WordPress中手工编写HTML表格 -
管理资料
在 WordPress 文章中手动创建一个表格，也就是一个使用 HTML 语言编写的表格，
在WordPress中手工编写HTML表格。

这对于那些只是偶尔用到表格工具的 WPer 几乎是必须掌握的方法。

当然如果怕麻烦，还是使用 WordPress 表格插件吧，下面的方法只适合不怕麻烦、喜欢折腾的人用。

1、前言
因为这篇文章是面向新手的，所以需要先介绍一些基础知识。

首先就是构成一个美观表格的要素：框架（使用 HTML 代码实现）和样式（由 CSS 样式来实现）。

我们可以在写 HTML 表格代码的时候直接将样式（如表格行高度、行宽度、线型、背景色、文字位置等）使用style="{将对应的样式写在这里}"这样的方法写在表格元素标签里，也可以单独使用 CSS 来写，然后在表格元素里引用。

下面为了与当前网页设计的趋势相一致，同时使之看起来美观、直接，而且还方便以后修改样式，我将采取后一种方法来处理表格的样式。

其次是表格的结构，包括表头（thead，一般指第一行，用于表示该列数据的类别/属性等；非必须）、表尾（tfoot，一般指最后一行，用于注释说明等；非必须）、表体（tbody，表头和表尾之间的部分，必须）。

另外，这些标记，如与、与、与等等都是成对出现的，不能遗漏。

然后是 WordPress 编辑模式。

在 WordPress 后台编辑文章的时候可以有 2 种方式来写：可视化和 HTML。

如下图所示。

写表格 HTML 代码时应该切换到 HTML 模式。

WordPress 后台编辑器的 2 种编辑模式：可视化与 HTML
2、编写 HTML 表格
下面就来说明一个基本表格的HTML 应该怎么写。

使用代码和注释相结合的方法来说明。

下面的代码中，黑色是表格 HTML 代码，银色且用标记包围的部分是对其前面代码的注释说明。

实际应用的时候请删除这些标记。

（本文结尾会提供不包含注释的代码以及示例。

）
<TABLE class="post-table"<span><!-- 指明应用于该表格的样式的类,名称为
post-table --></span>width="500px"<span><-- 在定义类 .post-table 的时候可能已经指明了宽度，但是这里想修改一下 --></span>><span><!-- 标志表格的开始 --
></span><THEAD><span><!-- 表头开始标志 --></span><TR><span><!-- 表格一行开始的标志 --></span><TH><span><!-- 一个单元格的开始，突出是表头所以用 th，也可以用 td，可以将这里的表格与本文后面的例子进行对比 --></span>列1<span><!-- 该单元格中的内容 --></span></TH><span><!-- 该单元格结束 --></span><TH
COLSPAN="2"<span><!-- 指明该单元格跨2列 --></span>>列2和列3合并成一个单元格</TH> </TR> <TR><span><!-- 表头的第二行开始 --></span><TH>列1第2行</TH> <TH>列2第2行</TH> <TH>列3第2行</TH> </TR> </THEAD><span><!-- 表头结束标志 --></span><TBODY><span><!-- 表体开始标志 --></span><TR><span><!-- 表体第1行开始标志 --></span><TD>表体列1行1</TD> <TD>列2行1</TD> <TD
ROWSPAN="2"<span><!-- 指明该单元格跨2行 --></span>>列3行1、2</TD> </TR> <TR><span><!-- 表体第2行开始标志 --></span><TD>表体列1行2</TD> <TD>列2行2</TD><span><!-- 因为上面一单元格跨了2行，这个单元格就不要再写了 --
></span></TR><span><!-- 还可以写更多行 --></span></TBODY><span><!-- 表体结束 --></span><TFOOT><span><!-- 表尾开始 --></span><tr> <td colspan="3">这是表尾</td> </tr><span><!-- 这里类似表体那样加上行，如果不需要，可以连同前面的
<TFOOT> 及后面的 </TFOOT> 一起删除 --></span></TFOOT><span><!-- 表尾结束 --></span></TABLE><span><!-- 表格结束 --></span>
上面只是简单的举个例子，还可以根据需要进行扩充：无非就是增加行和/或列，或者合并单元格等，
管理资料
《在WordPress中手工编写HTML表格》。

这只是个框架，要想让它好看些，还得用下面的样式来修饰。

3、准备 CSS 样式
前面举例子的时候给应用了一个样式类 post-table，比如我用的一个样式类是这样定义的（下面 /* 与 */ 之间的内容是注释说明）：
<span>/* table */</span>.post-table {<span>/* 注意 post-table 前有个英文半角的小圆点 */</span>font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;<span>/* 字体 */</span>font-size: 12px;<span>/* 字体大小 */</span>margin: 15px 30px; width: 520px; text-align:center;
border-collapse: collapse;}.post-table th {<span>/* 表头单元格 th 的样式
*/</span>padding: 8px; font-weight: normal; font-size: 14px; color:
#039; background: #b9c9fe;}.post-table td {<span>/* 表格单元格 td 的样式
*/</span>padding: 8px; background: #e8edff; border-top: 1px solid #fff; color: #669;}.post-table tbody tr:hover td {background:
#d0dafd;}<span>/* 有鼠标悬停的时的行背景色 */</span>
将编辑好的 CSS 代码放在主题文件夹中的style.css文件的结尾，保存并上传到服务器即可。

（如果上传新的 CSS 样式后，刷新页面看不到效果，这是因为浏览器缓存了旧样式表，请按 Ctrl+F5 来彻底刷新页面。

）
表格展示样式的设计就各凭所好了，可以花样百出。

可以看看这里推荐的几个样式。

4、示例
用上面举例时的结构和样式形成下表：
列1列2和列3合并成一个单元格列1第2行列2第2行列3第2行表体列1行1列2行1列3行1、2表体列1行2列2行2这是表尾
如果有什么不完善或者错漏的，请留言指出。

有关表格标签和 CSS 的更详细说明，请参考/tags/tag_table.asp 。

5、附不包含注释的代码¶
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;}。