吓我一跳

玩Wordpress好长时间了期间和很多同学交流过一些看法和认识，积累了一点经验，写这篇日志来谈一下Wordpress主题表格的美化技巧。对于HTML表格的认识我们最熟悉的就是<table></table>、<tr></tr>、<th></th>这三对Html标签，而<thead>、<tbody>、<caption>和<th>等却时常被我们忽视，下面就来看看如何使用css样式来美化Wordpress中的表格。

下面不妨使用这些标记写一个表格，如下：

<table border=”1″ summary=”summary定义的是摘要”>
<caption>caption定义的是首部说明</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<th>January</th>
<td>$100</td>
</tr>
<tr>
<th>February</th>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Sum</th>
<td>$180</td>
</tr>
</tfoot></table> 

说明：

1. th定义表格内的表头单元格，th 元素内部的文本通常会呈现为粗体。
2. tr 标签定义 HTML 表格中的行。
3. tr 元素包含一个或多个 th 或 td 元素。
4. td 标签定义 HTML 表格中的标准单元格。
   HTML 表格有两类单元格：
   • 表头单元 – 包含头部信息（由 th 元素创建）
   • 标准单元 – 包含数据（由 td 元素创建）

   td 元素中的文本一般显示为正常字体且左对齐。

然后，为其定义一个简单的css样式，如：

.post .content table {
 border-collapse:collapse;
 background:#fff;
 margin:5px 0 10px;
 border:1px solid #d6d6d6;
}
.post .content table thead tr th,
.post .content table thead tr td {
 background:#c2c2c2;
}
.post .content table tr th {
 border: 1px solid #d6d6d6;
 text-align:left;
 padding:5px 10px;
 background:#e6eae9;
}
.post .content table tr td {
 border:1px solid #d6d6d6;
 text-align:left;
 vertical-align:middle;
 padding:5px 10px;
 background:#fff;
}

最后就可以看到效果了，如下：

首部说明

Month	Savings
January	$100
February	$80
Sum	$180

说明：如果按照HTML的标准来写一个表格，非常容易去美化它；写表格的时候不用为其定义任何背景色、字体粗细等样式，css样式表中对表格标记或元素定义的样式会被自动运用到所有表格，关键是要按照标准来写表格。上面的样式只是一个简单的定义没有更细致地定义，如何你想要跟好的效果可以查阅HTML中关于表格的标记元素，然后再为其定义，最后不得不说的是，在Wordpress上使用表格的机会很少，同时也为了减少style.css文件的体积减少用户下载文件等待的时间，最好不要过于注重一些不常用环节的样式。当然了，本文不仅仅是针对Wordpress，只要在网站设计方面都可以使用的。