如何使用HTML制作课程表!

zzz_110709

已于 2023-10-21 21:07:44 修改

阅读量531

点赞数 9

文章标签： html 前端 javascript

于 2023-10-21 21:03:33 首次发布

本文链接：https://blog.csdn.net/zzz_110709/article/details/133965510

版权

表格由行、列、单元格三部分组成：table（表格标签）、tr（行标签）、td（单元格标签）

下面是运行之后的图片：

以下是课程表的HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/* css样式选择-内部样式 */
		    /* 元素选择器 */
			table{
				width: 800px;/* 宽度 */
				margin: 0 auto;/* 外边距 设置水平居中 */
				border-color: black;/* 边框颜色 */
			}
				
			td{
				text-align: center;/* 文本水平对齐 */
				color: black;/* 内容文字颜色 */
			}
		</style>
    </head>
	<body>
		<table border="1" style="border-collapse: collapse;">
			<!-- 边框大小       表格的两边框合并为一条 -->
		<tr>
			<td colspan="7">河南工业职业技术学院 计应2307 课程表</td> colspan <!-- colspan 合并列 -->
		</tr>
			
		<tr>
			<td></td>
			<td>学年学期:2323-2024-1</td>
			<td></td>
			<td></td>
			<td></td>
			<td>班级人数:50</td>
			<td>打印日期:2023-10-21</td>
		</tr>
			
		 <tr>
			<td>\</td>
			<td>星期一</td>
			<td>星期二</td>
			<td>星期三</td>
			<td>星期四</td>
			<td>星期五</td>
			<td>星期六</td>
		</tr>
				
		<tr>
			<td>第一二节</td>
			<td></td>
			<td>C语言</td>
			<td>高数</td>
			<td>高数</td>
			<td>web前端开发</td>
			<td></td>
		</tr>
				
		<tr>
			<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 rowspan="2">web前端开发</td> <!-- rowspan 合并行 -->
		</tr>
				
		<tr>
			<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>
		</tr>
	    </table>
	</body>
</html>

第一步:首先利用<table> </table>定义表格标签

接着利使用<tr></tr>和<td></td>制作一个八行七列的表格

然后在<td></td>之间弄好自己需要填写的内容

第二步:回到<head></head>之间来修饰自己的表格

先由style来定义样式信息

接着由table来选择定义自己的边框