HTML简单学习(四)-表格标签

本文详细介绍了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>

结果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值