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

HTML 表格及练习

news 2025/7/13 18:59:12

表格

概述

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

  • 由单元格组成。

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

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

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

  • 基本结构

    <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

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/7/9 1:18:48

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

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

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

编程新知 2025/7/10 16:11:12

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/7/10 7:46:14

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/7/12 12:50:10

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/7/13 9:31:57

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/6/23 15:05:31

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/20 15:09:15

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/7/11 21:04:39

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/7/11 23:09:41