HTML CSS 基础复习笔记 - 表格标签使用

news2024/10/6 2:03:41

目的:部分标签并不使用,但是其存在,创建案例,方便自己复习

关于表格的所有标签使用、说明

HTML代码:

        <!-- 表格学习 -->
        <table border="1px">
          <caption>表格学习</caption>
          <colgroup>
            <col style="width: auto; background-color: #b89898;">
            <col style="width: auto; background-color: #ea8ec2;">
          </colgroup>
          <thead>
            <tr>
              <th>姓名</th>
              <th>数学</th>
              <th>语文</th>
              <th>总分</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>张三</td>
              <td>80</td>
              <td>99</td>
              <td>179</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>77</td>
              <td>100</td>
              <td>177</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">平均分</td>
              <td>178</td>
            </tr>
          </tfoot>
        </table>

效果:

标签说明:

        1、<table> 元素表示表格数据

        2、<caption>:表格标题元素

        3、<colgroup>:表格列组元素 -- 定义表格某列的样式

        4、<col>:表格列元素 -- 定义表格某列的样式

        5、<thead> -- 定义了一组定义表格的列头的行,子元素为tr、th

        6、<tr> -- 定义了表格中的一行单元格,子元素为td

        7、<th> -- 定义表格内的标题(或是表头)单元格

        8、<tbody> -- 表格(<table>)主要内容的组成部分,子元素为tr、td

        9、<td> -- 定义了表格中的一个数据单元格,该单元格包含数据

        10、<tfoot> -- 定义了一组表格中各列的汇总行,子元素为tr、td

标签属性:

  1. table属性

    • border:该属性用于设置围绕表格及其单元格的边框宽度。
    • width:用于设定表格的宽度,可以以像素或百分比为单位。
    • height:此属性用于设定表格的高度,但需要注意的是,在XHTML中,<table>标签没有这个属性。
    • background:用于定义表格的背景图像URL。
    • align:规定表格相对于周围元素的对齐方式,其值可以是左(left)、居中(center)或右(right)对齐。
    • bgcolor:设置表格的背景颜色,可以使用颜色名称、十六进制代码或RGB值。
    • bordercolor:专门用于指定表格边框的颜色。
    • cellspacing:定义单元格之间的空间大小,通常以像素为单位。
    • rules:该属性决定了内部单元格边框的显示,取值为none、cols、rows或all。
    • frame:类似于rules属性,但仅应用于表格的外边框。
    • cellpadding:用于设置单元格的边框与内容之间的空间大小。
  2. 行(tr)的属性

    • bgcolor:用于设置内容行的背景颜色。
    • border:定义内容行的边框宽度。
    • background:为内容行设置一个背景图像。
    • align:用于指定整行内容的水平对齐方式,可能的值有左(left)、居中(center)和右(right)。
    • valign:定义整行内容的垂直对齐方式,包括上(top)、中(middle)和下(bottom)。
    • bordercolor:设置内容行边框的颜色。
  3. 单元格(td和th)的属性

    • width:用于指定单元格的宽度。
    • height:用于设定单元格的高度,但在XHTML中不适用。
    • bgcolor:用于定义单元格的背景颜色。
    • border:定义单元格边框的宽度。
    • background:用于定义单元格的背景图像。
    • align:设置单元格内容的水平对齐方式,可取值为左(left)、居中(center)和右(right)。
    • valign:设置单元格内容的垂直对齐方式,包括上(top)、中(middle)和下(bottom)。
    • colspan:指定单元格向右跨越多少列。
    • rowspan:用于指定单元格向下跨越多少行。

结束 --- 

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

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

相关文章

STM32-Unix时间戳和BKP备份寄存器以及RTC实时时钟

