table 表格实例

最新推荐文章于 2022-06-25 11:30:18 发布

原创最新推荐文章于 2022-06-25 11:30:18 发布 · 2.2k 阅读

10 ·

CC 4.0 BY-SA版权

编程专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML中的表格元素，包括创建基本表格、设置表格样式、添加表头、合并单元格等操作，帮助读者掌握网页中表格的运用技巧。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>HTML实例</title>
    </head>
    <body>
        <h3>HTML实例--表格标签</h3>
        <!-- cellspacing属性是控制表格各单元格与单元格之间的空白距离 -->
        <!-- cellpadding属性是控制表格单元格与内容之间的空白距离 -->
        <!-- align是控制对齐方式 center是居中 -->
        <table width="888" border="2" align="center" cellspacing="0" 
        cellpadding="0" bgcolor="#ddd">
            <marquee><h1><font color="#f0c" style="font-family:'叶根友毛笔行书2.0版'">
            我们的青春</font></h1></marquee>
            <thead>
                <tr>
                    <th>1小时候</th>
                    <th>长大后</th>
                    <th>小时候</th>
                    <th>长大后</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>3哭着哭着就笑了</td>
                    <td>笑着笑着就哭了</td>
                    <td>我们终于到了小时候最羡慕的年纪</td>
                    <td>确没能成为小时候最想成为的人</td>
                </tr>
            </tbody>
            <tfoot>
                <tr align="center" bgcolor="#f0c">
                    <td>2枕头上是口水</td>
                    <td>枕头上是泪水</td>
                    <td>微笑是一种心情</td>
                    <td>微笑是一种表情</td>
                </tr>
            </tfoot>
        </table>
        <!-- rowspan是行合并  上下合并 -->
        <!-- colspan是列合并  左右合并 -->
        <table width="456" align="center" cellspacing="0" border="1">
            <caption><h1>人员信息表</h1></caption>
            <caption align="bottom">2018.08.29</caption>
            <caption align="bottom"><h5>表 2-1</h5></caption>
            <tr bgcolor="#eee">
                <td>1姓名</td>
                <td rowspan="2" colspan="2">2齐天大圣</td>
                <!-- <td>3籍贯</td> -->
                <td align="right">4傲来国</td>
                <td rowspan="3">5照片<img src="../lesson_03/image/wuman/30.jpg" width="100"></td>
            </tr>
            <tr>
                <td width="123">6政治面貌</td>
                <!-- <td>7斗战胜佛</td> -->
                <!-- <td>8性别</td> -->
                <td>9公</td>
                <!-- <td>0</td> -->
            </tr>
            <tr>
                <td>a住址</td>
                <td colspan="3">b花果山水帘洞VIP2202房间</td>
                <!-- <td>c</td>
                <td>d</td> -->
                <!-- <td>e</td> -->
            </tr>
        </table>
    </body>
</html>

这里写图片描述