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

html5cssjs代码 035 课程表

news 2026/1/24 18:25:39

html5&css&js代码 035 课程表

  • 一、代码
  • 二、解释
      • 基本结构
      • 示例代码
      • 常用属性
      • 样式和装饰
      • 响应式表格
      • 辅助技术

一个具有亮蓝色背景的网页，其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头，并对单元格设置了内边距和边框样式。

在这里插入图片描述

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>css列表 编程笔记 html5&css&js</title><meta charset="utf-8"/><style>body {color: white;background-color: #00bfff; /* 更改为亮蓝色背景 */}#customers {border-collapse: collapse;width: 90%;margin: 50px auto;text-align: center;background-color: rgba(255, 255, 255, 0.1); /* 添加半透明白色背景 */}#customers td,#customers th {border: 1px solid #ffcc00; /* 边框颜色改为亮黄色 */padding: 8px;background-color: rgba(255, 255, 255, 0.2); /* 单元格添加半透明白色背景 */}#customers tr:nth-child(even) {background-color: #d1eaff; /* 修改为浅亮蓝色 */}#customers tr:hover {background-color: #a7ffeb; /* 修改为亮丽蓝色鼠标悬停颜色 */}#customers th {padding-top: 12px;padding-bottom: 12px;background-color: #ff9100; /* 表头背景色改为亮橙色 */color: white;}</style>
</head>
<body>
<table id="customers"><tr><th>课节</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr><td>第一节</td><td>语文</td><td>数学</td><td>科学</td><td>外语</td><td>数学</td><td></td><td></td></tr><tr><td>第二节</td><td>语文</td><td>数学</td><td>科学</td><td>外语</td><td>数学</td><td></td><td></td></tr><tr><td>第三节</td><td>科学</td><td>数学</td><td>语文</td><td>外语</td><td>政治</td><td>活动</td><td></td></tr><tr><td>第四节</td><td>科学</td><td>数学</td><td>语文</td><td>外语</td><td>政治</td><td>活动</td><td></td></tr><tr><td>中午</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>第五节</td><td>音乐</td><td>体育</td><td>艺术</td><td>阅读</td><td>游戏</td><td></td><td></td></tr><tr><td>第六节</td><td>音乐</td><td>体育</td><td>艺术</td><td>阅读</td><td>游戏</td><td></td><td></td></tr><tr><td>第七节</td><td></td><td></td><td></td><td></td><td>班会</td><td></td><td></td></tr><tr><td>第七节</td><td></td><td></td><td></td><td></td><td>班会</td><td></td><td></td></tr>
</table>
</body>
</html>

二、解释

在HTML中，表格（<table>）是一种用于展示行和列数据的结构化方式。表格的创建和使用遵循一系列的标签，每个标签都有其特定的功能和用途。以下是创建和使用HTML表格的基本步骤和一些常用属性：

基本结构

  1. <table> 标签：定义表格的整体框架。
  2. <thead> 标签：定义表格的头部，通常包含列标题。
  3. <tbody> 标签：定义表格的主体部分，包含所有数据行。
  4. <tfoot> 标签：定义表格的脚注部分，通常用于总结行或列的数据。
  5. <tr> 标签：定义表格中的行。
  6. <th> 标签：定义表格中的表头单元格，通常用于显示列名或标题。
  7. <td> 标签：定义表格中的标准单元格，用于存放数据。

示例代码

<table><thead><tr><th>列1标题</th><th>列2标题</th><th>列3标题</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td><td>数据3</td></tr><tr><td>数据4</td><td>数据5</td><td>数据6</td></tr></tbody><tfoot><tr><td>小计</td><td>100</td><td>200</td></tr></tfoot>
</table>

常用属性

  • border：设置表格边框的宽度。
  • cellpadding：设置单元格内容与单元格边界之间的空间。
  • cellspacing：设置单元格之间的距离。
  • colspan：单元格跨越多个列。
  • rowspan：单元格跨越多行。
  • align：设置单元格内容的水平对齐方式（如：left, right, center）。
  • valign：设置单元格内容的垂直对齐方式（如：top, middle, bottom）。

样式和装饰

  • CSS 可以用来为表格添加样式，如背景色、字体样式、边框样式等。
  • 为了提高可访问性，可以使用 scope 属性为 <th> 标签定义单元格的归属范围，scope="col" 表示该单元格是列标题，scope="row" 表示该单元格是行标题。

响应式表格

  • 使用CSS的媒体查询（Media Queries）可以创建响应式表格，使其在不同屏幕尺寸下保持良好的布局和可读性。

辅助技术

  • 为了确保表格对屏幕阅读器等辅助技术友好，应使用适当的HTML标签和属性，如 <caption> 标签为表格添加标题，以及使用 thead, tbody, 和 tfoot 来组织表格内容。
    通过这些基本的标签和属性，你可以创建出结构清晰、样式多样的HTML表格来展示和组织数据。

相关文章：

html5cssjs代码 035 课程表

html5&css&js代码 035 课程表 一、代码二、解释基本结构示例代码常用属性样式和装饰响应式表格辅助技术 一个具有亮蓝色背景的网页&#xff0c;其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头&#xff0c;并对单元格设…...

编程日记 2024/3/22 6:04:23

Eclipse For ABAP：安装依赖报错

1.安装好Eclipse后需要添加依赖，这里的地址： https://tools.hana.ondemand.com/latest 全部勾选等待安装结束； 重启后报错：ABAP communication layer is not configured properly. This might be caused by missing Microsoft Visual C++ 2013 (x64) Runtime DLLs. Consu…...

编程日记 2024/3/22 6:03:22

C++特性三：多态---纯析构和纯虚析构

多态使用时&#xff0c;如果子类中有属性开辟到堆区&#xff0c;那么父类指针在释放时无法调用到子类的析构代码 解决方式&#xff1a;将父类中的析构函数改为虚析构或者纯虚析构 虚析构和纯虚析构共性&#xff1a; 1.可以解决父类指针释放子类对象 2.都需要有具体的函数实现…...

编程日记 2024/3/22 6:02:21

创建可引导的 macOS 安装器

你可以将外置驱动器或备用宗卷用作安装 Mac 操作系统的启动磁盘。 以下高级步骤主要适用于系统管理员以及其他熟悉在“终端”中输入命令的经验丰富的用户。 升级 macOS 或重新安装 macOS 不需要可引导安装器&#xff0c;但如果你要在多台电脑上安装 macOS&#xff0c;而又不…...

编程日记 2024/3/22 6:01:19

ssm+vue的公廉租房维保系统（有报告）。Javaee项目，ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的公廉租房维保系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…...

编程日记 2024/3/22 6:00:18

【pycharm】作为Array查看出现数据无法显示问题（已解决）

【pycharm】作为Array查看出现数据无法显示问题&#xff08;已解决&#xff09; 当我们在调试代码的时候&#xff0c;需要对某个变量进行查看&#xff0c;就如同在matlab中&#xff0c;我们可以直接在工作区对某个变量进行双击查看矩阵变量的具体数值 在这里我遇到一个问题&am…...

编程日记 2024/3/22 5:59:17

matlab处理贝塞尔函数

说明：问题来自CSDN-问答板块，题主提问。 需求：在使用解析法求解电机的三维模型，编写程序时需要用到修正的贝塞尔函数，问题是在贝塞尔函数的自变量和阶数变化时函数值变化很大，导致最后求出来的气隙磁密非常大。 一、运行截图 二、解决代码...

编程日记 2024/3/22 5:58:15

【Python】Pycharm 的 python_stubs

Pycharm 的 python_stubs 问题 问题 Pycharm 为了对各种库暴露接口能在编码时提供快速的智能提示&#xff0c;会解析库并在 pycharm 安装目录的 python_stubs 下生成对应的存根&#xff0c;这个操作可以有效的提升 Pycharm 智能提示的效率。但是也有一个问题&#xff0c;称之为…...

编程日记 2024/3/22 5:57:14

AI大模型智能大气科学探索之：ChatGPT在大气科学领域建模、数据分析、可视化与资源评估中的高效应用及论文写作

本文深度探讨人工智能在大气科学中的应用&#xff0c;特别是如何结合最新AI模型与Python技术处理和分析气候数据。介绍包括GPT-4等先进AI工具&#xff0c;旨在帮助大家掌握这些工具的功能及应用范围。本文内容覆盖使用GPT处理数据、生成论文摘要、文献综述、技术方法分析等案例…...

编程日记 2024/3/22 5:56:12

rpc详解rpc框架

文章目录 概述rpc的优点组件工作流程&RPC的底层原理RPC的底层原理 RPC框架rpc框架优点RPC 的实现基础RPC的应用场景RPC使用了哪些关键技术rpc 调用异常一般怎么处理rpc和http的区别为什么RPC要比HTTP更快一些Dubbo和openfeign 区别远程调用RPC框架传输协议传输速度 概述 在…...

编程日记 2024/3/22 5:55:11

【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

第一部分&#xff1a;无线网络勘测设计评分标准 序号评分项评分细项评分点说明评分方式分值1点位设计图AP编号AP编号符合“AP型号位置编号”完全匹配5AP型号独立办公室、小型会议室选用WALL AP110完全匹配5员工寝室选用智分&#xff0c;其他用放装完全匹配5其它区域选用放装AP…...

编程日记 2024/3/22 5:54:10

停止docker 容器并删除对应镜像

docker 容器相关命令 docker ps 查看当前系统正在运行的容器情况&#xff0c;返回信息分别为&#xff1a; 容器ID&#xff1a;CONTAINER ID 镜像名IMAGE NAMES 运行命令COMMAND 创建时间CREATED 状态STATUS 映射端口 PORTS docker ps |grep XXX 可以…...

编程日记 2024/3/22 5:53:09

什么是服务器，有什么特性？

服务器是一种高性能计算机&#xff0c;作为网络的节点&#xff0c;存储、处理网络上80&#xff05;的数据、信息&#xff0c;服务器作用比较广&#xff0c;网络游戏、网站、部分软件都是需要存到服务器的&#xff0c;还有一些企业会配服务器。今天&#xff0c;德迅云安全带您来…...

编程日记 2024/3/22 5:52:08

【Django】CORS跨域问题

通过 django-cors-headers 库来实现&#xff0c;此方法亲测有效 1、下载 pip install django-cors-headers2、修改 settings.py 配置文件 1&#xff09;添加到应用列表 INSTALLED_APPS (##...corsheaders )2&#xff09;添加到中间件列表 MIDDLEWARE [django.middleware.…...

编程日记 2024/3/22 5:50:05

npm 常用命令详解

npm&#xff0c;即 Node Package Manager&#xff0c;是 Node.js 的包管理器。它允许你安装、更新、删除和管理 Node.js 项目中的依赖包。在 Node.js 开发中&#xff0c;npm 的使用频率极高&#xff0c;掌握其常用命令对于开发者来说是至关重要的。本文将详细解释 npm 的常用命…...

编程日记 2024/3/22 5:48:04

外包干了14天，技术退步明显。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;2019年我通过校招踏入了成都一家软件公司&#xff0c;开始了我的职业生涯。那时的我&#xff0c;满怀热血和憧憬&#xff0c;期待着在这个行业中闯出一片天地。然而&#xff0c;随着时间的推移&#xff0c;我发现自己逐渐陷入…...

编程日记 2024/3/22 5:47:02

RequestResponse使用

文章目录 一、Request&Response介绍二、Request 继承体系三、Request 获取请求数据1、获取请求数据方法&#xff08;1&#xff09;、请求行&#xff08;2&#xff09;、请求头&#xff08;3&#xff09;、请求体 2、通过方式获取请求参数3、IDEA模板创建Servlet4、请求参数…...

编程日记 2024/3/22 5:46:00

知名的CDN厂商CloudFlare简介

Cloudflare是一家总部位于美国的跨国科技公司&#xff0c;提供云端安全、性能优化以及内容交付网络&#xff08;CDN&#xff09;服务。通过其全球分布的服务器网络&#xff0c;Cloudflare帮助网站提高加载速度、保护免受恶意攻击&#xff0c;并提供安全可靠的云端解决方案。除此…...

编程日记 2024/3/22 5:44:59

C语言程序设计-谭浩强

文章目录 1 C语言2 算法3 顺序程序设计3.1 数据的表示形式3.2 输入和输出 4 选择程序结构5 循环程序结构6 数组7 函数模块化8 指针8.1 动态内存分配 9 结构类型9.1 链表9.2 共用体 union9.3 枚举 enum9.4 typedef 10 对文件的输入输出10.1 顺序读写10.2 随机读写 1 C语言 1.1 …...

编程日记 2024/3/22 5:43:58

将OpenCV与gdb驱动的IDE结合使用

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;OpenCV4.9.0开源计算机视觉库在 Linux 中安装 下一篇&#xff1a;将OpenCV与gcc和CMake结合使用 ​ 能力 这个漂亮的打印机可以显示元素类型、、标志is_continuous和is_subm…...

编程日记 2024/3/22 5:42:57

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/1/24 0:21:10

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/15 4:57:55

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/1/23 10:37:42