html中table的使用（1）课程表

最新推荐文章于 2024-04-01 16:45:36 发布
最新推荐文章于 2024-04-01 16:45:36 发布
阅读量5.9k 收藏 8
点赞数 4
分类专栏： web开发 文章标签： html css table 课程表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/way_hj/article/details/50920519
版权

<!DOCTYPE html>

<html>
<head>
<title>课程表</title>
<style type="text/css">
*{margin:0;padding:0;background:#ffffff;}
table{
margin:10px;
width:600px;
height:400px;
border-left:1px solid #666666;
border-bottom:1px double #666666;
}
caption{
border-right:1px solid #666;
border-top:1px solid #666;
border-left:1px solid #666;
padding: 10px 0 10px 0;
background-color:#F5F5F5;
}
thead tr th{
padding: 10px 0 10px 0;
background-color:#90EE90;
border-bottom:1px double #000080;
}
tbody tr{
text-align:center;

}
tfoot tr td{
padding: 10px 0 10px 5px;
background-color:#2E8B57;
color:#ffffff;
}
th,td{
border-right:1px solid #666;
border-top:1px solid #666;
}
.firstcol{
background-color:#F5F5F5;
}
.topline2px td{
border-top:2px double #2F4F4F;
}
.weekend{
background-color:#FFB6C1;
}
</style>
</head>
<body>
<table border="0" cellspacing="0"cellpadding="0">
<caption>2015~2016学年第二学期课程表</caption>
<thead>
<tr>
<th style="background-color:#9ACD32;">节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th class="weekend">星期六</th>
<th class="weekend">星期日</th>
</tr>
</thead>
<tbody>
<tr>
<td class="firstcol">123节</td>
<td>语文</td>
<td>数学</td>
<td>音乐</td>
<td>体育</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="firstcol">45节</td>
<td>数学</td>
<td>语文</td>
<td>美术</td>
<td>化学</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="topline2px">
<td class="firstcol">67节</td>
<td>美术</td>
<td>劳动</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="firstcol">89节</td>
<td>体育</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="topline2px">
<td class="firstcol">1011节</td>
<td>自习</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="foottr"><td colspan="8">注意：</td></tr>
</tfoot>
</table>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------------------------

注：

一、关于文本对齐
1.如果在标签内部，则使用align="center"
2.如果使用css控制，则使用text-align="center"

二、 table的border="0" cellspacing="0"cellpadding="0"直接写在标签内，写在CSS里不起作用

三、单元格四周都有线会出现“双线”边界效果，影响美观。“单线”表格线的一个实现方法：

css控制表格只显示左、下线，单元格只显示右上线

table{
border-left:1px solid #666666;
border-bottom:1px double #666666;
}

th,td{
border-right:1px solid #666666;
border-top:1px solid #666666;
}
--------------------------------------------------------------------------------------------------------------------------------------------------------

效果图：


way_hj
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS实现课表
wuChiSha的博客
08-25 4201
一、需求描述 如下图所示： 实现一个课表，对应现实生活中对的课表：一门课一天内，可以对应多个节次。 二、实现思路及代码 2.1实现思路： flex布局+position 分两步：1、先画出一个空课表；2、在正确的位置上显示课程名称 2.2数据结构 数据中需要包含：课程名称（course）、对应周几(week)、对应的开始节次(startSection)、结束节次(endSection)，如下 const data = [ ...
html使用table标签制作课程表
October_27的博客
07-30 2407
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>course</title> <style> .table1{ margin: 0; padding: 0; } .xueqi{ wid...
用table标签写课程表
2301_79620867的博客
09-11 81
星期二</td><td>星期三</td><td>星期四</td><td>星期五
用HTML制作一个课程表
2201_75650749的博客
09-17 1785
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
HTML课程表绘制
最新发布
weixin_54018753的博客
04-01 484
lang=“en”：向搜索引擎表示该页面是HTML语言，并且语言为英文网站，“lang”是language，“en”是English，可以将它改为“zh”：表示中文网站。align：设置元素的水平对齐方式，通常使用left（左对齐）、center（居中）、right（右对齐）、justify（两端对齐）。meta charset=“UTF-8” ：声明文档中使用的字符编码格式，这个需要放在head标签的最前面，避免出现乱码。body：网页的主体部分，body里面的内容可以在网页上使用户看到。
使用HTML制作课表
weixin_66201127的博客
02-23 807
HTML简单制作课表
使用HTML开发商业网站-创建表格课件.pptx
07-10
课程表 歌曲排行榜 查票 表格 定义一个表格 定义表格中的一行，嵌套在<table></table>中 定义表格中的单元格，嵌套在<tr></tr>中 创建table表格，离不开以下3对标签: 表格 <!doctype html> <html> 表格 ..........
html元素<table>小制作
08-09
html元素<table>，表格小制作，只是小制作，适合刚刚开始学习html的朋友们，下载后即可使用
uniapp 表格的介绍和使用
11-17
1. **uni-table** 是表格的根元素，可以设置属性如`border`（是否显示纵向边框）和`stripe`（是否显示斑马线样式）。 2. **uni-tr** 作为表格行，其内部必须包含uni-th或uni-td。一个uni-tr只能作为uni-table的子...
北大青鸟 accp 5.0 S1 HTML总结 PPT
10-23
在北大青鸟的ACCP 5.0 S1课程中，HTML的学习主要涵盖了以下几个关键知识点： 1. **HTML的基本结构**：HTML文档由`<html>`、`<head>`和`<body>`标签组成。`<head>`部分通常包含文档的元信息，如字符编码（`<meta>`...
HTML5知识点思维导图(手工整理）
10-16
DOCTYPE html>`声明，它告诉浏览器使用HTML5规范解析文档。`<html>`标签定义了整个文档的根元素，而`<head>`和`<body>`分别代表元数据和实际内容。 2. **标题标签**：`<h1>`到`<h6>`用于创建不同级别的标题，`<h1>`...
HTML5生成课表
12-25
HTML5生成超级课程表格子样式课表，并通过JS代码实现单双周课程自动判断。
作业
MXWzjw的博客
11-02 634
课程表 div{ text-align: center; } 课程表 项目 上课 休息 星期 星期一 星期二
利用Html和CSS做一张课程表
a1k2l45k的博客
05-14 1万+
一 思路 利用HTML和CSS的知识建立一个表格，然后对表格进行美化和相关的单元格合并处理 二 步骤 建立一个七行六列的表格 将第一列的第二行到第四行合并成一个单元格（rowspan） 将第一列的第五行到第七行合并成一个单元格 （rowspan） 在相应的单元格中填上时间和课程 三 注意点 一定要将要合并的单元格注销掉 四 代码片段 &lt;!DOCTYPE html&g...
html课程表页面
Sunday CSDN博客
11-26 1万+
效果图： html代码部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>课程表</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head><body background="im
初学HTML5——表格（课程表）
一霏的博客
07-17 1060
课程表图片素材来源于网络 表格中合并单元格属性 行合并 rowspan 列合并 colspan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&gt...
html写课程表
热门推荐
wfdtxz的专栏
12-08 2万+
课程表 项目 上课 休息 星期 星期一 星期二 星期三 星期四 星期五 星期六 星期天 上午 星期一 星期二 星期三 星期四 星期五 星期六 休息 星期一 星期二 星期三 星期四 星期五 星期六 星期一 星期二 星期三 星期四 星期五 星期六 星期一 星期二 星期三 星期四 星期五 星期六 下午 星期一 星期二 星期三 星期四 星期五 星期六 休息 星
Javascript绘制表格斜线实现课程表效果
Java Java
09-01 906
在利用HTML设计客户端表格界面时，表头左上角有时候可能要实现类似课程表加斜线的效果，以便指明横栏和竖栏的名称。[b]Graphics capabilities for JavaScript[/b]是一个矢量绘制基本图形的Javascript库，利用它，你可以在页面中绘制线段，圆，椭圆，方形，星状图甚至饼图。 使用它也非常简单，首先在HTML的head中引用其提供的js文件，然后在要绘制图形...
用html语言写一个功课表
The poor student
10-17 2162
今天在网上看了一个关于html的教程，主要是讲表格，看完之后觉得有必要上机试试，于是就写了下面的一段代码。 功课表 项目 上课 休息 星期 星期一 星期二 星期三 星期四 星期五 星期六 星期日 上午 语文
用js实现课程表在table的显示
02-27
好的，以下是用JavaScript实现在表格中显示课程表的一般步骤： 1. 创建一个HTML表格，并在表格中设置好行和列的数量，每个单元格对应课程表中的一个时间段和一门课程。 2. 使用JavaScript获取课程表数据，这些数据通常以数组或对象的形式存储，每个元素包含有关课程的信息，如课程名称、时间、地点和教师等。 3. 循环遍历课程表数据，将每个元素插入到表格的对应单元格中。 4. 可以在插入数据时使用一些样式和格式化代码，以便更好地显示课程表信息，例如为每个课程添加背景颜色、字体样式等。 5. 在最后确保在页面上显示完整的表格并测试其功能。 希望这些步骤对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值