标签 表格 下的文章

Typecho设置表格样式

前言：

正如大家看到的，本博客使用R-Blog主题。这个主题风格简洁，但有些地方可能不完善，如下所示，表格的样式也太过简洁了，不仔细看都不知道这有个表格，以至于影响到阅读。作者已经好多年没有更新了，于是需要我自己想办法解决这个问题。本人在HTML与CSS方面没有任何系统的学习经验，更不懂PHP语言。本文只是对问题解决的记录，若有错漏请各位指正。

原始表格样式

开搞：

首先，我大致看了一下Typecho文件结构，文章看样子是由./var/HyperDown.php从Markdown生成的，那表格也是由它产生。而主题以文件夹形式放在./usr/themes/下面。这个结构，想来表格生成的那边不能随意改动，只能动主题文件夹里的内容。看了下主题文件夹中的内容，是一些PHP文件和一个CSS文件。

搜索引擎简单搜了一下，了解到PHP文件在服务端运行，产生HTML文档给用户的浏览器。HTML（HyperText Markup Language）是超文本标记语言，由多种通过标签定义的元素组成，表格元素由<table>标签定义。CSS（Cascading Style Sheets）中文叫层叠样式表，用所谓的样式规则来定义HTML元素如何显示，而且它是层叠的。一条CSS规则由前部的选择器和跟在后面大括号中的一条或多条声明构成，每条声明则由一个属性名和对应的值组成。

如此看来，我想要修改表格显示的样式，就要改表格相关的CSS规则。我先去网上找了几位大佬们的博客快速的浏览了一番。为自己积累一些经验，顺便F12学习一下他们表格元素的某些样式对应CSS规则中什么属性。经过一番粗略的学习，我拥有了低级的审美观念，也了解了极为有限的一部分CSS属性名的作用，接下来就是学以致用了。

R-Blog主题CSS文件只有一个，结构极为简单，打开改就完了。读书破万卷，下笔也不定有神。我先将前面学到的、我认为有用的规则写出来，然后浏览器浏览实际效果，通过F12调试功能，增删改这些规则，最终再据此修改CSS文件中的规则。经过一段时间的尝试，最终我将table相关规则替换成了以下内容：

table{width:50%;border-spacing:1px;background-color: #22aaef;border: 1.5px solid #22aaef;}
table thead tr{font-size: 17px;color: #22aaef;background-color: #DDD;}
table thead tr th{padding: 4px;}
table tbody tr{background-color: #FFF;}
table tbody tr td{padding: 4px;}
table tbody tr:nth-child(2n){background-color: #e5fcfd;}

浏览器中按Ctrl+F5刷新后，表格出现了神奇的变化。最终效果如下，我感觉还是挺满意的，大家可以评论区告诉我好不好看。

修改后的表格效果

参考：