【HTML5】html5开篇基础(3)

news2024/9/28 16:28:44

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客
📚所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

         学习前端知识,更好的运用它

📘 持续更新中,敬请期待❤️❤️

这篇文章我们讲表格。

表格学习整体可以分为三大部分:
1.表格的相关标签
2.表格的相关属性
3.合并单元格

2.表格的相关标签 

在HTML中,创建表格的基本标签包括:

  1. <table>:定义一个表格。

  2. <thead>:定义表格的表头部分。用于将表头单元格(<th>)分组在一起,提供一种结构化的方式来组织表格的头部。可以包含多个行(<tr>),而不仅仅是一行表头。只是单纯语义化,不会对内容做任何修饰。

  3. <tbody>:定义表格的主体部分,包含实际的数据行。只是单纯语义化,不会对内容做任何修饰。

  4. <tr>:定义表格的一行(row)。

  5. <th>:定义表格头部单元格(header cell),通常用于表头中的内容,文本通常为粗体且居中显示。

  6. <td>:定义表格的单元格(data cell),用于包含表格中的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>上海</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

 

3.表格的相关属性

表格标签这部分属性我们实际开发我们不常用,后面通过CSS 来设置。

  除此还有heigh等属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>人员信息表</title>
    </head>

    <body>

        <table align=center border="4" cellpadding="10" cellspacing="5" width="100" height="200">
            <thead>
                <tr>
                    <th>姓名</th> <!-- 表头单元格 -->
                    <th>年龄</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td> <!-- 数据单元格 -->
                    <td>25</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>30</td>
                    <td>上海</td>
                </tr>
                <tr>
                    <td>王二</td>
                    <td>25</td>
                    <td>广州</td>

                </tr>
            </tbody>
        </table>

    </body>

    </html>

</body>

</html>

 


 4.合并单元格

在 HTML 中,可以使用 <table> 标签创建表格,并通过 rowspancolspan 属性来合并单元格。

  • rowspan 用于垂直合并单元格(跨越多行)
  • colspan 用于水平合并单元格(跨越多列)
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格示例</title>

</head>

<body>
    <table border="2">
        <tr>
            <th>标题1</th>
            <th colspan="2">合并标题</th> <!-- 合并两个列 -->
        </tr>
        <tr>
            <td rowspan="2">合并行</td> <!-- 合并两行 -->
            <td>数据1</td>
            <td>数据2</td>
        </tr>
        <tr>
            <td>数据3</td>
            <td>数据4</td>
        </tr>
    </table>
</body>

</html>


由上可知如果要合并单元格我们 rowspancolspan 所要针对的单元格是 左上 的单元格。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2174077.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

带您了解《人工智能机器视觉应用工程师》

人工智能机器视觉应用是指利用人工智能技术和机器视觉技术相结合&#xff0c;使机器能够像人类一样通过视觉感知和理解环境&#xff0c;从而实现各种应用。随着人工智能技术的不断发展&#xff0c;机器视觉应用在各个领域得到了广泛应用。 在工业制造领域&#xff0c;人工智能机…

Unity3D入门(三) : Android和Unity3D交互 - Android调用Unity

1. 前言 上篇文章&#xff0c;我们讲了如何在Unity3D中过渡地切换相机视角。这篇文章&#xff0c;我们来讲一下Unity3D怎么与Android交互。 1.1 unity和Android的三种通信方式 Unity官方提供的接口 : 有一个弊端&#xff0c;它有一个传输内容量的一个限制&#xff0c;传输内…

Java---异常及处理

一.异常 1.概念 程序的非正常执行。高级语言都有异常处理机制&#xff08;C&#xff0c;Java&#xff09; 2.一般处理异常的方法 Scanner sc new Scanner(System.in);System.out.println("请输入一个数字:");String s sc.nextLine();if (s.matches("[0-9]&qu…

数据结构 - 排序算法

