HTML超详细--表格标签+相应案例（小说排行榜+三样表格合并）

最新推荐文章于 2022-10-11 13:32:02 发布

我吃饭很慢.

最新推荐文章于 2022-10-11 13:32:02 发布

阅读量1.2k

点赞数 2

分类专栏： HTML超全语法大合集文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_45586870/article/details/120540782

版权

本文深入探讨HTML表格的使用，包括表格标签、表头单元格、表格属性、表格结构以及如何合并单元格。通过实例展示了如何创建表格、设置表头、调整表格属性，并提供了一个小说排行榜的表格案例，讲解了跨行和跨列合并单元格的方法。

摘要由CSDN通过智能技术生成

一、表格标签

表格不是用来布局页面的,而是用来展示数据的。
在这里插入图片描述

1.1.表格的具体用法：

 <table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

1.<table> </table> 是用于定义表格的标签。
2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中，一组tr标签就是一行。
3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母 td 指表格数据（table data），即数据单元格的内容。

1.2表头单元格标签：

    表头标签的具体实现：
 <table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

在这里插入图片描述

1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
2. <th> 标签表示 HTML 表格的表头部分(table head 的缩写)
3.表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中。

1.3表格属性

1.表格标签这部分属性实际开发我们不常用，后面通过 CSS 来设置。
目的有2个:

记住这些英语单词,后面 CSS 会使用.
直观感受表格的外观形态.

1.4表格结构标签

使用场景:
因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.
在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域. 这样可以更好的分清表格结构。
在这里插入图片描述
总结:
1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
3. 以上标签都是放在 <table></table> 标签中。

表格标签案例

在这里插入图片描述

思路：

先制作表格的结构.

1.第一行里面是 th 表头单元格

2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素

3.文字链接图片等都可以

后书写表格属性

1.用到宽度高度边框cellpadding 和 cellspacing

2.表格浏览器中对齐 align

ps:我把素材图片放在了这里，大家想跟着做案例就改成自己的图片素材路径
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <caption>我是表格的标题</caption>
        <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="images/down.jpg" </td>
                    <td>345</td>
                    <td>123</td>
                    <td

最低0.47元/天解锁文章

我吃饭很慢.

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML超详细--表格标签+相应案例（小说排行榜+三样表格合并）

一、表格标签表格不是用来布局页面的,而是用来展示数据的。1.1.表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>1.<table> </table> 是用于定义表格的标签。2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <tab
复制链接

扫一扫

专栏目录