html表格样式及border,align属性

基本表格

首先上一段最基本的表格绘制代码。

<table border="1" align="center" style=" border: 1px black solid;  
   border-spacing: 0px;  border-collapse: collapse; ">
        <caption>这是表的标题</caption>
        <thead>
            <th>1</th>
            <th>2</th>
            <th>sum1</th>
            <th>sum2</th>
        </thead>
        <tbody>
            <tr>
                <td>aaa1</td>
                <td>bbb1</td>
                <td rowspan="2" style="text-align: center;">5</td>
                <td rowspan="2" align="center">6</td>
            </tr>
            <tr>
                <td>aaa2</td>
                <td>bbb2</td>
            </tr>
            <tr>
                <td>总和</td>
                <td colspan="2" align="center">333</td>
                <td></td>
            </tr>
        </tbody>
    </table>

效果图

表的效果图如下，可以实现合并行和合并列的操作，用rowspan和colspan属性就可以实现。表格在浏览器中是居中的，因为table标签后加入了align="center".而后面的align="center"是让表格内容在表格中居中显示。现在不推荐这样做，因为用样式也可以实现同样的效果。

HTML的border属性

border 属性规定表格单元周围是否显示边框。
值 “1” 指示应该显示边框，且表格不用于布局目的。
如果仅仅用border属性，表格边框是双线，设置表格边框为单线就需要用到以下两个css属性。

border-spacing: 0px;//单元格间距为0px
border-collapse: collapse;//默认为separate，改为collapse，合并边框

参考文章：

1. css设置表格样式