用HTML创建表格

5.1 表格基本结构（<table>)

建立一个最基本的表格，必须包含一组<table></table>标记、一组<tr></tr>标记以及一组<td></td>标记，这也是最简单的单元格表格。<table></table>标记的作用是定义一个表格，<tr></tr>标记的作用是定义一行，而<td></td>标记的作用是定义一个单元格。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>单元格</title>
    </head>
    
    <body>
        <center>
            <table border=1>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                    <td>A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
            </table>
        </center>
    </body>

</html>

注：

table标记：他用于标识一个表格。就如同body标记一样，告诉浏览器这是一个表格。table标记中设置了一个boder属性（border=1），它的作用是将表格的边框线粗细设置为1像素。
tr标记：它用于标识表格的一行，也就是建立一行表格。代码中多少个trtr标记，就表示有多少行的表格。
td标记：它用于标记表格的一列，也就是建立一个单元格，它必须放在tr标记里使用，一个tr标记内有多少个td就表示这行里有多少列或是说有多少个单元格。

5.2 合并单元格

在HTML中合并的方向有两种，一种是上下合并，一种是左右合并，这两种合并方式各有不同的属性设定方法。

5.2.1 用colspan属性左右合并单元格

可以看到在<td>标记中，将colspan属性设置为“2”，这个单元格就会横跨两列。这样它后面的A4单元格仍然在原来的位置。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>左右合并单元格</title>
    </head>
    
    <body>
        <center>
            <table border="1">
                <tr>
                    <td>A1</td>
                    <td colspan="2">A2 A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
        </center>
        </table>
    </body>

</html>

注：合并单元格之后，相应的单元格标记就会减少，例如这里原来的A3单元格的<td>和</td>标记就要被去掉了。

5.2.2 用rowspan属性上下合并单元格<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下合并单元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2">A2<br>B2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

注：要合并单元格就一定会有一些单元格会被“牺牲”掉，这次要将A2与A3单元格合并，那么被牺牲的就是A3单元格，而在A2的<td>标签中设置了rowspan属性，这里rowspan=2的意思就是“这个单元格上下连跨了2格”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并更多单元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2" colspan="2">A2A3<br>B2B3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

5.3 用align属性设置对齐方式

设置为居中对齐：只要在<td>中加入“ALIGN=CENTER”。

注：

居中对齐：center
底部对齐：bottom
左部对齐：left
右部对齐；right

<table border="1" height="150" width="200">
    <tr>
        <td>A1</td>
        <td align="center" rowspan="2" colspan="2">A2A3
            <br>B2B3</td>
        <td>A4</td>
    </tr>

---恢复内容结束---

5.1 表格基本结构（<table>)

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>单元格</title>
    </head>
    
    <body>
        <center>
            <table border=1>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                    <td>A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
            </table>
        </center>
    </body>

</html>

注：

table标记：他用于标识一个表格。就如同body标记一样，告诉浏览器这是一个表格。table标记中设置了一个boder属性（border=1），它的作用是将表格的边框线粗细设置为1像素。
tr标记：它用于标识表格的一行，也就是建立一行表格。代码中多少个trtr标记，就表示有多少行的表格。
td标记：它用于标记表格的一列，也就是建立一个单元格，它必须放在tr标记里使用，一个tr标记内有多少个td就表示这行里有多少列或是说有多少个单元格。

5.2 合并单元格

在HTML中合并的方向有两种，一种是上下合并，一种是左右合并，这两种合并方式各有不同的属性设定方法。

5.2.1 用colspan属性左右合并单元格

可以看到在<td>标记中，将colspan属性设置为“2”，这个单元格就会横跨两列。这样它后面的A4单元格仍然在原来的位置。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>左右合并单元格</title>
    </head>
    
    <body>
        <center>
            <table border="1">
                <tr>
                    <td>A1</td>
                    <td colspan="2">A2 A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
        </center>
        </table>
    </body>

</html>

注：合并单元格之后，相应的单元格标记就会减少，例如这里原来的A3单元格的<td>和</td>标记就要被去掉了。

