HTML创建表格，合并行，合并列

攻城师

2018-04-02

在HTML中我们会用到表格的创建，我们可以用<table>标签，有事我们还需要合并行或者合并列，这是我们怎么创建呢？下面我们来实现一下。

我们首先来创建一个表格，用<table>标签来实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px" style="width: 500px;height: 300px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

我们设置一下样式让表格更清楚，效果图如下：

HTML创建表格，合并行，合并列
这样我们就创建出表格了，我们现在来合并第一行的列，

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px" style="width: 500px;height: 300px">
    <tr>
        <td colspan="3">合并第一行的列</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

我们只要多第一行的列进行合并即可，这里我们用colspan来写，后面的值就是我们要合并的列数。

HTML创建表格，合并行，合并列

现在我们合并行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px" style="width: 500px;height: 300px">
    <tr>
        <td rowspan="3">合并第一列的行</td>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

这样我们就合并行了，我们用rowspan来实现，后面的值是要合并的行数

HTML创建表格，合并行，合并列

我们看到表格的边框有点宽，而且有点双边框的样子，我们cellspaing来设置.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px " cellspacing="0"  style="width: 350px;height: 200px">
    <tr>
        <td colspan="3">合并第一行的列</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

下面我们来看一下效果

HTML创建表格，合并行，合并列
cellSpacing 属性可设置或返回在表格中的单元格之间的空白量（表格中各个单元格之间的距离）（以像素为单位）。

我们还可以为单元格中的字体来设置居中的样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px " cellspacing="0"   style="width: 350px;height: 200px">
    <tr align="center" >
        <td colspan="3" >合并第一行的列</td>
    </tr>
    <tr >
        <td align="center">4</td>
        <td align="center">5</td>
        <td align="center">6</td>
    </tr>
    <tr align=＂center＂>
        <td align="center">7</td>
        <td align="center">8</td>
        <td align="center">9</td>
    </tr>
</table>
</body>
</html>

效果图如下
HTML创建表格，合并行，合并列