html5&css&js代码 035 课程表

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> 标签:定义表格中的标准单元格,用于存放数据。

示例代码

html 复制代码
<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表格来展示和组织数据。
相关推荐
阿伟来咯~19 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端24 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱27 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai36 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨37 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry3 小时前
JS常用数组方法 reduce filter find forEach
javascript
ZL不懂前端3 小时前
Content Security Policy (CSP)
前端·javascript·面试