接受EVA同学的建议撰写此文, 本文会分为两篇日志来写, 基础篇和应用篇. 本文为基础篇, 但基础篇相对于应用篇来说, 可能更加抽象, 更不容易理解, 因为涉及的全部都是HTML(超文本标记语言)的内容. 但我仍觉得应该首先介绍这些知识, 原因有很多... 其中最重要的, 我认为首先理解一下HTML, 对使用网页编辑软件的上手, 以及对了解其它涉及HTML语言的操作有很大帮助.

而这篇文章的作用, 不仅限于在BLOG中撰写日志, 这在你编辑网页模板, 设计个人网页签名, 装饰淘宝网店等等方面都会有一定帮助.

那么废话不多说了, 正式开始.

有些时候, 我们可能需要在文章中插入一个简单的表格, 但是WordPress本身(以及其他一些BLOG服务的撰写功能)并没有插入表格的按钮来让我们方便的创建一个表格, 在不安装插件的情况下, 我们如何来插入表格呢? 这就需要我们切换到HTML源代码的模式下来编辑日志了.

首先来看下面这段代码:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>

这是一个最简单的2行2列的表格源代码. 从这段代码中, 你可以看出一个表格的HTML构成方式.

其中<table>标签表示一个表格的开始, </table>表示一个表格的结束, <tr><td></td></tr>来构成一个单元格. 而这里面的参数表示不同含义, 比如 border="1" 是表示这个表格的边框宽度为1像素. width="100%" 表示表格的宽度为百分之百自适应. 而 cellspacing="0" 和 cellpadding="0" 分别表示"填充"和"间距". 这段代码在页面中的显示效果如下:

内容1	内容2
内容3	内容4

下面我们来修改一下参数, 以便大家更容易理解.

还是上面那段代码, 我们现在要把表格的宽度设置为380像素, 表格边框的粗细设置为5像素, 填充和间距分别为2像素和3像素. 修改后的代码如下:

<table width="380px" border="5" cellspacing="2" cellpadding="3">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>

修改后的代码在网页中的显示效果如下:

内容1	内容2
内容3	内容4

如果你希望增加表格的行或列, 掌握好<tr>(列)和<td>(行)的嵌套关系, 修改对应的<tr>和<td>标签就可以了.

如何? 你现在是否对一个简单表格的HTML代码有了一定了解了呢?

下面我们来学习一些让表格"生动"起来的方法...

如果想让表格有背景颜色, 怎么做呢? 通过上面的学习, 如果你的悟性较高的话, 我想你应该差不多能猜到了, 通过一个表格参数的设置, 就可以了. 代码如下:

<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#66CCFF">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>

在网页中的显示效果如下:

内容1	内容2
内容3	内容4

注意到了吗? 和最初的代码相比, 在<table>表格的参数中, 又多了一个 bgcolor="#66CCFF" , 这就是表格背景色的参数了. 如果你的英文较好, 这个参数你应该很快就会记住了. bgcolor就是background color(背景色)的缩写而已. 这里需要特殊说明一下的是颜色值, 也就是引号中的那个66CCFF. 这个数值就是颜色的数值, 当然, 你也可以直接填写颜色的英文字母, 比如red(嘎嘎红), blue(蓝挖挖), pink(粉嘟嘟), 等等... 但毕竟英文单词有限, 而颜色近乎无限, 遇到那些无法用语言表达的颜色怎么办? 这时就需要用到颜色值了.

简单的介绍一下颜色代码表的规则...

颜色值虽然看起来是6个字符组成, 但它一共分为三个部分, 即: RRGGBB. R代表Red(红色), G代表Green(绿色), B代表Blue(蓝色). 也就是由"红绿蓝"三种颜色组合的颜色值. 如果你学过美术, 那么会很轻易的就理解了吧~ (美术课上都调过颜色吧? 呵呵...) 每一组数值都是由两个16进制的字符组成, 即从00到FF, 00表示颜色最深, FF表示颜色最亮. 比如黑色的颜色值就是000000, 白色的颜色值就是FFFFFF. 三组数值不同组合, 会有成千上万种颜色出现, 比如纯红色就是FF0000, 比纯红色浅一些的红色可以是EE0000, 也可以是DE0000, 等等等等... 关于颜色表, 你只需要做到了解它的组成方式就可以了, 你永远也不可能把所有颜色的色值背下来...

另外顺便提一下, 可能你有时会在很多CSS模板中看到用三个字符来定义色值的情况, 比如color=666. 其实道理是一样的, 都是三个数值代表红绿蓝三种颜色. 只不过这种3位数的组合与6位数的组合相比, 有很多很多颜色3位数的组合是没法表现出来的而已, 但输出上要节省三个字节的空间... 呵呵...

如果你学会了以上的表格知识, 那么下面我们继续来深入学习...

首先看下面的源代码:

<table width="260" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFCCFF">
<tr>
<td align="right">单元格A</td>
<td align="left">单元格B</td>
</tr>
<tr>
<td align="right">单元格C</td>
<td align="left">单元格D</td>
</tr>
<tr>
<td align="right">单元格E</td>
<td align="left">单元格F</td>
</tr>
<tr>
<td align="right">单元格G</td>
<td align="left">单元格H</td>
</tr>
</table>

