小说排行榜案例（表格标签）

最新推荐文章于 2022-11-22 09:30:36 发布

多加奶糖

最新推荐文章于 2022-11-22 09:30:36 发布

阅读量1.7k

点赞数 2

分类专栏：笔记前端文章标签： html

本文链接：https://blog.csdn.net/qq_40501188/article/details/108863638

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端

21 篇文章 1 订阅

订阅专栏

表格标签

表格是用来显示，展示数据的（也可以说是布局页面的）

<table>定义表格<tr>定义行<tb>定义表格内的数据</tb></tr></table>

表头单元格标签

表头单元格：表格第一行或者第一列，突出重要，文本内容加粗居中显示
<th>这是表头标签</th>

表格相关属性

注意：这里的属性要写到table标签里边去，不常用，通常通过设置css样式来实现

align 表格相对周围元素的对齐方式（left，right，center）
border 是否拥有边框，默认为””，表示没有边框；设置为1时，表示有边框
cellpadding 单元边沿与内容之间的空白距离，默认为1px
cellspacing 单元格之间的空隙，默认为2px，（可以理解为单元格边框是不是空心或者是多大的空心）
width/height 规定单元格的宽度/高度（单位：像素值/百分比）

表格结构标签

——更好地表示表格的语义

表格头部：thead rowspan 跨行合并
表格主体：tbody colspan 跨列合并
目标单元格（写合并代码+合并单元格的数量）
- 跨行写到最上侧单元格
- 跨列最左侧单元格为目标单元格

案例：小说排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--设置网页头部的小图片-->
    <link rel="icon" href="title.ico" type="image/x-icon" />
    <title>小说排行榜</title>
</head>
<body>
	<!--表格居中，设置边框，文字与边缘距，要实心的框-->
    <table align="center" border="1" cellpadding="10px" cellspacing="0" width="500px" height="249px">
    <!--设置表格头部标签，注意与表头单元格标签th的区别-->
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <!--设置表格主体部分，这里的链接是在百度搜索排行榜时直接用的那里边的-->
    <tbody>
        <tr>
            <td>1</td>
            <td>元尊</td>
            <td><img src="up.png" /></td>
            <td>621</td>
            <td>15621</td>
            <td><a href="https://baike.baidu.com/item/%E5%85%83%E5%B0%8A/22124185" target="_blank">简介</a>
                <a href="https://image.baidu.com/search/index?tn=baiduimage&lm=-1&ct=201326592&cl=2&word=%D4%AA%D7%F0&ie=gbk" target="_blank">图片</a>
                <a href="http://index.baidu.com/v2/main/index.html#/trend/%E5%85%83%E5%B0%8A?words=%E5%85%83%E5%B0%8A" target="_blank">指数</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>元神</td>
            <td><img src="up.png" /></td>
            <td>573</td>
            <td>12801</td>
            <td><a href="https://baike.baidu.com/item/%E5%85%83%E7%A5%9E/10593772" target="_blank">简介</a>
                <a href="https://image.baidu.com/search/index?tn=baiduimage&lm=-1&ct=201326592&cl=2&word=%D4%AA%C9%F1&ie=gbk" target="_blank">图片</a>
                <a href="http://index.baidu.com/v2/main/index.html#/trend/%E5%85%83%E7%A5%9E?words=%E5%85%83%E7%A5%9E" target="_blank">指数</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>剑来</td>
            <td><img src="up.png" /></td>
            <td>381</td>
            <td>12381</td>
            <td><a href="https://baike.baidu.com/item/%E5%89%91%E6%9D%A5/20832055" target="_blank">简介</a>
                <a href="https://image.baidu.com/search/index?tn=baiduimage&lm=-1&ct=201326592&cl=2&word=%BD%A3%C0%B4&ie=gbk" target="_blank">图片</a>
                <a href="http://index.baidu.com/v2/main/index.html#/trend/%E5%89%91%E6%9D%A5?words=%E5%89%91%E6%9D%A5" target="_blank">指数</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>阴阳师</td>
            <td><img src="down.jpg" /></td>
            <td>234</td>
            <td>8034</td>
            <td><a href="https://baike.baidu.com/item/%E9%98%B4%E9%98%B3%E5%B8%88/20799549" target="_blank">简介</a>
                <a href="https://image.baidu.com/search/index?tn=baiduimage&lm=-1&ct=201326592&cl=2&word=%D2%F5%D1%F4%CA%A6&ie=gbk" target="_blank">图片</a>
                <a href="http://index.baidu.com/v2/main/index.html#/trend/%E9%98%B4%E9%98%B3%E5%B8%88?words=%E9%98%B4%E9%98%B3%E5%B8%88" target="_blank">指数</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>延禧攻略</td>
            <td><img src="up.png" /></td>
            <td>122</td>
            <td>6817</td>
            <td><a href="https://baike.baidu.com/item/%E5%BB%B6%E7%A6%A7%E6%94%BB%E7%95%A5/22764963" target="_blank">简介</a>
                <a href="https://image.baidu.com/search/index?tn=baiduimage&lm=-1&ct=201326592&cl=2&word=%D1%D3%EC%FB%B9%A5%C2%D4&ie=gbk" target="_blank">图片</a>
                <a href="http://index.baidu.com/v2/main/index.html#/trend/%E5%BB%B6%E7%A6%A7%E6%94%BB%E7%95%A5?words=%E5%BB%B6%E7%A6%A7%E6%94%BB%E7%95%A5" target="_blank">指数</a></td>
        </tr>
    </tbody>
    </table>
</body>
</html>