一、嵌入后日志中的表格示例

1. 涂鸦样式

涂鸦表格样式

2. 仿Google的表格样式

仿Google的表格样式

 

二、为什么要嵌入自定义表格样式

在写日志时,有时需要插入表格。而默认的表格样式很丑,一般博客主题中又没有为日志中的表格设定样式。你当然可以自己做个主题,并在主题中对日志的表格设定样式。但是做整个的博客主题工作量比较大。而且,就算你真的打算这样做,那么其中仍然有个环节,就是将日志表格样式嵌入到自己写的博客主题中去。

好了,现在有个已经做好的博客主题,不管是下载的,还是自己做的,让我们将表格样式嵌入到里面去。

三、步骤

  1. 准备好一个表格样式的CSS文件(如tables.css),将它添加到对应的主题目录的css文件夹下(~/themes/<主题目录名,如Boldy>/css/),如下图:
    1. image
  2. 如果在css中引用了某些图片,则将那些图片添加到对应主题目录的images文件夹下((~/themes/<主题目录名,如Boldy>/images/)。如下图:
    1. image
  3. 打开对应主题根目录下的site.master文件,添加对css文件的引用:
    1. image

四、在日志中如何使用

在写完日志后,对其中添加的表格,切换到源代码视图,给相关的表格添加上CSS样式即可。

如:

image

五、示例表格样式文件

在本博客前面的日篇日志中,曾介绍了两种样式的表格(涂鸦表格样式仿Google样式的表格),现在将这两种样式代码整合到一个CSS文件中,并嵌入到博客里面。该文件可以从下面的链接下载:

tables.css (3.72 kb)

此样式用到了一张背景图片,此图片可以从以下链接下载:

bar.gif (673.00 bytes)

 

 

[donate: www.zizhujy.com]