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

最新推荐文章于 2022-02-25 21:59:27 发布

zhang___gang

最新推荐文章于 2022-02-25 21:59:27 发布

阅读量256

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/zhang___gang/article/details/84858453

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表格元素

表格相关元素

<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>

结果如下：

zhang___gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简单学习（四）-表格标签

表格元素表格相关元素&lt;table&gt; 用于定义表格，border属性加边框 &lt;tr&gt; 定义行（只能保护td和th） &lt;td&gt; 定义单元格，主要有两个属性：colspan-指定单元格跨多少列，rowspan-指定单元格可横跨的行数 &lt;caption&gt; 定义标题 &lt;th&gt; 定义表格页眉的单元...
复制链接

扫一扫