HTML表格

已于 2023-05-31 14:11:16 修改
阅读量30 收藏
点赞数
文章标签： html 前端 css
于 2023-05-31 14:08:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao45683968/article/details/130965575
版权

HTML表格

一、课堂笔记

表格也就是数据展示的一个列表选项，一般会用来进行数据的一个展示

code:200,
msg:"查询成功",
data:[
 {id:1,imgs:"https://001.jpg"}
]

拿到数据会进行页面的一个渲染工作，就需要有表格的出现

<table>
     <thead>标题头</thead>
     <tbody>内容区域</tbody>
     <tfoot>底部</tfoot>
</table>
tr 就是行
td 就是列
th 就是表头

<table border="1" width="700px" align="center" cellspacing="1" style="text-align: center;">
        <thead>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>语文课</td>
                <td>语文课</td>
                <td>语文课</td>
                <td>语文课</td>
                <td>语文课</td>
            </tr>

            <tr>
                <td>数学课</td>
                <td>数学课</td>
                <td>数学课</td>
                <td>数学课</td>
                <td>数学课</td>
            </tr>
            <tr>
                <td>英语课</td>
                <td>英语课</td>
                <td>英语课</td>
                <td>英语课</td>
                <td>英语课</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
            </tr>
        </tfoot>
    </table>

cellspacing:就是单元格和单元格之间的间距

我们需要面对不同的一个变化，需要对表格进行一个合并

合并分为二种

  • 行合并：就是行与行之间的一个合并 colspan
  • 列合并:就是列与列之间的一个合并rowspan
 <table border="1" width="700px" align="center" cellspacing="1" style="text-align: center;">
        <thead>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">语文课</td>
                <td colspan="2">语文课</td>


            </tr>

            <tr>
                <td rowspan="2">数学课</td>
                <td>数学课</td>
                <td>数学课</td>
                <td>数学课</td>
                <td>数学课</td>
            </tr>
            <tr>

                <td>英语课</td>
                <td>英语课</td>
                <td>英语课</td>
                <td>英语课</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
                <td>晚上吃饭饭</td>
            </tr>
        </tfoot>
    </table>

二、课后练习

利用课堂所学知识实现如下效果

在这里插入图片描述

设计思路：

将页面整体按表格设计，分为20行6列，前4行如图所示

图片1名称日期图片2名称日期
饰演姓名饰演姓名
导演姓名导演姓名
主演姓名主演姓名
代码实现
<!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>Document</title>
    <style>
        .dir{
            height: 1px;
            opacity:0.3;
            background-color: black;
            
        }
    </style>
</head>
<body>
    <h3>参演电视剧</h3>
    <table border="0" width="700px" height="80" cellspacing="0">
        <tr>
            <th rowspan="4"><img src="../imgs/1.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">县委大院</font></th>
            <th><font size="2" >2002-12-7</font></th> 

            <th rowspan="4"><img src="../imgs/2.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">完美伴侣</font></th>
            <th><font size="2" >2002-12-7</font></th>
            <th></th>    
        </tr>
        <tr>
            <td><font size="2" >饰演</font></td>
            <td><font size="2" color="#00a7d0">梅晓歌</font></td>
            <td><font size="2">饰演</font></td>
            <td><font size="2" color="#00a7d0">保安</font></td>
        </tr>
        <tr>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">孔笙、毛珺琳、王宏</font></td>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">林玉芬、梁胜权</font></td>
        </tr>
        <tr>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">吴越，张新成、黄磊、李光洁</font></td>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">高圆圆、张鲁一、张耀庆、王真儿</font></td>
        </tr>
    </table>
    <div class="dir"></div>
    <br>
    <table border="0" width="700px" height="80" cellspacing="0">
        <tr>
            <th rowspan="4"><img src="../imgs/3.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">繁花</font></th>
            <th><font size="2" >2002-12-7</font></th> 

            <th rowspan="4"><img src="../imgs/4.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">猎场</font></th>
            <th><font size="2" >2002-12-7</font></th>
            <th></th>    
        </tr>
        <tr>
            <td><font size="2" >饰演</font></td>
            <td><font size="2" color="#00a7d0">梅晓歌</font></td>
            <td><font size="2">饰演</font></td>
            <td><font size="2" color="#00a7d0">保安</font></td>
        </tr>
        <tr>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">孔笙、毛珺琳、王宏</font></td>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">林玉芬、梁胜权</font></td>

        </tr>
        <tr>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">吴越，张新成、黄磊、李光洁</font></td>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">高圆圆、张鲁一、张耀庆、王真儿</font></td>

        </tr>
    </table>
    <div class="dir"></div>
    <br>
    <table border="0" width="700px" height="80" cellspacing="0">
        <tr>
            <th rowspan="4"><img src="../imgs/5.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">外科风云</font></th>
            <th><font size="2" >2002-12-7</font></th> 

            <th rowspan="4"><img src="../imgs/6.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">旋风十一人</font></th>
            <th><font size="2" >2002-12-7</font></th>
            <th></th>    
        </tr>
        <tr>
            <td><font size="2" >饰演</font></td>
            <td><font size="2" color="#00a7d0">梅晓歌</font></td>
            <td><font size="2">饰演</font></td>
            <td><font size="2" color="#00a7d0">保安</font></td>
        </tr>
        <tr>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">孔笙、毛珺琳、王宏</font></td>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">林玉芬、梁胜权</font></td>

        </tr>
        <tr>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">吴越，张新成、黄磊、李光洁</font></td>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">高圆圆、张鲁一、张耀庆、王真儿</font></td>

        </tr>
    </table>
    <div class="dir"></div>
    <br>
    <table border="0" width="700px" height="80" cellspacing="0">
        <tr>
            <th rowspan="4"><img src="../imgs/7.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">大好时光</font></th>
            <th><font size="2" >2002-12-7</font></th> 

            <th rowspan="4"><img src="../imgs/8.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">琅琊榜</font></th>
            <th><font size="2" >2002-12-7</font></th>
            <th></th>    
        </tr>
        <tr>
            <td><font size="2" >饰演</font></td>
            <td><font size="2" color="#00a7d0">梅晓歌</font></td>
            <td><font size="2">饰演</font></td>
            <td><font size="2" color="#00a7d0">保安</font></td>
        </tr>
        <tr>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">孔笙、毛珺琳、王宏</font></td>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">林玉芬、梁胜权</font></td>

        </tr>
        <tr>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">吴越，张新成、黄磊、李光洁</font></td>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">高圆圆、张鲁一、张耀庆、王真儿</font></td>

        </tr>
    </table>
    <div class="dir"></div>
    <br>
    <table border="0" width="700px" height="80" cellspacing="0">
        <tr>
            <th rowspan="4"><img src="../imgs/9.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">伪装者</font></th>
            <th><font size="2">2002-12-7</font></th> 

            <th rowspan="4"><img src="../imgs/10.jpg" alt="" width="60px" height="90px" ></th>
            <th><font  size="3" color="#00a7d0">四十九日*祭</font></th>
            <th><font size="2">2002-12-7</font></th>
            <th></th>
        </tr>
        <tr>
            <td><font size="2">饰演</font></td>
            <td><font size="2" color="#00a7d0">梅晓歌</font></td>
            <td><font size="2">饰演</font></td>
            <td><font size="2" color="#00a7d0">保安</font></td>
        </tr>
        <tr>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">孔笙、毛珺琳、王宏</font></td>
            <td><font size="2" >导演</font></td>
            <td><font size="2" color="#00a7d0">林玉芬、梁胜权</font></td>

        </tr>
        <tr>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">吴越，张新成、黄磊、李光洁</font></td>
            <td><font size="2" >主演</font></td>
            <td><font size="2" color="#00a7d0">高圆圆、张鲁一、张耀庆、王真儿</font></td>

        </tr>
    </table>
    <div class="dir"></div>
