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

HTML 表格及练习

news 2025/10/23 21:20:17

表格

概述

  • 表格是一种二维结构，横行纵列。

  • 由单元格组成。

  • 表格是一种非常“强” 的结构：

  • 每一行有相同的列数（单元格），每一列有相同的行数（单元格）

  • 同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高

  • 基本结构

    <table><tr><td></td></tr>
</table>

<table>

  • 定义表格

  • <table> 标签属性

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

  • table 通用属性<table>,<tr>,<td>都识别的属性

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

<tr>

  • 定义行

  • <tr> 标签属性

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

<td>

  • 定义单元格

  • 合并单元格

    image-20231017141714183

    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>

image-20231017143353786

跨行表格

<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>

image-20231017143741193

跨列表格

<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>

image-20231017144621076

跨行跨列表格

<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>

image-20231017144052726

相关文章：

HTML 表格及练习

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

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

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

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

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

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

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

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

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

10.0 概述 本章包含了一个例子&#xff1a;如何用Linux性能工具在受CPU限制的应用程序中寻找并修复性能问题。 阅读本章后&#xff0c;你将能够&#xff1a; 在受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 *天下之大&#xff0c;虽离家万里&#xff0c;何处不可往&#xff01;何事不可为&#xff01; 1. ALBERT \qquad ALBERT的英文全称为A Lite versi…...

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

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

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

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

python---三目运算符

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

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

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

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

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

Vue3响应式原理初探

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

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

firewalld常用的基础配置

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

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

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

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

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

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

LiveGBS流媒体平台GB/T28181常见问题-安全控制HTTP接口鉴权勾选流地址鉴权后401 Unauthorized如何播放调用接口&#xff1f; 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 是两个经常在计算机和网络安全中使用的术语&#xff0c;两者都是用于身份验证的机制&#xff0c;但它们之间还是存在一些区别的。 password password 通常是指用户自己设置的一串字符&#xff0c;用于保护自己的账户安全。密码通常是静态的&#xff0c;…...

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

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

单行文本&#xff1a; .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 &#xff0c;set &#xff0c;map接口当中都可以获取不可变集合 方法名称说明static list of(E …elements)创建一个具有指定元素集合list集合对象staticlist of(E…elements)创…...

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

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

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

编程日记 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串口&#xff08;USART&#xff09;收发数据&#xff08;三&#xff09; 开发涉及工具一、选定所使用的串口二、配置串口1.配置串口的I/O2.配置串口参数属性3.配置串口中断4.串口中断在哪里处理5.串口如何发送字符串 三、封装串口配置库文件1.创建头文…...

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

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/10/19 17:23:52

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/10/21 23:40:10

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/10/22 15:29:45

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/9/22 1:53:57

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/9/30 21:35:55

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/7/27 8:17:48

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2025/10/19 21:40:22