当前位置：首页 > news >正文

HTML 表格及练习

news 文章来源：https://blog.csdn.net/weixin_51559599/article/details/133883653 2025/2/12 19:59:54

表格

概述

表格是一种二维结构，横行纵列。
由单元格组成。
表格是一种非常“强” 的结构：

每一行有相同的列数（单元格），每一列有相同的行数（单元格）
同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高
基本结构
```
<table><tr><td></td></tr>
</table>
```

`<table>`

定义表格
<table> 标签属性

属性举例效果
border border=“0”
border=“1” 无边框
有边框
cellspacing cellspacing=“20” 设置边框与边框的距离
cellpadding cellpadding=“10” 设置边框与内容之间的距离
table 通用属性<table>,<tr>,<td>都识别的属性

属性值举例效果
align left/center/right align=“center” 居中
width 百分比/数字 width="80%"或 width=“800” 设置宽度
height 百分比/数字 height="20%"或 height=“100” 设置高度

属性	举例	效果
border	border=“0” border=“1”	无边框有边框
cellspacing	cellspacing=“20”	设置边框与边框的距离
cellpadding	cellpadding=“10”	设置边框与内容之间的距离

属性	值	举例	效果
align	left/center/right	align=“center”	居中
width	百分比/数字	width="80%"或 width=“800”	设置宽度
height	百分比/数字	height="20%"或 height=“100”	设置高度

`<tr>`

定义行
<tr> 标签属性

属性值举例效果
valign top/middle/bottom valign=“top” 在行顶

属性	值	举例	效果
valign	top/middle/bottom	valign=“top”	在行顶

`<td>`

定义单元格
合并单元格

colspan 用于跨列合并 (横向)
```
<td colspan = "2"></td>
```
删除第四列，第三列的 colspan 的值设置为2

rowspan 用于跨行合并 (纵向)
```
<td rowspan = "3"></td>
```

练习

基本表格

<html><head><meta charset="utf-8"></head><body><table border="1"><tr><td>(1,1)</td><td>(1,2)</td><td>(1,3)</td></tr><tr><td>(2,1)</td><td>(2,2)</td><td>(2,3)</td></tr><tr><td>(3,1)</td><td>(3,2)</td><td>(3,3)</td></tr></table></body>
</html>

跨行表格

<html><head><meta charset="utf-8"></head><body><table border="1" width="300"><tr align="center"><td rowspan="2">语文</td><td>韩梅梅</td><td>98</td></tr><tr align="center"><td>李磊</td><td>88</td></tr><tr align="center"><td rowspan="2">数学</td><td>韩梅梅</td><td>95</td></tr><tr align="center"><td>李磊</td><td>12</td></tr></table></body>
</html>

跨列表格

<html><head><meta charset="utf-8"></head><body><table border="1" width="300"><tr><td colspan="3"  align="center">学生成绩</td></tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>99</td></tr></table></body>
</html>

跨行跨列表格

<html><head><meta charset="utf-8"></head><body><table border="1" width="300"><tr><td colspan="3" align="center">学生成绩</td></tr><tr align="center"><td rowspan="2">语文</td><td>韩梅梅</td><td>98</td></tr><tr align="center"><td>李磊</td><td>88</td></tr><tr align="center"><td rowspan="2">数学</td><td>韩梅梅</td><td>95</td></tr><tr align="center"><td>李磊</td><td>12</td></tr></table></body>
</html>

HTML 表格及练习

表格概述表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构： 每一行有相同的列数（单元格），每一列有相同的行数（单元格） 同一列的单元格，宽度&#…...

编程日记 2023/10/19 8:21:51

YOLOv5-训练自己的VOC格式数据集（VOC、自建数据集）

YOLOv5：训练自己的 VOC 格式数据集 1. 自定义数据集 1.1 环境安装 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple注意： 安装 lxmlPillow 版本要低于 10.0.0，解释链接: module ‘PIL.Image’ has no attri…...

编程日记 2023/10/19 8:20:50

基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)

