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

HTML/CSS/JS学习笔记 Day4（HTML--C3 表格）

news 2025/7/8 2:43:28

跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day4 内容梳理：

目录

HTML 3.0 表格

3.1 表格标签

（1）语法

基本标签

表头字体加粗

（2）相关属性

（3）表格结构

基础的结构标签

合并单元格

3.2 列表标签

无序列表（重点）

有序列表

自定义列表（重点）

HTML 3.0 表格

3.1 表格标签

表格不是用来布局页面的，而是主要用于显示、展示数据。表格可以让数据以可读性很好的规整形式展示，将繁杂数据以简洁明了的方式展现。

（1）语法

基本标签
<table><tr><td>单元格内的文字</td>……</tr>……
</table>

<table></table>用于定义表格的标签

<tr></tr>用于定义表格中的行，<tr>双标签必须嵌套在<table>双标签中。

<td></td>用于定义表格中的单元格。<td>双标签必须嵌套在<tr>双标签中。

例子和效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table><tr>   <td>姓名</td> <td>性别</td> <td>年龄</td>   </tr><tr>   <td>张三</td> <td>男</td>  <td>20</td>    </tr><tr>   <td>李四</td> <td>男</td>  <td>21</td>    </tr></table>
</body>
</html>

表头字体加粗

另外，如果希望表头字体能更加显眼的话，可以把表头的标签从<td></td>换成<th></th>，呈现出居中的粗体字效果。

仍沿用上面的代码，改动如下

效果：

（2）相关属性

在实际开发中不常用到HTML的表格基本属性，因为一般是用CSS来设置。

属性名称

属性值

描述

align

left、center、right

规定表格相对周围元素的对齐方式。

border

1或””

规定表格单元是否拥有边框。

默认为””，表示没有边框。

cellpadding

像素值

规定单元边沿与其内容之间的空白，默认1像素。

cellspacing

像素值

规定单元格之间的空白，默认2像素。

width、height

像素值或百分比

规定表格的宽度、高度。

align，把表格放页面中央：

border，给表格加边框：

cellpadding，表格内容和边框之间的距离：

（这里加了20个像素的间距）

cellspacing，规定单元格之间的距离：

（不特地设置的话，默认cellspacing为2像素）

如果把cellspacing设为0，就是最为常见的单线表格：

width、height，给表格设置宽度和高度：

（3）表格结构

基础的结构标签

可将表格划分为两部分：表头区域（<thead>标签）、主体区域（<tbody>标签）。

例子：

合并单元格

合并单元格有两种方式：

  1. 跨行合并：rowspan=”合并单元格的个数”
  2. 跨列合并：colspan=”合并单元格的个数”

合并的代码写在目标单元格上。

如果是跨行合并（上图红色），最上侧单元格为目标单元格，在里面写合并代码。

如果是跨行合并（上图蓝色），最左侧单元格为目标单元格，在里面写合并代码。

合并的三个步骤：

第一步，先确定是跨行还是跨列。

第二步，找到目标单元格，在里面写上合并的代码（合并方式=“合并的数量”），比如<td colspan=”2”></td>

第三步，删除多余的单元格。

比如把下图中的2和3合并为一个单元格：（采用跨列合并）

合并前的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table width="200" height="100" border="1" cellspacing="0"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>
</body>
</html>

合并后的示图以及代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table width="200" height="100" border="1" cellspacing="0"><tr><td>1</td><td colspan=”2”></td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>
</body>
</html>

3.2 列表标签

表格用来展示数据，而列表是用来布局的。列表的特点是整齐、有序，用它布局会很方便且自由。

列表分为三类：无序列表、有序列表、自定义列表

标签名

列表类型

说明

<ul></ul>

无序列表

各个列表项无顺序，<li></li>标签之间可以包含任何标签。

<ol></ol>

有序列表

各个列表项有顺序，使用相对较少，<li></li>同上。

<dl></dl>

自定义列表

只能包含<dd><dt>标签，但<dt><dd>标签之内可以放任何标签。

无序列表（重点）

<ul>双标签代表无序列表，其中的列表则以<li>标签定义。

无序列表的基本语法格式：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>……
</ul>

比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无序列表</title>
</head>
<body><h4>选择哪个选项？</h4><ul><li>A.XXX</li><li>B.YYY</li><li>C.ZZZ</li></ul>
</body>
</html>

注意：

  • 无序列表的各个列表项之间是并列的，没有顺序之分。
  • <li></li>之间可以放其他标签，比如：

有序列表

<ol>双标签代表有序列表，各个列表项按照数字升序的方式来排列。

有序列表的基本语法格式：

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>……
</ol>

例子和效果:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有序列表</title>
</head>
<body><h4>积分排行榜</h4><ol><li>张三 10000</li><li>李四 2000</li><li>王五 100</li></ol>
</body>
</html>

自定义列表（重点）

