如何在文章中插入表格

《独立博客导航》系列的文章结构都是靠表格支撑的，之前用前～博客修改过的主题时，不管是 IE6 还是 FireFox，那些表格都可以正常显示。

换上目前这个 Citrus Theme 主题之后，不管是 IE 还是 FireFox，已有文章上的表格都不能正常显示。

在 FireFox 下还好，可以看到中间的线条，如下图：

而在 IE 下则一条线都看不见，如图：

正确的完整的显示应该是这样子的：

这个问题折腾我相当长一段时间，我曾经请教过 Citrus Theme 的作者，但是人家只提供有偿服务，每小时100美金，于是作罢。

后来自己有折腾过几次 Style.css 文件，最终还是没有找到解决的方法。

昨天终于在 Somacon 找到一个解决的方法，不用修改 Style.css 文件，而是直接修改文章中的表格。

方法很简单：

1、复制以下代码

<style type="text/css">
table.sample {
border-width: 1px 1px 1px 1px;
border-spacing: 2px;
border-style: outset outset outset outset;
border-color: gray gray gray gray;
border-collapse: separate;
background-color: white;
}
table.sample th {
border-width: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
border-style: inset inset inset inset;
border-color: gray gray gray gray;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
border-width: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
border-style: inset inset inset inset;
border-color: gray gray gray gray;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}
</style>

<table class="sample">
<tr>
<th>Header</th>
<td>Content</td>
</tr>
</table>

2、把代码粘贴到文章的开头

在 HTML 编辑模式下，把代码粘贴上去，你会看到下图：

3、调整表格

你可以任意调整表格的尺寸、行数、列数；

你可以增加或者修改表格里面的内容；

你可以在表格的上面或者下面输入文章或者插入图片、视频。

把文章写完发表到你的博客上，文章里面的表格就可以在 IE 和 FireFox 等浏览器上如实的显示了，不过听说不支持 Opera 8 和 IE 5（很少人用这两个浏览器了吧？）。

4、设置表格的外观

如果你已经点击了上面提到的 Somacon 网站，你就会发现其实上面的那些代码是可以修改的，你可以更改表格的背景颜色、边框的颜色、边框的粗细、表格的形状，等等，如图：

如果你有更好的插入表格的方法，欢迎分享。

其实，我更喜欢通过修改 Style.css 的方法使得表格可以正常显示，因为那可以不用每次都在文章中插入一大堆代码。

相关博文：

1. 博客导航系列之法律类独立博客
2. 博客导航系列之军事/政治类独立博客
3. 博客导航系列之财经类独立博客
4. 博客导航系列之影音类独立博客
5. 博客导航系列之体育类独立博客