一.冒泡排序 /*** description: 冒泡排序* param - a : 要进行排序的数组的指针* param - length : 数组中元素的个数* return : 无 */ void Bubble_sort(int *a,int length) {int temp,i,j;for(i 0;i < length -1;i){for(j…

基于SpringBoot+Vue的小儿推拿培训管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

SSM框架VUE电影售票管理系统开发mysql数据库redis设计java编程计算机网页源码maven项目

一、源码特点 smm VUE电影售票管理系统是一套完善的完整信息管理类型系统&#xff0c;结合SSM框架和VUE、redis完成本系统&#xff0c;对理解vue java编程开发语言有帮助系统采用ssm框架&#xff08;MVC模式开发&#xff09;&#xff0c;系 统具有完整的源代码和数据库&#…

Vue devtools 插件

一、安装 去这下载https://chrome.zzzmh.cn/ 打开chrome的扩展程序 再打开开发模式 把刚才下载的拖到这里 然后把它固定到工具栏 就是这样了。 二、使用 程序通过open on live server后&#xff0c;打开开发者工具&#xff0c;找到vue就可以了。 这是代码 <div id"ap…

C++ 基础入门-命名空间、c++的输入输出、缺省参数、函数重载、引用、内联函数超详细讲解

这篇文章主要对c的学习做一个基础铺垫&#xff0c;方便后续学习。主要通过示例讲解命名空间、c的输入输出cout\cin&#xff0c;缺省参数、函数重载、引用、内联函数&#xff0c;auto关键字&#xff0c;for循环&#xff0c;nullptr以及涉及到的周边知识&#xff0c;面试题等。为…

遍历递归数结构,修改里的disabled值

返回参数中新增字段 disabled,后端给的值为1和2, disabled1时&#xff0c;代表该节点需要置灰&#xff0c;不可选中 现在需要将disabled的值,改为布尔类型; 后端给的数结构是对象类型,tree接收数组类型; 先将对象类型的数据,遍历递归,修改里面的disabled值,最后再加[ ],改为…

Magnific推V2图像生成服务 可直出4K图像

人工智能 - Ai工具集 - 集合全球ai人工智能软件的工具箱网站 近日&#xff0c;AI图像处理领域再迎重大突破&#xff0c;Magnific推出的V2图像生成服务引领行业潮流。此次升级&#xff0c;不仅使Magnific从高端软件跻身为顶级AI图像生成器&#xff0c;更彰显了其在技术创新及用…

html+css+js实现Progress 进度条

实现效果 代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>progress</title><st…

动手学深度学习(李沐)PyTorch 第 4 章 多层感知机

4.1 多层感知机 隐藏层 我们在 3.1.1.1节中描述了仿射变换&#xff0c; 它是一种带有偏置项的线性变换。 首先&#xff0c;回想一下如 图3.4.1中所示的softmax回归的模型架构。 该模型通过单个仿射变换将我们的输入直接映射到输出&#xff0c;然后进行softmax操作。 如果我们…

5V继电器模块详解(STM32)

目录 一、介绍 二、模块原理 1.原理图 2.引脚描述 3.工作原理介绍 三、程序设计 main.c文件 relay.h文件 relay.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 继电器(Relay)&#xff0c;也称电驿&#xff0c;是一种电子控制器件&#xff0c;它具有控制系统…

力扣75道热门算法题 第一天

1768、交替合并字符串 题解&#xff1a; class Solution {public String mergeAlternately(String word1, String word2) {int m word1.length(),n word2.length();int i 0, j 0; //双指针遍历两个数组StringBuilder sb new StringBuilder(); //生成一个StringBuilder对象…

如何禁止电脑上某个软件运行?电脑设置禁止运行软件的4个方法速成

在日常使用电脑的过程中&#xff0c;可能会遇到需要禁止某些软件运行的情况。 无论是为了防止员工随意使用与工作无关的软件&#xff0c;还是为了管理孩子的电脑使用时间&#xff0c;禁止特定软件运行都是有效的解决方案。 下面介绍4个速成方法&#xff0c;帮你轻松禁止电脑上…

AlmaLinux 9 安装mysql8.0.38

文件下载 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.39-linux-glibc2.12-x86_64.tar 选择合适系统版本 下载后解压 tar -xvf mysql-8.0.39-linux-glibc2.12-x86_64.tar解压后里面有三个文件夹 使用mysql-8.0.39-linux-glibc2.12-x86_64.tar.xz即可&#xff0c…

《牧神记》PV初体验,玄机科技再塑经典国漫

2024年9月26日《牧神记》动画版在Bilibili正式宣布定档于10月27日&#xff0c;并在各大社交媒体平台上发布系列精美海报&#xff0c;瞬间点燃了广大动漫爱好者的热情与期待&#xff01;作为一个长期关注国产动画的漫迷&#xff0c;我对玄机科技的作品一直抱有很高的期待&#x…

Ubuntu 16.04安装填坑记录

一. 问题描述&#xff1a; &#xff08;1&#xff09;Ubuntu 16.04使用USB启动盘安装时&#xff0c;出现"try ubuntu without installation"或“install ubuntu”选择&#xff0c;Enter选择安装后&#xff0c;显示器黑屏无任何显示。 原因分析&#xff1a; 显示黑…

26:WDG看门狗

WDG看门狗 1、看门狗的简介2、独立看门狗3、窗口看门狗4、独立看门狗代码5、窗口看门狗代码 1、看门狗的简介 1、看门狗的作用是监控程序的运行状态。当程序因为设计漏洞、硬件故障、电磁干扰等原因&#xff0c;出现卡死或跑飞现象时&#xff0c;看门狗能及时复位程序&#xf…

现行经济下,兜底的生存方式是什么?

最近在网上看到一个问题&#xff0c;在经济下行的时候&#xff0c;兜底的生存方式是什么,看到之后&#xff0c;就随便写写。 在现在的经济环境下&#xff0c;看看网上的裁员、降薪信息 到底什么才是兜底的生存方式&#xff0c;原来认识的人&#xff0c;包括我自己也在想失业后…