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

HTML 表格及练习

news 2026/3/28 1:18:54

表格

概述

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

  • 由单元格组成。

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

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

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

  • 基本结构

    <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

【Zynq 进阶一】深度解析 PetaLinux 存储布局：NAND Flash 分区与 DDR 内存分配全攻略

【Zynq 进阶】深度解析 PetaLinux 存储布局&#xff1a;NAND Flash 分区与 DDR 内存分配全攻略 文章目录【Zynq 进阶】深度解析 PetaLinux 存储布局&#xff1a;NAND Flash 分区与 DDR 内存分配全攻略&#x1f4dd; 前言&#x1f4e6; 第一部分&#xff1a;大局观——NAND 与 D…...

编程新知 2026/3/27 22:26:15

PlayCover如何重塑Mac游戏体验？社交与云服务革新玩法深度解析

PlayCover如何重塑Mac游戏体验&#xff1f;社交与云服务革新玩法深度解析 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover PlayCover作为一款开源的Mac iOS模拟器&#xff0c;通过深度整合Discord社交功…...

编程新知 2026/3/27 21:56:02

保姆级教程：在Ubuntu 20.04上搞定海思SS524/SS522 SDK编译与固件烧录

海思SS524/SS522开发实战&#xff1a;从零构建嵌入式Linux系统的完整指南 作为一名长期深耕嵌入式开发的工程师&#xff0c;我深知从零开始搭建一个完整的开发环境有多么令人头疼。特别是当你拿到一块全新的开发板&#xff0c;面对陌生的SDK和工具链时&#xff0c;那种既兴奋又…...

编程新知 2026/3/27 21:39:57

开发提效新组合：用Cursor生成代码片段，在快马一键集成与部署

最近在做一个数据整理的小工具时&#xff0c;发现了一个特别高效的工作流组合&#xff1a;先用Cursor快速生成核心代码片段&#xff0c;再用InsCode(快马)平台一键整合部署。整个过程就像搭积木一样顺畅&#xff0c;特别适合需要快速实现功能模块的场景。 需求分析 我们经常要处…...

编程新知 2026/3/27 21:37:57

告别手动复制！用ArcGIS字段计算器（VB/Python）批量提取字段值的保姆级教程

ArcGIS字段计算器实战指南&#xff1a;VB与Python高效提取字段值的深度对比 在GIS数据处理工作中&#xff0c;属性表字段值的部分提取是最常见却又最耗时的操作之一。想象一下&#xff0c;当你面对一个包含上万条记录的"BSM"字段&#xff0c;需要提取前6位作为行政区…...

编程新知 2026/3/27 21:19:48

QT窗口特效实战：从透明到异形控件的全方位实现指南

1. 从零开始理解QT窗口特效 第一次接触QT窗口特效时&#xff0c;我被那些酷炫的透明和异形界面深深吸引。记得当时看到Mac OS X的Dock栏那种毛玻璃效果&#xff0c;就特别想在自己的QT应用中实现类似效果。经过多年实战&#xff0c;我发现QT实现这些特效其实比想象中简单得多。…...

编程新知 2026/3/27 20:51:39

Wan2.2-I2V-A14B镜像免配置实战：开箱即用，省去PyTorch/CUDA环境冲突烦恼

Wan2.2-I2V-A14B镜像免配置实战&#xff1a;开箱即用&#xff0c;省去PyTorch/CUDA环境冲突烦恼 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;基于RTX 4090D 24GB显存显卡和CUDA 12.4环境深度定制。这个镜像的最大特点是开箱…...

编程新知 2026/3/27 20:23:30

Dual-Tree Agent RAG：可控、可解释、可验证

从文本检索到方法推理的跃迁 传统RAG系统将文档切分为平面文本块&#xff0c;通过向量相似度检索来增强大模型生成。这种模式在简单事实问答中表现良好&#xff0c;却难以应对需要全局结构理解、跨章节整合和方法论复用的复杂创新任务。现有改进方案如RAPTOR&#xff08;层次摘…...

编程新知 2026/3/27 20:17:08

牛顿-拉夫逊法在电力系统中的5个常见误区：从Matpower仿真结果反推算法原理

牛顿-拉夫逊法在电力系统中的5个常见误区&#xff1a;从Matpower仿真结果反推算法原理 当你在Matpower中运行潮流计算时&#xff0c;是否遇到过迭代不收敛的报错&#xff1f;那些看似简单的"Maximum number of iterations reached"警告背后&#xff0c;往往隐藏着对牛…...

编程新知 2026/3/27 19:40:58

VitePress 博客主题定制与美化实战

1. VitePress主题美化的核心思路 很多开发者在使用VitePress搭建博客时&#xff0c;都会遇到一个共同的问题&#xff1a;默认主题虽然简洁&#xff0c;但缺乏个性。我在实际项目中发现&#xff0c;通过CSS变量覆盖、自定义组件和插件扩展这三个维度&#xff0c;可以打造出极具辨…...

编程新知 2026/3/27 19:00:48