5.2.2 用rowspan属性上下合并单元格<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下合并单元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2">A2<br>B2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并更多单元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2" colspan="2">A2A3<br>B2B3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

5.3 用align属性设置对齐方式

设置为居中对齐：只要在<td>中加入“ALIGN=CENTER”。

注：

居中对齐：center
底部对齐：bottom
左部对齐：left
右部对齐；right

<table border="1" height="150" width="200">
    <tr>
        <td>A1</td>
        <td align="center" rowspan="2" colspan="2">A2A3
            <br>B2B3</td>
        <td>A4</td>
    </tr>

可以使用valign属性使表格内文字靠上方或靠下方等。valign属性可以设置为“top”、“middle”或者“bottom”，分别表示竖直靠上、数值居中和竖直靠下对齐，其中竖直居中是默认值。

<center>
    <table border="1" height="150" width="200">
        <tr>
            <td>A1</td>
            <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td>
            <td>A4</td>
        </tr>
        <tr valign="top">
            <td>B1</td>
            <td>B4</td>
        </tr>
        <tr align="right">
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>

注：

left，right，center用align；
bottom，top用valign。

5.4 用bgcolor属性设置表格背景色和边框颜色

设置背景色的属性是bgcolor，可以为<table>,<tr>或者<td>设置bgcolor属性。如果在<table>标记中设置bgcolor属性，将设置整个表格的背景色；如果在<tr>标记中设置bgcolor属性，将设置该行的背景色；如果在<td>标记中设置bgcolor属性，则仅设置该单元格的背景色。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>背景色</title>
    </head>
    
    <body>
        <center>
            <table bgcolor="#CCCCCC" border="1" height="150" width="200">
                <tr>
                    <td>A1</td>
                    <td align="center" rowspan="2" colspan="2">A2A3
                        <br>B2B3</td>
                    <td>A4</td>
                </tr>
                <tr valign="bottom">
                    <td>B1</td>
                    <td>B4</td>
                </tr>
                <tr bgcolor="#999999" align="right">
                    <td>C1</td>
                    <td bgcolor="#555555">C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
            </table>
        </center>
    </body>

</html>

5.5 玩完整的表格标记（<thead>、<tbody>和<tfoot>)

从表格结构的角度来说，可以把表格的行分组，称为“行组”。不同的行组具有不同的意义。行组分为3类——“表头”、“主体”和“脚注”。三者相应的HTML标记依次为<thead>、<tbody>和<tfoot>。

在一行中，除了<td>标记表示一个单元格外，还可以使用<td>表示该单元格是这一行的“行头”。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>表格演示</title>
    </head>
    <center>
        
        <body>
            <table width="400" border="1" bordercolor="#003399">
                <thead>
                    <tr>
                        <th colspan="2">产品</th>
                        <th colspan="2">描述信息</th>
                    </tr>
                    <tr>
                        <tr align="center">
                            <td>公司</td>
                            <td>编号</td>
                            <td>用途</td>
                            <td>价格</td>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2">众生</th>
                        <td>DZ-1</td>
                        <td>中端客户</td>
                        <td>100.00</td>
                    </tr>
                    <tr>
                        <td>DZ-2</td>
                        <td>低端客户</td>
                        <td>50.00</td>
                    </tr>
                    <tr>
                        <th rowspan="2">众生</th>
                        <td>JY-1</td>
                        <td>高端客户</td>
                        <td>200.00</td>
                    </tr>
                    <tr>
                        <td>JY-2</td>
                        <td>中端客户</td>
                        <td>100.00</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>120.00</td>
                    </tr>
                </tfoot>
            </table>
        </body>
    </center>

</html>

注：第1行和第2行被放在了<thead>和</thead>之间，表示这两行是表格的行头；接下来的4行被放在了<tbody>和</tbody>之间，表示这两行是表格的主体部分；最后一行被放在了<tfoot>和</tfoot>之间，表示这行是表格的脚注部分。此外，还有4个单元格是使用<th>标记而不是<td>标记定义的。

用<th>标记定义单元格，其内容会以粗体显示。而设置了行组以后，外在的效果并没有特殊之处。

猜你喜欢