设置定义表格

1定义表格标签

定义表格标签：table

 tr:代表着行 td:设置单元格：th:单元格表头

caption:标题

cellspacing:设置边框合并

cellpadding:设置内容离边框的距离

单元格里面内容居中：

水平方向：text-align:left/center/right;

垂直方向： vertical-align:top/middle/bottom

rowspan:合并纵向单元格

colspan:合并行向单元格：

合并单元格时注意点：合并时多余要删掉；

表格的结构标签会改变内容位置；书写位置无关、

2定义表格的结构如何搭建

搭建定义表格的顺序

设置一个div 用div包着定义表格标签table

table下面包着tr tr下面包着td

 tr:代表着行 td:设置单元格：th:单元格表头

td写一个主要的内容

3开始写代码

如下图所示做到以下效果

 下面开始写代码如下图所示

<h1>流量调查表</h1>
    <table border="1px">
        <tr>
            <td><strong>总页面流量</strong></td>
            <td><strong>共计来访</strong></td>
            <td><strong>会员</strong></td>
            <td><strong>游客</strong></td>
        </tr>
        <tr>
            <td>9756488</td>
            <td>97656</td>
            <td>7538087</td>
            <td>43364677</td>
        </tr>
        <tr>
            <td>46776686</td>
            <td>85544</td>
            <td>69357</td>
            <td>568787</td>
        </tr>
        <tr>
            <td>7538087</td>
            <td>546774</td>
            <td>476897</td>
            <td>334545</td>
        </tr>
        <tr>
            <td>平均每人浏览</td>
            <td>1.58</td>
        </tr>

给table设置一个边框得到下面的效果

 

 就得到这样的效果但是这样还没有完成我们要把下面的表格合并如图所示

 <h1>流量调查表</h1>
    <table border="1px">
        <tr>
            <td><strong>总页面流量</strong></td>
            <td><strong>共计来访</strong></td>
            <td><strong>会员</strong></td>
            <td><strong>游客</strong></td>
        </tr>
        <tr>
            <td>9756488</td>
            <td>97656</td>
            <td>7538087</td>
            <td>43364677</td>
        </tr>
        <tr>
            <td>46776686</td>
            <td>85544</td>
            <td>69357</td>
            <td>568787</td>
        </tr>
        <tr>
            <td>7538087</td>
            <td>546774</td>
            <td>476897</td>
            <td>334545</td>
        </tr>
        <tr>
            <td>平均每人浏览</td>
            <td colspan="3">1.58</td>
        </tr>
    </table>

在要合并的内容后面 加上  colspan=” 里面是填写合并的数字“

colspan合并横向单元格

rowspan合并纵向

我这里是给他设置一个横向合并

还有一个水平居中

得到下面的效果

 这样的效果就做好了

合并单元格注意点：合并时多余要删掉