【前端学习笔记 HTML】表格标签

最新推荐文章于 2024-10-08 16:04:22 发布
最新推荐文章于 2024-10-08 16:04:22 发布
阅读量235 收藏
点赞数
文章标签： 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44243770/article/details/127706085
版权

学习的是黑马前端课程

目录

基本标签

在这里插入图片描述

<!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>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>韩梅梅</td>
            <td>女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李明</td>
            <td>男</td>
            <td>98</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

基本属性

在这里插入图片描述

<!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 border="4" width="400" height="200">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>韩梅梅</td>
            <td>女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李明</td>
            <td>男</td>
            <td>98</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

表格标题和表头单元格标签

在这里插入图片描述

<!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>
</head>
<body>
    <table border="2" width="300" height="80">
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>韩梅梅</td>
            <td>女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李明</td>
            <td>男</td>
            <td>98</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

表格的结构标签

在这里插入图片描述

<!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>
</head>
<body>
    <table border="2" width="300" height="80">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>韩梅梅</td>
                <td>女</td>
                <td>100</td>
            </tr>
            <tr>
                <td>李明</td>
                <td>男</td>
                <td>98</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td>总结</td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
        

    </table>
</body>
</html>

合并单元格

在这里插入图片描述

<!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>
</head>
<body>
    <table border="2" width="300" height="80">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>韩梅梅</td>
                <td>女</td>
                <!-- 跨行合并 -->
                <td rowspan="2">100</td>
            </tr>
            <tr>
                <td>李明</td>
                <td>男</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并 -->
                <td colspan="2"></td>
            </tr>
        </tfoot>
        

    </table>
</body>
</html>

在这里插入图片描述

World_2
关注
【前端学习笔记day13】2.9. html表格
01-08
html表格html表格 2.9. html表格 html表格 1、 标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing...
《Html》前端学习笔记
04-12
HTML，全称HyperText Markup Language，即超文本标记语言，是构建网页内容的基础。它是一种标记语言，通过一系列预定义的标签来描述网页的结构和内容。...不断学习和实践，才能成为一名熟练的前端开发者。
HTML之表格标签
hmh520i的博客
12-19 2735
前端学习日记
HTML表格标签详解
实泽有之，无泽虚之
03-26 9073
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
前端学习笔记一一HTML表格标签（table）
2401_84092068的博客
04-22 779
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。所以看完之后，还是多多行动起来吧！
前端学习笔记一一HTML表格标签（table）(2)
2301_79099480的博客
04-22 763
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端学习笔记一一HTML表格标签（table）(1)
2401_84091993的博客
04-22 332
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2351
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
前端html学习笔记
a_big_panda的博客
01-12 1417
dl：表示自定义列表的整体，用于包裹dt/dd标签dt：表示自定义列表的主题dd：表示自定义列表的针对主题的每一项内容例如：dd前会默认显示缩进效果dl标签中只允许包含dt/dd标签dt/dd标签可以包含任意内容。
前端学习笔记一一html的常用标签
2401_85124764的博客
06-17 794
定义着重文字。定义斜体字。
前端学习笔记1：HTML
m0_52289398的博客
01-19 410
HTML基础知识
尚硅谷前端HTML+CSS学习笔记
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。计算机由硬件和软件组成，硬件是看得见摸得着的物理...
关于通信方式的一些自我学习（uart、i2c、spi的一些最底层的逻辑以及运用方式）STM32F407上的一些实际日常应用
weixin_60991529的博客
10-08 988
首先其工作原理是将数据以串行方式进行发的，接收的时候将数据转换为并行数据。利用异步通信所以不需要时钟线适用于不同芯片、芯片对模块之间的控制。因此需要设置好波特率（115200、9500）数据位、停止位、奇偶效验位。
【学习笔记】零基础入门汇编语言（ARM架构+汇编的实际应用）
最新发布
2203_75993546的博客
10-08 788
汇编语言（Assembly Language）是任何一种用于电子或其他可编程器件的低级语言，亦称为。在汇编语言中，用代替的，用地址符号或代替指令或的地址。在不同的设备中，汇编语言对应着不同的，通过汇编过程转换成机器指令。特定的汇编语言和特定的机器语言指令集是的，不同平台之间不可直接移植。汇编是上世纪五十年代人们为了摆脱机器语言的繁琐而创造的，因此，比起机器语言，汇编语言具有更高的机器，更加便于记忆和书写，但又同时保留了机器语言高速度和高效率的特点。但汇编语言仍是。
10.2学习
2401_87363162的博客
10-02 1158
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
学习记录：js算法（四十九）：二叉树的层序遍历
weixin_48677331的博客
10-01 428
任重而道远！
Django学习笔记三：QuerySet使用详解
软件行业技术文化交流。
10-02 215
Django的QuerySet是Django ORM中用于表示数据库查询结果集合的对象。它提供了丰富的方法来操作和查询数据库。
jmeter学习（7）beanshell
daxiashangxian的博客
10-06 309
打开日志选项，beanshell的log可以在日志中查看log.info("deviceId"）举例：获取返回数据中的字段。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值