本内容基于江协科技STM32视频学习之后整理而得。 文章目录 1. Unix时间戳1.1 Unix时间戳简介1.2 UTC/GMT1.3 时间戳转换 2. BKP备份寄存器2.1 BKP简介2.2 BKP基本结构2.3 BKP库函数 3. RTC实时时钟3.1 RTC简介3.2 RTC框图3.3 RTC基本结构3.4 硬件电路3.5 RTC操作注意事项3.6 R…

使用qt creator配置msvc环境(不需要安装shit一样的宇宙第一IDE vs的哈)

1. 背景 习惯使用Qt编程的童鞋&#xff0c;尤其是linux下开发Qt的童鞋一般都是使用qt creator作为首选IDE的&#xff0c;通常在windows上使用Qt用qt creator作为IDE的话一般编译器有mingw和msvc两种&#xff0c;使用mingw版本和在linux下的方式基本上一样十分简单&#xff0c;不…

在linux系统centos上面安装php7gmp扩展

ps:在ubuntu上面安装gmp(最简单) $ sudo apt-get install php7.0-gmp然后再php.ini添加extensionphp_gmp.so <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<…

论文略读: LLaMA Pro: Progressive LLaMA with Block Expansion

ACL 2024 人类通常在不损害旧技能的情况下获得新技能 然而&#xff0c;对于大型语言模型&#xff08;LLMs&#xff09;&#xff0c;例如从LLaMA到CodeLLaMA&#xff0c;情况正好相反。深度学习笔记&#xff1a;灾难性遗忘-CSDN博客——>论文提出了一种用于LLMs的新的预训练…

移动硬盘“需格式化”预警:专业数据恢复指南

移动硬盘“需格式化”危机&#xff1a;了解背后的真相 在日常的数字生活中&#xff0c;移动硬盘作为我们存储重要数据的“保险箱”&#xff0c;其稳定性与安全性直接关系到我们信息的完整与便捷访问。然而&#xff0c;当您尝试打开移动硬盘时&#xff0c;屏幕上赫然出现的“需…

Ubantu22.04 通过FlatPak安装微信

Ubuntu22.04 下使用Flatpak稳定安装微信&#xff01; 国际惯例&#xff0c;废话不多说&#xff0c;先上效果图。为啥使用Flatpak,因为Wechat官方只在FlatPak发布了最新的版本。之前使用了Wine以及Dock安装Wechat,效果都不是很理想&#xff0c;bug很多。所以使用了FlatPak。 Fl…

恢复出厂设置手机变成砖

上周&#xff0c;许多Google Pixel 6&#xff08;6、6a、6 Pro&#xff09;手机用户在恢复出厂设置后都面临着设备冻结的问题。 用户说他们在下载过程中遇到了丢失 tune2fs 文件的错误 。 这会导致屏幕显示以下消息&#xff1a;“Android 系统无法启动。您的数据可能会被损坏…

AI编程探索- iOS 实现类似苹果地图 App 中的半屏拉起效果

想要的效果 功能分析 想要实现这种效果&#xff0c;感觉有点复杂&#xff0c;于是就想搜一下相关资料看看&#xff0c;可问题是&#xff0c;我不知道如何描述这种效果&#x1f602;。 当我们遇到这种效果看着很熟悉&#xff0c;但是不知道如何描述它具体是什么的时候&#…

1、spring5.2.x源码解读之下载源码和编译

1、下载源码 1.1、git下载源码 git地址&#xff1a;https://gitcode.net/mirrors/spring-projects/spring-framework.git 1.2、源码导入idea 源码下载地址&#xff1a;https://gitcode.net/mirrors/spring-projects/spring-framework/-/archive/5.2.x/spring-framework-5.2…

Redis基本命令源码解析-字符串命令

1. set 用于将kv设置到数据库中 2. mset 批量设置kv mset (msetnx) key1 value1 key2 value2 ... mset:msetCommand msetnx:msetnxCommand msetCommand和msetnxCommand都调用msetGenericCommand 2.1 msetGenericCommand 如果参数个数为偶数,则响应参数错误并返回 如果…

3.js - 模板渲染 - 金属切面效果