文章目录前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序（小蔡coding） 代码参考数据库参考源码获取前言 💗博主介绍：✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…...

编程日记 2023/10/19 8:19:49

Linux性能优化--性能追踪：受CPU限制的应用程序（GIMP）

10.0 概述本章包含了一个例子：如何用Linux性能工具在受CPU限制的应用程序中寻找并修复性能问题。阅读本章后，你将能够： 在受CPU限制的应用程序中明确所有的CPU被哪些源代码行使用。用1trace和oprofile弄清楚应用程序调用各种内部与外部函…...

编程日记 2023/10/19 8:18:47

BERT变体（1）：ALBERT、RoBERTa、ELECTRA、SpanBERT

Author:龙箬 Computer Application Technology Change the World with Data and Artificial Intelligence ! CSDNweixin_43975035 *天下之大，虽离家万里，何处不可往！何事不可为！ 1. ALBERT \qquad ALBERT的英文全称为A Lite versi…...

编程日记 2023/10/19 8:17:46

域控操作二：设置域用户使用简单密码

过程太多简单直接写出路径更改即可组策略—计算机配置----策略—Windows设置–安全设置----账户策略–密码策略按自己想法改就行了注意一点！！！！！ 要么自己设置策略，要么从默认策略改！&am…...

编程日记 2023/10/19 8:16:45

python---三目运算符

在Python中三目运算符也叫三元运算符，其主要作用：就是用于简化if...else...语句。基本语法： 原 if 条件判断: # 语句段1 else: # 语句段2 新-----三目运算符/三元运算符语句段1 if 条件判断 else 语句段2 案例输入两个数…...

编程日记 2023/10/19 8:15:44

百度地图定位BMap.GeolocationControl的用法

BMap.GeolocationControl 是百度地图API中的一个类，用于添加地理定位控件到地图上，以便用户可以通过该控件获取自己的当前位置。以下是 BMap.GeolocationControl 的用法示例： 首先，确保已经加载了百度地图API，并且创建…...

编程日记 2023/10/19 8:14:43

Vue3响应式原理初探

vue3响应式原理初探为什么要使用proxy取代defineProperty使用proxy如何完成依赖收集呢？ 为什么要使用proxy取代defineProperty 原因1：defineproperty无法检测到原本不存在的属性。打个🌰 new Vue({data(){return {name:wxs,age:25}}})在vue…...

编程日记 2023/10/19 8:13:42

firewalld常用的基础配置

firewalld防火墙是centos7系统默认的防火墙管理工具，取代了之前的iptables防火墙，也是工作在网络层，属于包过滤防火墙。支持IPv4、IPv6防火墙设置以及以太网桥支持服务或应用程序直接添加防火墙规则接口拥有两种配置模式：临时模…...

编程日记 2023/10/19 8:12:41

功率放大器如何驱动超声波换能器

驱动超声波换能器的功率放大器在超声波应用中起着至关重要的作用。它能够提供足够的功率和精确的信号控制，使换能器能够有效地将电能转换为超声波能量。下面安泰电子将介绍功率放大器如何驱动超声波换能器的原理和关键要点。首先，让我们了解一下超声波换…...

编程日记 2023/10/19 8:11:40

LiveGBS流媒体平台GB/T28181常见问题-安全控制HTTP接口鉴权勾选流地址鉴权后401Unauthorized如何播放调用接口

LiveGBS流媒体平台GB/T28181常见问题-安全控制HTTP接口鉴权勾选流地址鉴权后401 Unauthorized如何播放调用接口？ 1、安全控制1.1、HTTP接口鉴权1.2、流地址鉴权 2、401 Unauthorized2.1、携带token调用接口2.1.1、获取鉴权token2.1.2、调用其它接口2.1.2.1、携带 Co…...

编程日记 2023/10/19 8:10:39

红帽认证笔记2