</body>
</html>
完成效果
  <td><font size="2" >主演</font></td>
        <td><font size="2" color="#00a7d0">吴越，张新成、黄磊、李光洁</font></td>
        <td><font size="2" >主演</font></td>
        <td><font size="2" color="#00a7d0">高圆圆、张鲁一、张耀庆、王真儿</font></td>

    </tr>
</table>
<div class="dir"></div>
~~~
完成效果

在这里插入图片描述

xiao45683968
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML 表格
木木木森林
12-04 1万+
目录1. 创建表格2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格(难点)5.1 合并单元格2种方式5.2 合并单元格顺序5.3 合并单元格三步曲6. 总结表格7. 拓展阅读@ 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table&gt
HTML表格table
weixin_58139900的博客
09-15 2035
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
HTML表格样式
ZYX13721846745的博客
10-08 8017
9675人阅读 行跟列背景颜色的选择，合并等 列的颜色选择代码 <colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col&
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML表格制作
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
HTML表格标签
weixin_52629158的博客
10-23 2123
HTML表格标签
html表格标签
weixin_44992737的博客
06-06 5292
html表格标签详解
HTML表格布局
m0_64482760的博客
07-24 3697
HTML表格布局（以物资验收入库表为例）
HTML表格标签详解
实泽有之，无泽虚之
03-26 8919
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML表格布局实际使用详解
09-28
HTML表格布局是网页设计中的一种基础元素，尤其适用于数据展示和表单输入。虽然现代网页设计倾向于使用CSS布局，但在特定场景下，表格仍然具有其不可替代的优势。本篇文章将深入探讨HTML表格的实际使用和布局计算。 ...
HTML表格生成Excel文件特效代码
03-20
HTML表格是网页设计中常见的一种数据展示方式，用于呈现结构化的信息。然而，有时用户可能希望将这些数据保存为更便于处理的格式，比如Excel文件。在这个场景下，"HTML表格生成Excel文件特效代码" 提供了解决方案，...
详解HTML表格|l-639642.pdf
11-20
HTML表格是网页设计中用于展示数据的重要元素，它允许我们以结构化的方式排列和组织信息。下面将详细解析HTML表格的各个组成部分、属性以及最佳实践。 1. **基本表格结构**： HTML表格由`<table>`标签开始，用于...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1046
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2323
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Html在图片上划一个矩形区域，并且获取区域坐标
zxb11c的博客
07-25 206
【代码】Html在图片上划一个矩形区域，并且获取区域坐标。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 707
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
html表格
05-27
HTML表格是一种用于展示数据的标准化格式，可以使用HTML的、、等标签来创建表格。 以下是一个简单的HTML表格示例： ```html 姓名 年龄 性别 张三 <td>25 男 李四 <td>30 女 ``` 在上面的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值