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

最新推荐文章于 2024-07-12 00:07:26 发布
最新推荐文章于 2024-07-12 00:07:26 发布
阅读量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
    评论
专栏目录
HTML 课程表，使用 JavaScript 渲染生成
04-08
在这个案例中，我们将讨论如何使用 JavaScript 来动态地渲染生成这样的课程表。JavaScript 是一种客户端脚本语言，它允许我们在用户的浏览器上执行代码，为网页添加交互性。 首先，HTML（超文本标记语言）是构建...
HTML——课程表制作
weixin_64537406的博客
01-09 2084
使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。
html table制作课程表
weixin_45044528的博客
07-08 1494
课后作业 table 制作课程表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课程表</title> </head> <body> &
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并
最新发布
weixin_64294248的博客
07-12 1479
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
利用Html完成一张课程表的网页
yyy__yyy_的博客
07-17 5999
利用HTML中表格的相关知识，完成课程表的网页开发。
用table标签写课程表
m0_63800984的博客
09-10 140
班级: </td>background-color:#7fb80e" colspan="6">下午</td>background-color:#4e72b8">星期课程表
用html写网课课程表
01-20
在本例中，我们将探讨如何利用HTML来创建一个网课课程表，帮助学生更方便地管理他们的在线学习时间。 首先，创建一个HTML文档的结构是至关重要的。一个基本的HTML文档通常包括`<!DOCTYPE html>`声明、`<html>`元素...
html+css的课程表设计
09-05
而"image"目录可能包含了课程表中使用的图像资源，如课程图标、背景图片等。 总的来说，这个“html+css的课程表设计”项目展示了HTML和CSS在创建动态、美观界面方面的强大能力，同时也涉及到网页开发中的响应式设计...
html kechengbiao.zip_html_课程 表格 html_课程表_课程表 html
09-14
在本案例中，"html kechengbiao.zip" 提供的是一份与课程相关的HTML文件，它使用了HTML表格（table）来构建一个课程表。课程表是教育机构管理教学计划的重要工具，它清晰地展示了课程的名称、时间、地点等信息。 ...
使用HTML语言和CSS开发商业站点
06-25
在构建商业站点的过程中，HTML（超文本标记语言）和CSS（层叠样式表）是两个至关重要的技术。HTML用于创建网页的基本结构，而CSS则负责美化这些页面，使其具有吸引人的外观和用户体验。本课程围绕S1阶段的HTML与CSS...
html课程表页面
11-26
html课程表页面
HTML5生成课表
12-25
HTML5生成超级课程表格子样式课表，并通过JS代码实现单双周课程自动判断。
课表网页制作
05-27
自己制作的一个课表,用的是html,小菜鸟作品,还望大家笑纳.
漂亮的jquery 网页各种table 表单等
02-27
中间有个字体文件是用的在线网上的 ，用的话 我已经弄下来了
HTML——table标签制作课程表
weixin_49771248的博客
10-20 709
深入了解table标签，并灵活运用。
HTML——表格标签＜table＞与表格实现
qq_51869518的博客
06-25 5311
表格标签的实际应用和表格属性colspan和rowspan的详细解释与使用的实例和规则，以及不同形式的表格的实现；课程表、日历和的代码实现。欢迎大家能有更好的建议。
table制作课程表案例
码上行动
04-26 1188
table制作课程表 代码如下： <body> <h3 align="center">课程表</h3> <table align="center" border="1" bordercolor="green" widt h="600" height="300"> <tr> <td align="center">项目</td> <td align="center" colspan=
用table表格建立一个课程表
只有自己觉到悟到的，才是自己的。
09-26 2078
用table表格建立一个课程表 首先看看预期效果：
el-table实现课表
07-06
在ECharts Table (el-table) 中，它是一个用于展示数据表格的强大组件，常用于Vue.js的Element UI库中。如果你想要用el-table实现课程表，你可以按照以下步骤操作： 1. **安装依赖**： 首先确保你在项目中已经安装了Element UI，如果没有，可以使用`npm install element-ui` 或 `yarn add element-ui`来安装。 2. **引入组件**： 在你的Vue组件文件里，import ElTable 和相关的列定义如ElColumn。 ```html <template> <el-table ref="table" :data="courseList"> <!-- ... --> </el-table> </template> <script> import { ElTable, ElColumn } from 'element-ui'; export default { components: { ElTable, // 如果有列需要自定义，比如教师名、课程名等 TeacherNameColumn: () => ({ render: (h, params) => h('span', params.row.teacherName) }), CourseNameColumn: () => ({ render: (h, params) => h('span', params.row.courseName) }) }, data() { return { courseList: [ // 假设这是你的课程数据，包括字段如teacherName、courseName等 { teacherName: '张三', courseName: '计算机科学入门' // 其他课程信息... }, // 更多课程... ] }; } }; </script> ``` 3. **配置列**： 使用ElColumn定义每列的数据格式和样式，包括标题和显示内容。 4. **事件处理**： 可以利用el-table提供的内置事件，如`@selection-change`处理选中行的操作，`@row-click`处理点击行的操作。 ```html <template> <el-table ref="table" :data="courseList" @selection-change="handleSelectionChange" @row-click="handleRowClick" > <el-column type="index"></el-column> <!-- 列头序号 --> <el-column prop="teacherName" label="教师姓名" :render="TeacherNameColumn"></el-column> <el-column prop="courseName" label="课程名称" :render="CourseNameColumn"></el-column> <!-- 添加更多列... --> </el-table> </template> <script> // ... 在data中添加处理函数 methods: { handleSelectionChange(selection) { console.log('选择了以下课程：', selection); }, handleRowClick(row) { console.log(`单击了行：${JSON.stringify(row)}`); } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值