<dl>双标签代表自定义列表，还会使用到命名项目的<dt>双标签、解释该项目的<dd>双标签。

自定义列表的基本语法格式：

<dl><dt>名词1</dt><dd>名词1的解释1</dd><dd>名词1的解释2</dd>……
</dl>

换句话说，如果<dl>标签代表盒子，<dd>标签就是盒子里装的东西，而<dt>是盒子上贴的标签（表明盒子都装了什么）。

例子和效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义列表</title>
</head>
<body><h4>其他</h4><dl><dt> 帮助中心 </dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl>
</body>
</html>

注意：<dl></dl>标签中只能出现<dd>、<dt>标签，不能出现其他标签。

相关文章：

HTML/CSS/JS学习笔记 Day4（HTML--C3 表格）

跟着该视频学习&#xff0c;记录笔记&#xff1a;【黑马程序员pink老师前端入门教程&#xff0c;零基础必看的h5(html5)css3移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p12&vd_source04ee94ad3f2168d7d5252c857a2bf358 Day4 内容梳理&#xff1a;…...

编程日记 2024/9/10 21:51:07

WPF中创建横向的ListView

在WPF中&#xff0c;要创建横向的ListView&#xff0c;您可以通过设置ItemsControl的ItemsPanel来改变其项的排列方向。以下是一个简单的示例&#xff0c;展示了如何将ListView的项横向排列&#xff1a; 在这个例子中&#xff0c;WrapPanel用于横向排列其子元素&#xff0c;而…...

编程日记 2024/9/10 21:50:06

A表和B表公共元素产生链表C

设A和B是两个单链表&#xff08;带头节点&#xff09;&#xff0c;其中元素递增有序。设计一个算法从A到B的公共元素产的C表&#xff08;交集&#xff09;&#xff0c;要求不破坏A&#xff0c;B的节点。 思想&#xff1a;依次比较A&#xff0c;B表中的元素&#xff0c;相同时&…...

编程日记 2024/9/10 21:48:03

Rust运算符

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) https://blog.csdn.net/brucexia/category_12779443.html 前面已经学习了变量和常量&#xff0c;本节开始对它们进行操作&#xff0c…...

编程日记 2024/9/10 21:47:03

Oracle rman 没有0级时1级备份和0级大小一样，可以用来做恢复 resetlogs后也可以

文档说了 full backup 不能 用于后续的level 1&#xff0c;没说level 1没有level 0 是不是level 1就是level 0&#xff1f; 1级备份变0级的原因 及 Enabling Change Tracking生效没有-CSDN博客 这个文档说明1级备份时没有找到0级就是0级备份&#xff0c;可以用来完整恢复的。…...

编程日记 2024/9/10 21:46:02

idea中配置Translation插件完成翻译功能

文章目录 idea下载插件配置有道云阿里云百度翻译开放平台 idea下载插件 idea中安装Translation插件 使用方法&#xff1a;右下角选择翻译引擎&#xff0c;鼠标选中想翻译的部分&#xff0c;右键翻译即可 之前一直用的微软的翻译&#xff0c;不需要配置&#xff0c;但是最近微软…...

编程日记 2024/9/10 21:43:59

如何看待：低代码开发平台的兴起无需经验？

在当今快速发展的技术时代&#xff0c;软件开发的需求日益增长&#xff0c;而专业开发人员的数量却远远跟不上需求的步伐。为了解决这一矛盾&#xff0c;低代码开发平台应运而生&#xff0c;它通过提供可视化的开发环境和拖拽式的编程方式&#xff0c;使得没有编程经验的用户也…...

编程日记 2024/9/10 21:42:57

OpenCV-轮廓检测

文章目录 一、简介1. 意义2.具体步骤 二、代码实现三、总结 一、简介 1. 意义 在OpenCV中&#xff0c;轮廓检测是图像处理中一个非常重要的环节&#xff0c;它允许我们识别图像中的形状。这个过程通常涉及几个步骤&#xff1a;读取图像、转换为灰度图、应用阈值处理&#xff…...

编程日记 2024/9/10 21:39:55

vue页面使用自定义字体

一、准备好字体文件 一般字体问价格式为 .tff&#xff0c;可以去包图网等等网站去下载&#xff0c;好看的太多了&#xff01;&#xff01;&#xff01; 下载下来就是单个的 .tff文件&#xff0c;下载下来后可以进行重命名&#xff0c;但是不要改变他的后缀名&#xff0c;我把他…...

编程日记 2024/9/10 21:38:54

C++——list常见函数的使用和模拟实现(2)

在list的上一篇博客里实现了list基本的初始化、插入数据、删除数据的基本功能&#xff0c;这些功能的实现方式只是在原先链表的实现里加入了模版而已&#xff0c;但是list作为一个容器&#xff0c;它还有一个基础的东西——迭代器。list的迭代器和之前实现的string和vector很大…...

