html5&css&js代码 035 课程表
- 一、代码
- 二、解释
-
-
- 基本结构
- 示例代码
- 常用属性
- 样式和装饰
- 响应式表格
- 辅助技术
一个具有亮蓝色背景的网页，其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头，并对单元格设置了内边距和边框样式。
一、代码
css列表 编程笔记 html5&css&js
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;
}
| 课节 |
星期一 |
星期二 |
星期三 |
星期四 |
星期五 |
星期六 |
星期日 |
| 第一节 |
语文 |
数学 |
科学 |
外语 |
数学 |
|
|
| 第二节 |
语文 |
数学 |
科学 |
外语 |
数学 |
|
|
| 第三节 |
科学 |
数学 |
语文 |
外语 |
政治 |
活动 |
|
| 第四节 |
科学 |
数学 |
语文 |
外语 |
政治 |
活动 |
|
| 中午 |
|
|
|
|
|
|
|
| 第五节 |
音乐 |
体育 |
艺术 |
阅读 |
游戏 |
|
|
| 第六节 |
音乐 |
体育 |
艺术 |
阅读 |
游戏 |
|
|
| 第七节 |
|
|
|
|
班会 |
|
|
| 第七节 |
|
|
|
|
班会 |
|
|
二、解释
在HTML中，表格（
）是一种用于展示行和列数据的结构化方式。表格的创建和使用遵循一系列的标签，每个标签都有其特定的功能和用途。以下是创建和使用HTML表格的基本步骤和一些常用属性：
基本结构
-
标签：定义表格的整体框架。
-
标签：定义表格的头部，通常包含列标题。
-
标签：定义表格的主体部分，包含所有数据行。
-
标签：定义表格的脚注部分，通常用于总结行或列的数据。
-
标签：定义表格中的行。
-
标签：定义表格中的表头单元格，通常用于显示列名或标题。
-
标签：定义表格中的标准单元格，用于存放数据。
示例代码
table>
thead>
tr>
th>列1标题th>
th>列2标题th>
th>列3标题th>
tr>
thead>
tbody>
tr>
td>数据1td>
td>数据2td>
td>数据3td>
tr>
tr>
td>数据4td>
td>数据5td>
td>数据6td>
tr>
tbody>
tfoot>
tr>
td>小计td>
td>100td>服务器托管网
td>200td>
tr>
tfoot>
table>
常用属性
-
border：设置表格边框的宽度。
-
cellpadding：设置单元格内容与单元格边界之间的空间。
-
cellspacing：设置单元格之间的距离。
-
colspan：单元格跨越多个列。
-
rowspan：单元格跨越多行。
-
align：设置单元格内容的水平对齐方式（如：left, right, center）。
-
valign：设置单元格内容的垂直对齐方式（如：top, middle, bottom）。
样式和装饰
- CSS 可以用来为表格添加样式，如背景色、字体样式、边框样式等。
- 为了提高可访问性，可以使用
scope 属性为
标签定义单元格的归属范围，scope="col" 表示该单元格是列标题，scope="row" 表示该单元格是行标题。
响应式表格
- 使用CSS的媒体查询（Media Queries）可以创建响应式表格，使其在不同屏幕尺寸下保持良好的布局和可读性。
辅助技术
- 为了确保表格对屏幕阅读器等辅助技术友好，应使用适当的HTML标签和属性，如
thead, tbody, 和 tfoot 来组织表格内容。
通过这些基本的标签和属性，你可以创建出结构清晰、样式多样的HTML表格来展示和组织数据。
$(function() {
setTimeout(function () {
var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
if (mathcodeList.length > 0) {
for (let i = 0; i < mathcodeList.length; i++) {
if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
var alt = mathcodeList[i].alt;
alt = '\(' + alt + '\)';
var curSpan = $('');
curSpan.text(alt);
$(mathcodeList[i]).before(curSpan);
$(mathcodeList[i]).remove();
}
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}, 1000)
});
优惠劵
基于Html-CSS-JavaScript的宇宙科普系统网页设计.zip
基于Html-CSS-JavaScript的宇宙科普系统，网页设计作业全套代码。 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，...
weixin_335426的博客
12-29
1727
JAVA架构师实战第二章 HTML&CSS&JAVASCRIPT
fegus的博客
06-11
213
今日目标：HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东等网站有很多网页。这些都是网页展示出来的效果。而HTML也有专业的解释HTML(HyperText Markup Language)：超文本标记语言：超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。标记语言：由标签构成......
qq_45918426的博客
04-23
386
文章目录何为HTML
何为HTML
Hyper Text Markup Language （超文本标记语言） 简写：HTML，它通过标签来标记要显示的网页中的各个部分。
前端三剑客---HTML&CSS&JavaScript
m0_57105290的博客
07-06
596
autismhealer的博客
07-09
855
Eumenides_Suki的博客
02-23
289
HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。标记语言：由标签构成的语言之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。我们在浏览器页面右键可以查看页面的源代码，如下。
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
南北极之间
08-08
1万+
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
qq_39244173的博客
04-14
2048
weixin_59449833的博客
11-18
1731
一:HTML
1:快速入门
1:案例1
2:案例2
2:基础标签
【01】html&css&git&网络基础知识
最新发布
oschina_41559824的博客
03-16
814
一图胜千言使用border-box控制尺寸更加直观，因此，很多网站都会加入下面的代码。
qq_45370222的博客
04-10
3103
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03
20万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
网页设计与制作 | HTML+CSS+JS
10-15
383
网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）html文件包含：其中index.html是首页、其他html为二级页面；（2） css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3） js文件包含：页面炫酷效果实现。
weixin_57037336的博客
09-10
2825
HTML+ CSS制作 课程表
今天复习到了表格，八表个内容进行了更深层次的了解，首先，来看看我课堂上做好的 课程表吧~
这里用到了HTML和CSS，就这两个而已，相比网络上的，这个较为基础，也比较适合初学者运用，
接下来显示一下HTML代码：
计算机工程技术学院课表
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript
qq_365392777
09-29
2万+
HTML5+ CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+ CSS+ JavaScript 期末作业HTML 代码 学生网页课程设计期末作业下载 web网页设计制作成品
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设服务器托管网计题目, A+水
窗外有风景，笔下有前途，低头是题海，抬头是未来
06-15
2509
qq_44855338的博客
08-22
846
HTML+CSS+JS网页设计期末课程大作业 HTML+CSS+JavaScript
CSS（层叠样式表）： 1. CSS用于定义网页的样式，包括颜色、字体、布局等。 2. CSS代码由选择器和声明组成，选择器用于指定要应用样式的HTML元素，声明用于定义样式。 3. 常用的CSS选择器有：标签选择器、类选择...
window.csdn.csdnFooter.options = {
el: '.blog-footer-bottom',
type: 2
}
明月看潮生
CSDN认证博客专家
CSDN认证企业博客
- 250
- 原创
- 2977
- 周排名
- 5727
- 总排名
- 17万+
- 访问
-
- 等级
- 6081
- 积分
- 2586
- 粉丝
- 3564
- 获赞
- 24
- 评论
- 2811
- 收藏
![]()
热门文章
-
应用软件功能设计和功能列表
2251
-
编程笔记 html5&css&js 092 JavaScript 表单控件
1811
-
编程笔记 html5&css&js 065 JavaScript 数据类型
1733
-
编程笔记 html5&css&js 045 网页布局
1537
-
编程笔记 Golang基础 046 mssql数据库连接与操作
1448
分类专栏
-
少年软件工程师
6篇
-
Python编程基础
-
Golang编程基础
50篇
-
HTML+CSS+JavaScript笔记
96篇
-
HTML+CSS+JavaScript代码
39篇
-
Postgresql应用
15篇
-
SqlServer应用
7篇
-
.NET编程
4篇
-
《青少年成长管理》
21篇
-
码农视角
12篇
-
企业开发与应用
27篇
最新文章
-
html5&css&js代码 040 不透明度 (完结篇）
-
html5&css&js代码 039 元素尺寸
-
html5&css&js代码 038 列表
$("a.flexible-btn").click(function(){
$(this).parents('div.aside-box').removeClass('flexible-box');
$(this).parents("p.text-center").remove();
})
分类专栏
-
少年软件工程师
6篇
-
Python编程基础
-
Golang编程基础
50篇
-
HTML+CSS+JavaScript笔记
96篇
-
HTML+CSS+JavaScript代码
39篇
-
Postgresql应用
15篇
-
SqlServer应用
7篇
-
.NET编程
4篇
-
《青少年成长管理》
21篇
-
码农视角
12篇
-
企业开发与应用
27篇
var timert = setInterval(function() {
sideToolbar = $(".csdn-side-toolbar");
if (sideToolbar.length > 0) {
sideToolbar.css('cssText', 'bottom:64px !important;')
clearInterval(timert);
}
}, 200);
![]()
成就一亿技术人!
实付元
使用余额支付
点击重新获取
钱包余额
0
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
 余额充值
|
|
|
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
到【灌水乐园】发言
明月看潮生:
仅供参考。
白话机器学习:
博主的文章细节很到位，兼顾实用性和可操作性，感谢博主的分享，期待博主持续带来更多好文
白话机器学习:
文章写得专业、深入、详细，收藏啦
CSDN-Ada助手:
恭喜你这篇博客进入【CSDN每天值得看】榜单，全部的排名请看 https://bbs.csdn.net/topics/618141115。
CSDN-Ada助手:
恭喜你这篇博客进入【CSDN每天值得看】榜单，全部的排名请看 https://bbs.csdn.net/topics/618123360。