HTML2:列表和表格

列表

有序列表

ordered list ol

无序列表

unordered list ul

定义列表

definition list dl

1,有序列表

每条列表前自带一个序号

2,无序列表

每条列表前自带一个小圆点

3,定义列表

注意:dl中放的不是li列表而是dt列表和dd表项

dt代表术语标题

dd代表术语内容

一个dt可以对应多个dd

表格

table标签

表格组成

表格标题:caption标签

表格头部:thead标签

表格主体:tbody标签

表格脚注:tfoot标签

行:tr标签

表格头单元格:th标签

表格主体单元格:td标签

table属性设置

设置table标签的border属性调整边框宽度

设置width属性调整表格宽度(至少)

设置height属性调整表格高度(表头和脚注不会变)(至少)

设置cellspacing属性调整单元格间距,属性为"0"代表边框没有间距,并非合并边框

thead属性设置

height设置高度

align设置对齐方式 left,right,center…默认center

valign 垂直对齐方式 middle垂直居中,bottom底部对齐

tbody属性设置

同thead

th和td的属性设置

同thead

单元格的跨行和跨列

跨列:
colspan="n"//跨n列
跨行:
rowspan="n"//跨n行
简单课程表代码实现
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>课程表</h1><table border="1"><caption>表格</caption><thead align="center" valign="middle"><tr><th colspan="1">项目</th><th colspan="4">上课</th><th colspan="2">活动和休息</th></tr></thead><tbody align="center" valign="middle"><tr><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td><td>周日</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td rowspan="5">7</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr></tbody><tfoot align="center" valign="middle"><tr><td>a</td><td>b</td><td>c</td><td>d</td><td>d</td><td>d</td><td>d</td></tr></tfoot></table>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807764.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器出现404错误怎么处理

很多站长使用虚拟主机或者云服务器做网站的以为这个就是空间商的问题&#xff0c;空间商主要服务虚拟主机的运维&#xff0c;跟404出现错误 并不完全直接关联的&#xff0c; 也是关于多方面的问题存在的&#xff0c; 现在由壹基比小鑫来给大家讲解下&#xff1a; 1.错误原因 HT…

从零开始学Spring Boot系列-集成MyBatis-Plus

在Spring Boot应用开发中&#xff0c;MyBatis-Plus是一个强大且易于使用的MyBatis增强工具&#xff0c;它提供了很多实用的功能&#xff0c;如代码生成器、条件构造器、分页插件等&#xff0c;极大地简化了MyBatis的使用和配置。本篇文章将指导大家如何在Spring Boot项目中集成…

【C语言】函数递归编程题

目录 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 总结 题目一&#xff1a; 题目&#xff1a;接受一个整型值&#xff08;无符号&#xff09;&#xff0c;按照顺序打印它的每一位。&#xff08;递归完成&#xff09; 列如&#xff1a; …

2024.3.30力扣每日一题——需要添加的硬币的最小数量

2024.3.30 题目来源我的题解方法一 数学贪心 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2952 我的题解 方法一 数学贪心 首先将数组 coins按升序排序&#xff0c;然后计算需要添加的硬币的最小数量。 关键&#xff1a;对于正整数 x&#xff0c;如果区间 [1,x−1] 内…

Vue3入门大全(持续更新)

什么是Vue3 Vue.js 是一款流行的 JavaScript 前端框架&#xff0c;用于构建交互式的 Web 用户界面。Vue 3 是 Vue.js 的下一个主要版本&#xff0c;是对 Vue 2 的重大更新。Vue 3 在性能、开发体验和扩展性等方面都进行了改进和优化&#xff0c;其中一些重要的变化和功能包括&…

通过 CLI 和引入的方式使用 React:基础入门

使用React 有两种使用方式&#xff0c;主要有以下几个原因: 灵活性和适应性: 引入的方式可以让开发者在现有的 HTML 页面中快速引入 React,无需设置完整的项目环境。这适合小型或原型项目。 CLI 方式则更适合用于构建大型复杂的 React 应用程序,因为它提供了更完整的项目结构和…

探索 ChatGPT:解读 AI 对话的魔力(文末推荐一款AI工具聚合平台,可免费体验)

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;个人主页&#xff1a;hacker707的csdn博客 &#x1f4ac;推荐一款AI工具聚合平台&#x1f449;Hulu AI 探索 ChatGPT&#xff1a;解读 AI 对话的魔力 ChatGPT 的魅力如何使用 C…

JVM修炼之路【10】- 垃圾回收器和垃圾回收算法

