怎样在 blogspot 的网志中加入表格

看到一些人的网志上常常用到表格，但是没有进行 formatting 处理，显示效果不佳。贴图的话，有几个问题。 首先，表格中的文字都以图像形式呈现，不能被搜索到，影响到你的文章在搜索机器中的可见度。 再者，表格大小固定，不容易调整。 以下为简单教程，希望能够帮到需要在 blogspot 中贴表格的同学。

1. 在 post 编辑器中切换到 HTML 模式， 如图所示：

2. 我写了几行 HTML 加 CSS 的代码模板，有需要的同学可以 copy and paste 到你自己的 post 中， 然后再编辑。 先看效果：

A Blogspot Table Caption

Table Header 1	Table Header 2	Table Header 3
line 1 col 1	line 1 col 2	line 1 col 3
line 2 col 1	line 2 col 2	line 2 col 3
line 3 col 1	line 3 col 2	line 3 col 3
line 4 col 1	line 4 col 2	line 4 col 3

代码在这里：

	<!-- begin styling section: do not edit the style section if you don't know CSS -->
	<style type="text/css">
	.simpleTable table{
	border-collapse: collapse;
	font: 10pt Verdana, Arial, Helvetica, sans-serif;
	empty-cells: show;
	}
	.simpleTable table, .simpleTable th, .simpleTable td {
	border: 1px solid #5777C0;
	}
	.simpleTable table caption {
	font-size: 11pt;
	font-weight: bold;
	color: #5777C0;
	}
	.simpleTable th, .simpleTable td {
	/*top and bottom 2px, right and left 5px*/
	padding: 2px 5px;
	}
	.simpleTable th {
	white-space: nowrap;
	background-color: #5777C0;
	color: white;
	}
	.simpleTable tr:nth-child(odd){ background-color:#ffffff; }
	.simpleTable tr:nth-child(even) { background-color:#d9e9f9; }
	</style>
	<!-- end styling section: do not edit the style section if you don't know CSS -->
	<!-- begin content section: tr means table row, th means table header, td means table cell -->
	<!-- edit the following template, fill your content into proper table cells-->
	<div class="simpleTable">
	<table>
	<caption>A Blogspot Table Caption</caption>
	<tbody>
	<tr>
	<th>Table Header 1</th>
	<th>Table Header 2</th>
	<th>Table Header 3</th>
	</tr>
	<tr>
	<td>line 1 col 1</td>
	<td>line 1 col 2</td>
	<td>line 1 col 3</td>
	</tr>
	<tr>
	<td>line 2 col 1</td>
	<td>line 2 col 2</td>
	<td>line 2 col 3</td>
	</tr>
	<tr>
	<td>line 3 col 1</td>
	<td>line 3 col 2</td>
	<td>line 3 col 3</td>
	</tr>
	<tr>
	<td>line 4 col 1</td>
	<td>line 4 col 2</td>
	<td>line 4 col 3</td>
	</tr>
	</tbody>
	</table>
	</div>

view raw blogspot_table.html hosted with ❤ by GitHub

复制上面代码框里的所有代码，贴到你要加入表格的地方就可以编辑了。

假如你事先有用 Microsoft Excel 或者别的软件编辑表格，整个表格可以作为 HTML 代码导出的， 然后粘贴到你的网志中，具体看这里。

假如你觉得额外启用 Excel 比较麻烦， 或者没有 Excel, 就用我上面的代码， 直接在 blogger 里面编辑。 小表格用我的模板很方便的。

下面一个实例：

Statistics of Italian President Election (Partial)

Year	Rounds	Winner	Winner's vtes in final round	Winner's vote in first round
1946	1	Enrico de Nicola	78.6%	--
1947	1	Enrico de Nicola	94.0%	--
1948	4	Luigi Einaudi	59.5%	2.3%
1955	4	Giovanni Gronchi	79.0%	3.7

上面的表格出处在这里。 代码如下：

	<!-- begin styling section: do not edit the style section if you don't know CSS -->
	<style type="text/css">
	.simpleTable table{
	border-collapse: collapse;
	font: 10pt Verdana, Arial, Helvetica, sans-serif;
	empty-cells: show;
	}
	.simpleTable table, .simpleTable th, .simpleTable td {
	border: 1px solid #5777C0;
	}
	.simpleTable th, .simpleTable td {
	/*top and bottom 2px, right and left 5px*/
	padding: 2px 5px;
	}
	.simpleTable th {
	white-space: nowrap;
	background-color: #5777C0;
	color: white;
	}
	.simpleTable tr:nth-child(odd){ background-color:#ffffff; }
	.simpleTable tr:nth-child(even) { background-color:#d9e9f9; }
	</style>
	<!-- end styling section: do not edit the style section if you don't know CSS -->
	<!-- begin content section: tr means table row, th means table header, td means table cell -->
	<!-- edit the following template, fill your content into proper table cells-->
	<div class="simpleTable">
	<table>
	<caption>Statistics of Italian President Election (Partial)</caption>
	<tbody>
	<tr>
	<th>Year</th>
	<th>Rounds</th>
	<th>Winner</th>
	<th>Winner's vtes in final round</th>
	<th>Winner's vote in first round</th>
	</tr>
	<tr>
	<td>1946</td>
	<td>1</td>
	<td>Enrico de Nicola</td>
	<td>78.6%</td>
	<td>--</td>
	</tr>
	<tr>
	<td>1947</td>
	<td>1</td>
	<td>Enrico de Nicola</td>
	<td>94.0%</td>
	<td>--</td>
	</tr>
	<tr>
	<td>1948</td>
	<td>4</td>
	<td>Luigi Einaudi</td>
	<td>59.5%</td>
	<td>2.3%</td>
	</tr>
	<tr>
	<td>1955</td>
	<td>4</td>
	<td>Giovanni Gronchi</td>
	<td>79.0%</td>
	<td>3.7</td>
	</tr>
	</tbody>
	</table>
	</div>

view raw blogspot_table_example.html hosted with ❤ by GitHub