md&#xff0c;狗不学&#xff0c;我学 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.m…

[搭建个人网站] 云服务器 or 本地环境搭建

别人没有的&#xff0c;你有&#xff0c;你就牛。 面试&#xff0c;吹牛皮的时候 都可以拉出来溜溜 本文介绍2种搭建网站模式方式&#xff1a;区别嘛&#xff08;花钱跟不花钱&#xff09; 花钱&#xff1a; 1. 先购买个域名。。&#xff08;这里就不多介绍了&#xff0c;随便…

Codeforces Round 955 E. Number of k-good subarrays【分治、记忆化】

E. Number of k-good subarrays 题意 定义 b i t ( x ) bit(x) bit(x) 为 x x x 的二进制表示下 1 1 1 的数量 一个数组的子段被称为 k − g o o d k-good k−good 的当且仅当&#xff1a;对于这个子段内的每个数 x x x&#xff0c;都有 b i t ( x ) ≤ k bit(x) \leq k…

ESP32 蓝牙网关实践:BLE 设备数据采集与 MQTT 云平台发布(附代码示例)

摘要: 本文详细介绍了如何使用 ESP32 构建强大的蓝牙网关&#xff0c;实现蓝牙设备与 Wi-Fi/互联网之间的无缝连接和数据桥接。文章涵盖了连接和桥接功能、数据处理和分析能力&#xff0c;并提供了详细的代码示例和 Mermaid 生成的图表&#xff0c;助您轻松构建自己的蓝牙网关解…

仿写Spring IOC

文章目录 IOC思路手写代码思路一些杂七杂八&#xff08;可跳过&#xff09; IOC思路 手写代码思路 手写代码的思路: 自定义一个MyAnnotationConfigApplicationContext&#xff0c;构造器中传入要扫描的包。获取这个包下的所有类。遍历这些类&#xff0c;找出添加了Component注…

Ubuntu 安装CGAL

一、什么是CGAL CGAL&#xff08;Computational Geometry Algorithms Library&#xff09;是一个广泛使用的开源库&#xff0c;主要用于计算几何算法的实现。该库提供了一系列高效、可靠和易于使用的几何算法和数据结构&#xff0c;适用于各种应用领域。以下是 CGAL 的主要功能…

ubuntu下载Nginx

一、Nginx下载安装&#xff08;Ubuntu系统&#xff09; 1.nginx下载 sudo apt-get install nginx2.nginx启动 启动命令 sudo nginx重新编译(每次更改完nginx配置文件后运行&#xff09;&#xff1a; sudo nginx -s reload3.测试nginx是否启动成功 打开浏览器访问本机80端口…

09.QT控件:按钮类控件

1. QPushButton 在QT中使⽤ QPushButton 表⽰⼀个按钮。QPushButton 继承⾃ QAbstractButton&#xff0c;这个类是⼀个抽象类&#xff0c;是其他按钮的⽗类。 &#xff08;1&#xff09;QAbstractButton 中&#xff0c;和 QPushButton 相关性较⼤的属性&#xff1a; &#xf…

独立开发者系列(21)——HTTP协议的使用

作为网络访问的必备知识点&#xff0c;http协议&#xff0c;我们已经知道http协议属于tcp的一种&#xff0c;而且一般是用于网络通讯的&#xff0c;但是本身http协议本身包含的内容也很多&#xff0c;正是因为有这种协议&#xff0c;前后端和各种硬件接口/服务器接口/前端&…

OpenGL笔记七之顶点数据绘制命令和绘制模式

OpenGL笔记七之顶点数据绘制命令和绘制模式 —— 2024-07-07 杭州 下午 总结自bilibili赵新政老师的教程 文章目录 OpenGL笔记七之顶点数据绘制命令和绘制模式1.OpenGL版本号更改和编译更改2.GL_TRIANGLES模式绘制一个三角形、支持NFC坐标随窗口缩放2.1.三个点2.2.四个点从0号…