垃圾回收算法 我们先简要看一下 四种主要的垃圾回收算法 看到这不禁感慨一下 人家1960年 都搞出GC算法了 太强了 评价标准 既然有这么多算法 那就跟各个牌子的游戏本一样 有个比较&#xff0c;这里我们重点介绍一下 垃圾回收算法的评价标准 这几个标准非常重要是 是后面理解很…

springCloudAlibaba集成sentinel实战(超详细)

一、Sentinel介绍 1. 什么是Sentinel Sentinel是阿里开源的项目&#xff0c;提供了流量控制、熔断降级、系统负载保护等多个维度来保障服务之间的稳定性。 分布式系统的流量防卫兵&#xff1a; 随着微服务的普及&#xff0c;服务调用的稳定性变得越来越重要。Sentinel以“流…

你知道 Java 线程池的原理吗?

Java线程池是用于管理和复用线程的机制&#xff0c;它可以帮助开发者有效地管理线程的生命周期和资源&#xff0c;并提高应用程序的性能和稳定性。 1. 线程池概述 在计算机科学中&#xff0c;线程池是一种可用来执行异步任务的线程队列。它主要包含以下几个组成部分&#xff…

python连接mysql数据库并将dataframe的数据插入表中

代码中连接的sql表为"20230411_hangzhuanlie"&#xff0c;表结构如下&#xff1a; 代码如下&#xff08;按需修改用户名、库名等即可&#xff09;&#xff1a; import pymysql import pandas as pd from sqlalchemy import create_enginehost 127.0.0.1:3306/ user_…

科研学习|论文解读——基于旅游知识图谱的游客偏好挖掘和决策支持(IPM,2023)

原文题目 Mining tourist preferences and decision support via tourism-oriented knowledge graph 摘要 目前,旅游管理研究的重点是通过对异构用户生成的内容进行广泛分析,来理解旅游偏好的波动,制定有针对性的发展策略。然而,鉴于在线景点评论涉及过多的混合和无形维度…

【51单片机入门记录】IIC总线协议 EEPROM存储器AT24C02应用

目录 一、AT24C20相关函数操作流程 &#xff08;0&#xff09;根据第十五届蓝桥杯初始iic.c进行的初步修改&#xff08;便于编写后续函数&#xff09; &#xff08;1&#xff09;AT24C20存数据操作流程及代码 &#xff08;2&#xff09;AT24C02读数据操作流程及代码 &#…

一、OpenMIPS指令集CPU的ori指令的实现

前言 根据“自己动手写CPU”这本书学习&#xff0c;自己动手实现一个MIPS指令集的CPU。 本文章实现了一个ori指令即“或”操作的五级流水线&#xff0c;后续会持续添加其他指令完善此CPU。 文章作为学习笔记持续更新&#xff0c;源代码也在github上持续更新 项目源码https://…

MySQL 行锁和表锁是什么?区别,作用等学习总结

一、所谓‘锁’ 是什么 个人理解&#xff0c;所谓的锁就是为了保证数据库数据操作的一致性而产生的一种机制&#xff0c;即我们可能有很多数据&#xff0c;但是当我们有多个人或者多个线程或会话对同一条数据或同一批数据执行操作时&#xff0c;可能大家都要修改这一部分数据&…

头歌-机器学习 第1次实验 Python机器学习软件包Scikit-Learn的学习与运用

第1关&#xff1a;使用scikit-learn导入数据集 scikit-learn包括一些标准数据集&#xff0c;不需要从外部下载&#xff0c;可直接导入使用&#xff0c;比如与分类问题相关的Iris数据集和digits手写图像数据集&#xff0c;与回归问题相关的波士顿房价数据集。 以下列举一些简单…

JAVA面试八股文之数据库

MySQL面试题 MySQL 存储引擎架构了解吗&#xff1f;CHAR 和 VARCHAR 的区别是什么&#xff1f;索引是越多越好嘛&#xff1f;MySQL数据库中空值&#xff08;null&#xff09;和空字符串&#xff08;&#xff09;的区别&#xff1f;SQL 中 on 条件与 where 条件的区别&#xff1…

mySql数据库学习003-多表查询

多表查询 创建数据表&#xff1a;班级表与学生表 create table if not exists class(id tinyint unsigned primary key auto_increment,name varchar(20) not null,description varchar(255),createAt timestamp default current_timestamp,updateAt timestamp default curre…

面试算法-171-翻转二叉树

题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 解 class Solution {public TreeNode invertTree(TreeNode root) {if (root n…

Leetcode【双指针法】

目录 一、left right在一个循环里 二、两个指针在各自的循环里 三、slow fast追逐型 四、slow fast条件型 双指针法常用与题型&#xff1a;数组、字符串、链表、N数之和 一、left right在一个循环里 left right在一个循环里。 left和right移动需要条件&#xff0c;一般是向…