table表格的使用（表格的嵌套、合并）

最新推荐文章于 2025-03-25 21:26:20 发布

IABQL

最新推荐文章于 2025-03-25 21:26:20 发布

阅读量5.3k

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/qq_48078182/article/details/117227769

版权

本文详细介绍了HTML表格的基本结构，包括定义表格、行和列，以及如何使用border、width、height、align和背景属性进行定制。此外，涵盖了合并列和行的方法，以及表格嵌套的实例。掌握这些技巧有助于提升网页布局的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格基本格式

<table>
//第一行
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
//第二行
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</table>

1.<table></table>：定义一张表格

2.<tr></tr>：定义行

3.<td></td>：定义列

4.<thead>：定义表格头部

5.<tbody>：定义表格主体

6.<tfoot>：定义表格尾部

表格中的几种属性

1.border="1":不加此属性则不会显示边框。取值为正整数，数值越大，边框越粗。

2.width="100":设置表格的宽度

3.height="100":设置表格的高度

4.align="center":表格对齐方式，center：居中对齐，left：向左对齐，right：向右对齐

5.bgcolor="":表格背景颜色

6.background="（url）":背景图片

7.cellpadding="":表格中每个格子的内边距（即文字等元素与格子边框之间的距离）

举例：

<table border="1" cellpadding="10">
<!--    第一行-->
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
<!--    第二行-->
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
</table>

cellpadding="10"：内边距设置为10像素时

cellpadding="0"：内边距设置为0像素时

8.cellspacing="":表格中每个格子的外边距（即小格子与整体表格边框之间的距离）

举例：

<table border="1" cellspacing="10">
<!--    第一行-->
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
<!--    第二行-->
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
</table>

cellspacing="10":外边距设置为10像素时

cellspacing="0":外边距设置为0像素时

表格的合并（列，行）

1.合并表格的列

<!--表格合并-->
<table border="1"width="300"cellpadding="0"cellspacing="0"align="center">
    <tr>
        <!-- colspan="2"合并两列-->
        <th colspan="2">&nbsp;</th>
    </tr>

    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>

    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>

</table>

样式：

2.合并表格的行

<!--表格合并-->
<table border="1"width="300"cellpadding="0"cellspacing="0"align="center">
    <tr>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <!-- rowspan="2" 合并两行-->
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

样式：

表格的嵌套

<!--表格嵌套-->
<table border="1"width="300"cellpadding="0"cellspacing="0">
    <tr>
        <td>
        <!--在第一行第一列中再嵌套一个表格(两行、两列的表格)-->
            <table border="1" width="100%">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>

        </td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

样式：