H5表格的例子

最新推荐文章于 2023-08-15 09:01:14 发布

原创最新推荐文章于 2023-08-15 09:01:14 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

学习总结专栏收录该内容

9 篇文章

订阅专栏

本文通过一个具体的HTML实例展示了如何使用表格进行网页布局，并详细解释了各个标签的作用及属性设置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="10" align="center" bordercolor="pink"; cellspacing="0">
    <tr>
        <td rowspan="8" width="100px"><img src="../../img/dongman.jpg" alt="" width="100px" height="150px"/></td>
        <td rowspan="3" width="100px">&nbsp;</td>
        <td rowspan="2" width="100px">&nbsp;</td>
        <td width="100px">&nbsp;</td>
    </tr>
    <tr>
        <td width="100px">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2" width="100px">&nbsp;</td>
        <td width="100px">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="3" width="100px">&nbsp;</td>
        <td width="100px">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2" width="100px">&nbsp;</td>
        <td width="100px">&nbsp;</td>
    </tr>
    <tr>
        <td width="100px">&nbsp;</td>
    </tr>
</table>


表格如下

 
<table width="500" align="center" border="1">

    <colgroup style="background-color: red;"> <!--前两列为一组-->
        <col/> <!--第一列-->
        <col/> <!--第二列-->
    </colgroup>
    <col style="background-color: blue;"/> <!--第三列-->

    <caption>表格标题</caption>

    <thead>
    <tr>
        <th>头1</th>
        <th>头2</th>
        <th>头3</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    </tbody>

    <tbody>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>尾1</td>
        <td>尾2</td>
        <td>尾3</td>
    </tr>
    </tfoot>

</table>

</body>
</html>

表格如下