在这段源代码中, 有多了一个参数 align. 这是一个使用率非常频繁的参数, 它的作用将控制表格中和单元格中内容的对齐方式, 左对齐(align="left"), 右对齐(align="right"), 或者居中对齐(align="center")... 在<table>的属性中添加这个参数, 作用是控制整个表格在网页位置中的对齐方式, 而在单元格中添加这个参数, 是控制单元格中的内容的对齐方式.

这段代码在网页中的显示效果如下:

单元格A	单元格B
单元格C	单元格D
单元格E	单元格F
单元格G	单元格H

最后, 我们再来看一段源代码:

<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFCCFF">
<tr>
<td align="center" style="border-bottom: 1px dotted #9966FF">单元格A</td>
<td align="center" style="border-left: 5px double #9966FF; border-bottom: 1px dotted #9966FF" bgcolor="#CCFFCC">单元格B</td>
</tr>
<tr>
<td align="center" style="border-bottom: 1px dotted #9966FF">单元格C</td>
<td align="center" style="border-left: 5px double #9966FF; border-bottom: 1px dotted #9966FF" bgcolor="#CCFFCC">单元格D</td>
</tr>
<tr>
<td align="center" style="border-bottom: 1px dotted #9966FF">单元格E</td>
<td align="center" style="border-left: 5px double #9966FF; border-bottom: 1px dotted #9966FF" bgcolor="#CCFFCC">单元格F</td>
</tr>
<tr>
<td align="center" style="border-bottom: 1px dotted #9966FF">单元格G</td>
<td align="center" style="border-left: 5px double #9966FF; border-bottom: 1px dotted #9966FF" bgcolor="#CCFFCC">单元格H</td>
</tr>
</table>

这段源代码你是否看着开始头大, 开始迷糊了? 呵呵... 其实不必紧张... 只看一个单元格的代码就够了, 其它的都是相同的...

在这段代码中, 更多的参数都是加在了单元格的控制中, 通过这种控制, 我们可以让一个表格看上去更漂亮...

下面简单的解释一下单元格里面的参数...

左侧的单元格和上面相比, 只多了 style="border-bottom: 1px dotted #9966FF" 这段参数... 如果你的英文好, 相比也根本不用我解释就会明白了... 我用中文的方法打出来, 大家一看就明白了, 当然, 这仅仅是为了便于理解, 根本就不存在用中文书写HTML的操作, 大家别误解. 样式="边框-下方: 1像素 虚线 #9966FF(颜色表值)" 如何? 是不是明白了?

有了对左侧单元格参数的理解, 再来看右侧单元格那一堆HTML就不会像刚才那么头大了...

右侧的单元格和之前的相比, 多了 style="border-left: 5px double #9966FF; border-bottom: 1px dotted #9966FF" bgcolor="#CCFFCC" 这些代码... 如果你对左侧单元格的参数已经理解, 那么这些代码应该根本不在话下了... 为了便于大家理解, 仍然用中文的方式翻译一下: 样式="边框-左侧: 5像素 双线 #颜色值; 边框-下方: 1像素 虚线 #颜色值" 单元格背景色="#颜色值"

需要注意的是一些细节上的规则, 比如style是一个大的参数, 在等号后面是有引号(" ")的, 引号中, 是针对这个style(样式)的说明, 每段说明用分号(;)隔开, 每段说明中, 冒号后是对具体细节的修饰说明, 修饰词用空格隔开. 掌握了这些规则, 就可以很方便的进行表格HTML源代码的编辑了.

这段代码在网页中的显示效果如下:

单元格A	单元格B
单元格C	单元格D
单元格E	单元格F
单元格G	单元格H

头大了吗? 呵呵... 放松一下吧~

昨天晚上看到一段话, 觉得很搞笑... 用来给大家放松一下大脑吧...

"既生人, 何生蚊?"

呵呵...

除了用Table的方式, 你也可以采用DIV+CSS的方式来进行网页排版, 恩... 根据个人习惯选择了...

你可能觉得HTML太抽象了, 而且很枯燥...  如果你实在没有兴趣也没有关系, 因为下次的应用篇会比较轻松, 介绍的是用所见即所得方式的网页编辑工具来创建表格. 会容易很多很多... 但我仍然希望, 如果可以的话, 大家还是在使用网页编辑工具前, 先熟悉一下HTML... 即使实在看着头大, 最好也先了解一二, 这对上手使用网页编辑工具, 以及修改网页模板等等方面有很大帮助... 至少我是这么认为的...

好了, 关于表格的HTML部分, 就说到这里吧... 就不虐待大家的大脑了~  而且我写这么多也很累了... :P

如果你对这种初级的HTML知识很感兴趣, 觉得很好玩... 可以给我留言, 我以后会尽量多的写这方面的东西.

如果你有任何疑问, 也可以给我留言, 我会摘着我会的, 尽可能的解答...

如果文中有任何错误, 也希望大侠能够帮忙指出, 我会尽快更正, 以免误人子弟... 先行谢过各位大侠了~ :D

------ by: 希望把脑子里所有东西都倒在互联网上的 戴耳钉的猫

---

Orignal From: 如何在文章日志中插入表格(基础篇)