文章目录 1.配置系统以使用默认存储库1.调试selinux2.创建用户账户3.配置cron4. 创建写作目录5. 配置NTP6.配置autofs配置文件权限容器解法1.修改journal配置文件2.重启服务3.拷贝文件到指定目录4.修改拥有人所属组5.修改umask6.切换elovodo用户7.登录容器仓库8.拉取镜像9.运行…...

编程日记 2023/10/19 8:09:38

程序开发中表示密码时使用 password 还是 passcode？

password 和 passcode 是两个经常在计算机和网络安全中使用的术语，两者都是用于身份验证的机制，但它们之间还是存在一些区别的。 password password 通常是指用户自己设置的一串字符，用于保护自己的账户安全。密码通常是静态的，…...

编程日记 2023/10/19 8:08:37

html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法

单行文本： .box{width: 200px;background-color: aqua;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }多行文本 1.利用-webkit-line-clamp属性 .box{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-l…...

编程日记 2023/10/19 8:07:37

6.SNMP报错-Error opening specified endpoint “udp6:[::1]:161“处理

启动SNMP服务 /etc/init.d/snmpd start 出现以下报错信息 [....] Starting snmpd (via systemctl): snmpd.serviceJob for snmpd.service failed because the control process exited with error code. See "systemctl status snmpd.service" and "journalctl…...

编程日记 2023/10/19 8:05:35

集合的进阶

不可变集合创建不可变的集合在创建了之后集合的长度内容都不可以变化静态集合的创建在list ，set ，map接口当中都可以获取不可变集合方法名称说明static list of(E …elements)创建一个具有指定元素集合list集合对象staticlist of(E…elements)创…...

编程日记 2023/10/19 8:04:31

【LeetCode刷题（数据结构与算法）】：数据结构中的常用排序实现数组的升序排列

现在我先将各大排序的动图和思路以及代码呈现给大家插入排序直接插入排序是一种简单的插入排序法，其基本思想是： 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中，直到所有的记录插入完为止，得到一个…...

编程日记 2023/10/19 8:01:27

【HTML+CSS】零碎知识点

公告滚动条 <!DOCTYPE html> <html><head><title>动态粘性导航栏</title><style>.container {background: #00aeec;overflow: hidden;padding: 20px 0;}.title {float: left;font-size: 20px;font-weight: normal;margin: 0;margin-left:…...

编程日记 2023/10/19 8:00:25

嵌入式开发学习之STM32F407串口（USART）收发数据（三）

嵌入式开发学习之STM32F407串口（USART）收发数据（三） 开发涉及工具一、选定所使用的串口二、配置串口1.配置串口的I/O2.配置串口参数属性3.配置串口中断4.串口中断在哪里处理5.串口如何发送字符串三、封装串口配置库文件1.创建头文…...

编程日记 2023/10/19 7:59:22

python：talib.BBANDS 画股价-布林线图

python 安装使用 TA_lib 安装主要在 http://www.lfd.uci.edu/~gohlke/pythonlibs/ 这个网站找到 TA_Lib-0.4.24-cp310-cp310-win_amd64.whl pip install /pypi/TA_Lib-0.4.24-cp310-cp310-win_amd64.whl 编写 talib_boll.py 如下 # -*- coding: utf-8 -*- import os impor…...

编程日记 2023/10/19 7:58:21

ESP32网络开发实例-自定义主机名称

自定义主机名称文章目录自定义主机名称1、软件准备2、硬件准备3、代码实现ESP32 的默认主机名是 expressif。但是，如果正在使用多个 ESP32 设备，并且在某些时候希望在软接入点模式下使用它们时通过名称来区分设备。例如，在基于物联网的项目中有多个节点，例如温度、湿度…...

编程日记 2023/10/19 7:57:21

【ELK 使用指南 3】Zookeeper、Kafka集群与Filebeat+Kafka+ELK架构（附部署实例）

EFLKK 一、Zookeeper1.1 简介1.2 zookeeper的作用1.3 Zookeeper的特点1.5 Zookeeper的数据结构1.6 Zookeeper的应用场景1.7 Zookeeper的选举机制（重要）1.7.1 第一次启动时1.7.2 非第一次启动时二、Zookeeper集群部署2.1 安装前准备2.2 安装 ZookeeperSt…...

编程日记 2023/10/19 7:56:20

手写redux的connect方法, 使用了subscribe获取最新数据

一. 公共方法文件 1. connect文件 import React, { useState } from "react"; import MyContext from "./MyContext"; import _ from "lodash";// 模拟react-redux的 connect高阶函数 const connect (mapStateToProps, mapDispatchToProps) &…...

编程日记 2023/10/19 7:55:18

数据结构--B树

目录回顾二叉查找树如何保证查找效率 B树的定义提炼 B树的插入和删除概括B树的插入方法如下 B树的删除导致删除时，结点不满足关键字的个数范围时（需要借） 如果兄弟不够借，需要合体回顾B树的删除 B树 B树的查找 …...

编程日记 2023/10/19 7:54:17

【音视频|ALSA】基于alsa-lib开发ALSA应用层程序--附带源码

😁博客主页😁：🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑：🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…...

编程日记 2023/10/19 7:51:15

嵌入式养成计划-43----QT QMainWindow中常用类的使用--ui界面文件--资源文件的添加--信号与槽

一百零九、QMainWindow中常用类的使用 109.1 菜单栏 QMenuBar 菜单栏 QMenuBar 最多只能有一个 109.2 工具栏 QToolBar 工具栏 QToolBar 可以有多个 109.3 状态栏QStatusBar 状态栏 QStatusBar 最多只能有一个 109.4 浮动窗口QDockWidget 浮动窗口可以有多个 109.5 代…...

编程日记 2023/10/19 7:50:14

【Yarn】清除Yarn的缓存，更新Yarn本身、更新项目的依赖项

要清除Yarn的缓存，可以运行以下命令： yarn cache clean这将清除Yarn的缓存目录。要更新Yarn本身，可以运行以下命令： yarn self-update这将下载并安装最新版本的Yarn。如果要更新项目的依赖项，可以运行以下命令&a…...

编程日记 2023/10/19 7:49:13

点云从入门到精通技术详解100篇-雨雾环境下多传感器融合SLAM方法（续）

目录 4 基于球面投影的激光视觉融合里程计 4.1 引言 4.2 视觉惯性里程计 4.2.1特征点提取与匹配...

编程日记 2023/10/19 7:48:12

解决GET请求入参@NotNull验证不生效问题

一、问题 get请求NotNull验证不生效二、解决方案两个步骤： 在该方法的controller类上加Validated；在参数面前加NotNull； 三、其他注解 //被注释的元素必须为null Null //被注释的元素不能为null NotNull //被注释的元素必须为true Ass…...

编程日记 2023/10/19 7:47:11

关于做血糖仪的网站/网站推广包括

目录一、产品形态 1、集群使用限制 1）限制概述 2）ACK集群配额限制 3）依赖底层云产品配额限制 2、ACK的优势一、产品形态更多介绍请点击：什么是容器服务Kubernetes版_容器服务Kubernetes版-阿里云帮助中心比较项专有版…...

编程日记 2025/2/12 18:08:55

开不锈钢公司怎么做网站/浙江网站seo

目录 1、什么是事务？ 2、事务的几个特性（ACID） 2.1、原子性(Atomicity) 2.2、一致性(Consistency) 2.3、隔离性(Isolation) 2.4、持久性(Durability) 3、MySQL中事务操作 3.1、隐式事务 3.2、显式事务 2.3、savepoint关键字 2.4、…...

编程日记 2025/2/12 17:09:03

品牌网站方案/注册百度账号免费

# codingutf-8import sysimport xlrdimport random#打开菜单excelworkbook xlrd.open_workbook(D:\\menu.xls)#计数器为0counters 0#默认继续YesOrNo ywhile 1:#判断计数器，最多能选择3次if counters<3:#判断继续还是退出，默认是继续的if YesOrNoy…...

编程日记 2025/2/12 10:52:26