百度云盘网站开发,知名vi设计企业,响应式网站国内外现状,金昌市建设工程质量监督站网站html5cssjs代码 035 课程表 一、代码二、解释基本结构示例代码常用属性样式和装饰响应式表格辅助技术 一个具有亮蓝色背景的网页#xff0c;其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头#xff0c;并对单元格设… html5cssjs代码 035 课程表 一、代码二、解释基本结构示例代码常用属性样式和装饰响应式表格辅助技术 一个具有亮蓝色背景的网页其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头并对单元格设置了内边距和边框样式。 一、代码
!DOCTYPE html
html langzh-cn
headtitlecss列表 编程笔记 html5cssjs/titlemeta charsetutf-8/stylebody {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 idcustomerstrth课节/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/thth星期六/thth星期日/th/trtrtd第一节/tdtd语文/tdtd数学/tdtd科学/tdtd外语/tdtd数学/tdtd/tdtd/td/trtrtd第二节/tdtd语文/tdtd数学/tdtd科学/tdtd外语/tdtd数学/tdtd/tdtd/td/trtrtd第三节/tdtd科学/tdtd数学/tdtd语文/tdtd外语/tdtd政治/tdtd活动/tdtd/td/trtrtd第四节/tdtd科学/tdtd数学/tdtd语文/tdtd外语/tdtd政治/tdtd活动/tdtd/td/trtrtd中午/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd第五节/tdtd音乐/tdtd体育/tdtd艺术/tdtd阅读/tdtd游戏/tdtd/tdtd/td/trtrtd第六节/tdtd音乐/tdtd体育/tdtd艺术/tdtd阅读/tdtd游戏/tdtd/tdtd/td/trtrtd第七节/tdtd/tdtd/tdtd/tdtd/tdtd班会/tdtd/tdtd/td/trtrtd第七节/tdtd/tdtd/tdtd/tdtd/tdtd班会/tdtd/tdtd/td/tr
/table
/body
/html二、解释
在HTML中表格table是一种用于展示行和列数据的结构化方式。表格的创建和使用遵循一系列的标签每个标签都有其特定的功能和用途。以下是创建和使用HTML表格的基本步骤和一些常用属性
基本结构
table 标签定义表格的整体框架。thead 标签定义表格的头部通常包含列标题。tbody 标签定义表格的主体部分包含所有数据行。tfoot 标签定义表格的脚注部分通常用于总结行或列的数据。tr 标签定义表格中的行。th 标签定义表格中的表头单元格通常用于显示列名或标题。td 标签定义表格中的标准单元格用于存放数据。
示例代码
tabletheadtrth列1标题/thth列2标题/thth列3标题/th/tr/theadtbodytrtd数据1/tdtd数据2/tdtd数据3/td/trtrtd数据4/tdtd数据5/tdtd数据6/td/tr/tbodytfoottrtd小计/tdtd100/tdtd200/td/tr/tfoot
/table常用属性
border设置表格边框的宽度。cellpadding设置单元格内容与单元格边界之间的空间。cellspacing设置单元格之间的距离。colspan单元格跨越多个列。rowspan单元格跨越多行。align设置单元格内容的水平对齐方式如left, right, center。valign设置单元格内容的垂直对齐方式如top, middle, bottom。
样式和装饰
CSS 可以用来为表格添加样式如背景色、字体样式、边框样式等。为了提高可访问性可以使用 scope 属性为 th 标签定义单元格的归属范围scopecol 表示该单元格是列标题scoperow 表示该单元格是行标题。
响应式表格
使用CSS的媒体查询Media Queries可以创建响应式表格使其在不同屏幕尺寸下保持良好的布局和可读性。
辅助技术
为了确保表格对屏幕阅读器等辅助技术友好应使用适当的HTML标签和属性如 caption 标签为表格添加标题以及使用 thead, tbody, 和 tfoot 来组织表格内容。 通过这些基本的标签和属性你可以创建出结构清晰、样式多样的HTML表格来展示和组织数据。