编程日记 2024/9/10 21:36:51

C 标准库 - `＜float.h＞`

C 标准库 - <float.h> 概述 <float.h> 是 C 标准库中的一个头文件&#xff0c;它定义了与浮点数类型相关的宏。这些宏提供了关于浮点数的属性信息&#xff0c;如精度、最小和最大值、以及舍入误差等。这个头文件对于需要精确控制浮点数行为的程序非常有用&#x…...

编程日记 2024/9/10 21:35:51

【机器人工具箱Robotics Toolbox开发笔记（二）】Matlab中机器人工具箱的下载与安装

Matlab机器人工具箱（Robotics Toolbox）可从Peter Corke教授提供的网站上免费下载。网址为：http://www.petercorke.com/Robotics_Toolbox.html。 图1 网站所提供的机器人工具箱版本 在Downloading the Toolbox栏目中单击here按钮进入下载页面，然后在该页面中填写国家、组织…...

编程日记 2024/9/10 21:34:50

ROS2 Nav2 - Smac 规划器

系列文章目录 前言 SmacPlanner 是 Nav2 Planner 服务器的插件。它目前包括 3 个不同的插件&#xff1a; SmacPlannerHybrid&#xff1a;高度优化的完全可重新配置的 Hybrid-A* 实现&#xff0c;支持 Dubin 和 Reeds-Shepp 模型&#xff08;足式、阿克曼和汽车模型&#xff09…...

编程日记 2024/9/10 21:33:49

LabVIEW环境中等待FPGA模块初始化完成

这个程序使用的是LabVIEW环境中的FPGA模块和I/O模块初始化功能&#xff0c;主要实现等待FAM&#xff08;Field-Programmable Gate Array Module&#xff0c;FPGA模块&#xff09;的初始化完成&#xff0c;并处理初始化过程中的错误。让我们逐步分析各部分的功能&#xff1a; 1.…...

编程日记 2024/9/10 21:32:48

手机TF卡格式化后数据恢复：方法、挑战与预防措施

在现代生活中&#xff0c;‌手机已经成为我们不可或缺的一部分&#xff0c;‌而TF卡&#xff08;‌即MicroSD卡&#xff09;‌作为手机存储的扩展&#xff0c;‌更是承载了我们大量的重要数据。‌然而&#xff0c;‌不慎的格式化操作往往导致数据丢失&#xff0c;‌给用户带来不…...

编程日记 2024/9/10 21:31:47

ceph对象存储使用的一些思考

导言 我在某司做对象存储约4年时间&#xff0c;作为研发人员&#xff0c;接触过大量的市场项目&#xff0c;对国内市场上对对象存储的使用有一些了解和思考。本文主要是对本人经历的过往对象存储项目中发现的一些问题进行总结。 背景如下&#xff1a; 基于ceph版本进行开发并进…...

编程日记 2024/9/10 21:30:46

单词排序C++实现

代码如下&#xff1a; #include<iostream> #include<string> #include<fstream> #include<map> #include<iomanip> #include<algorithm> #include<vector>int read_file(std::map<std::string,int> &map_words) {std::st…...

编程日记 2024/9/10 21:29:45

828华为云征文 | Flexus X 实例服务器网络性能深度评测

引言 随着互联网应用的快速发展&#xff0c;网络带宽和性能对云服务器的表现至关重要。在不同的云服务平台上&#xff0c;即便配置相同的带宽&#xff0c;实际的网络表现也可能有所差异。因此&#xff0c;了解并测试服务器的网络性能变得尤为重要。本文将以华为云X实例服务器为…...

编程日记 2024/9/10 21:27:43

STL —heap算法源码刨析 make_heap、push_heap、pop_heap、sort_heap操作分析

STL —heap算法源码刨析 heap算法概述push_heap 插入元素pop_heap 取出根节点元素sort_heap 按极值存放元素make_heap 将一段现有数据构造成heap程序测试 heap算法概述 heap的内部是一个完全二叉树&#xff0c;将极值存放在根节点。这个里的极值可分为最大值、最小值。根据极值…...

编程日记 2024/9/10 21:24:41

走进低代码表单开发（一）：可视化表单数据源设计

在前文&#xff0c;我们已对勤研低代码平台的报表功能做了详细介绍。接下来&#xff0c;让我们深入探究低代码开发中最为常用的表单设计功能。一个完整的应用是由众多表单组合而成的&#xff0c;所以高效的表单设计在开发过程中起着至关重要的作用。让我们一同了解勤研低代码开…...

编程日记 2024/9/10 21:20:37

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/7 11:34:25

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/7/5 21:02:11

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/7/6 2:30:53

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2025/7/5 12:24:36

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/7/6 14:54:44

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/7/7 10:57:34

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/6/21 3:54:35

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/6/30 15:01:32

echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

编程新知 2025/7/5 16:18:06

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程新知 2025/6/21 6:42:16