HTML简单学习（四）-表格标签

最新推荐文章于 2024-02-16 23:45:17 发布

zhang___gang

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/zhang___gang/article/details/84858453

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML中的表格元素，包括<table>、<tr>、<td>、<caption>、<th>、<tbody>、<thead>、<tfoot>等标签的使用方法及属性，如border、colspan和rowspan，并通过实例展示了如何创建带有标题、表头、表脚的复杂表格。

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

表格元素

表格相关元素

<table>	用于定义表格，border属性加边框
<tr>	定义行（只能保护td和th）
<td>	定义单元格，主要有两个属性：colspan-指定单元格跨多少列，rowspan-指定单元格可横跨的行数
<caption>	定义标题
<th>	定义表格页眉的单元格
<tbody>	定义表格的主体
<thead>	定义表头
<tfoot>	定义表脚

表达颜色：

#rrggbb：每一个16进制，两位一个颜色，0-255
#rgb：0-15
一部分有名字的内置颜色，直接写名字就行，如：red，green，yellow

示例代码如下：

<!--表格标签演示-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>喜欢的歌曲</title>
</head>
<body>
    <table border="1px" cellspacing="0" width="200px" bgcolor="#cccccc"> <!--定义表格 border属性加边框-->
        <caption>我喜爱的歌曲</caption> <!--定义表格标题-->
        <thead> <!--定义表头-->
            <tr> <!--定义表格行-->
                <th>歌名</th> <!--定义页眉单元格-->
                <th>原唱</th>
            </tr>
        </thead>
        <tbody> <!--定义表格主体-->
            <tr>
                <td>我只在乎你</td> <!--定义单元格-->
                <td>邓丽君</td>
            </tr>
            <tr>
                <td>勇气</td>
                <td rowspan="2">梁静茹</td> <!--rowspan属性跨行-->
            </tr>
            <tr>
                <td>宁夏</td>
            </tr>
            <tr>
                <td>倔强</td>
                <td>五月天</td>
            </tr>
            <tr>
                <td>绿光</td>
                <td>孙燕姿</td>
            </tr>
        </tbody>
        <tfoot> <!--定义表脚-->
            <tr>
                <td colspan="2">总计：5首歌曲</td> <!--colspan属性跨列-->
            </tr>
        </tfoot>
    </table>
</body>
</html>

结果如下：