[HTML/CSS应用]博客文档排版之插入个性化表格

浏览数：19 / 时间：2015年06月09日

上一篇文章我们介绍了在源码编辑模式下，如何向文章中插入代码；这篇文章，我们来说说怎样在源码编辑模式下，向文章中插入一个比较个性化的表格。

我们先插入一个最简单的表格。看下面这个示例，我们在源码编辑模式输入以下内容：

<table border="1" cellspacing="0" cellpadding="5" align="center" style="border-collapse:collapse; text-align:center; border:2px solid #0000FF;">
    <caption>参加本期沙龙活动的人员信息表(样表)</caption>
    <tr style="background-color: #C0C0C0;">
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>Email</th>
    </tr>

    <tr>
        <td>01</td>
        <td>张三</td>
        <td>30</td>
        <td>138-1234-5678</td>
        <td>[email protected]</td>
    </tr>

    <tr>
        <td>02</td>
        <td>李四</td>
        <td>33</td>
        <td>138-0000-1111</td>
        <td>[email protected]</td>
    </tr>

    <tr>
        <td>...</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

注解：上述示例中我们创建了一个4行5列的表格

<table>与</table> 之间定义一个表格

<caption>与</caption> 之间为表格标题

<th>与</th> 之间为表头

<tr>与</tr> 之间定义一行

<td>与</td> 之间为单元格

border 设置表格边框的宽度

cellspacing 设置单元格之间的空白

cellpadding 设置单元边沿与其内容之间的空白

align 设置表格对齐方式

border-collapse 设置是否将表格边框折叠为单一边框

text-align 设置表格中文本的对齐方式

上述示例实际显示效果如下：

参加本期沙龙活动的人员信息表(样表)
序号	姓名	年龄	电话	Email
01	张三	30	138-1234-5678	[email protected]
02	李四	33	138-0000-1111	[email protected]
...

接下来，我们对上面的表格稍作修改，使其看上去更个性化一点

<table border="1" cellspacing="0" cellpadding="5" align="center" style="border-collapse:collapse; text-align:center; border:2px solid #0000FF;">
    <caption style="caption-side: bottom;">参加本期沙龙活动的人员信息表(样表)</caption>
    <tr style="background-color: #C0C0C0;">
        <th width="75" rowspan="2">序号</th>
        <th width="75" rowspan="2">姓名</th>
        <th width="75" rowspan="2">年龄</th>
        <th colspan="2">联系方式</th>
    </tr>
    <tr style="background-color: #C0C0C0;">
        <th>电话</th>
        <th>Email</th>
    </tr>

    <tr>
        <td>01</td>
        <td>张三</td>
        <td>30</td>
        <td>138-1234-5678</td>
        <td>[email protected]</td>
    </tr>

    <tr>
        <td>02</td>
        <td>李四</td>
        <td>33</td>
        <td>138-0000-1111</td>
        <td>[email protected]</td>
    </tr>

    <tr>
        <td>...</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

注解：我们对表头做了一些单元格合并，同时把表格标题移到了表格底部。

rowspan 合并垂直单元格

colspan 合并水平单元格

caption-side 设置表格标题的位置

修改后的表格实际显示效果如下：