使用HTML和内嵌css制作课程表

最新推荐文章于 2024-08-15 17:05:54 发布

G计应1903 李海兰

最新推荐文章于 2024-08-15 17:05:54 发布

阅读量269

点赞数 3

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_73599982/article/details/132840350

版权

这个案例是前段课下布置的小作业，效果图如下：

主要用html+内嵌css代码完成，做的比较简陋，下面献上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				border: 5px solid skyblue;
				border-collapse: collapse;
				margin: 0 auto;
				text-align: center;
			}
			tr{
				height: 50px;;
			}
			.blueTr{
				background-color:aliceblue;
			}
			td {
				border: 5px solid skyblue;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td></td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr class="blueTr">
				<td>第一二节</td>
				<td></td>
				<td>人工智能与应用<br>徐国清<br>G计算机1903</td>
				<td>企业网站综合实训<br>付显<br>G计算机1903</td>
				<td>信息安全<br>华隆<br>G计算机1903</td>
				<td></td>
			</tr>
			<tr>
				<td>第三四节</td>
				<td>形势与政策9<br />赵国锋<br>G计算机1901，G计算机1902，G计算机1903</td>
				<td></td>
				<td></td>
				<td>前端框架技术<br>岳小冰<br>G计算机1903</td>
				<td>计算机网络基础<br>任海留洋<br>G计算机1901，G计算机1902，G计算机1903</td>
			</tr>
			<tr class="blueTr">
				<td>第五六节</td>
				<td>企业网站综合实训<br>付显<br>G计算机1903</td>
				<td></td>
				<td></td>
				<td>影视编辑与合成<br>庞士昱<br>G计算机1903</td>
				<td></td>
			</tr>
			<tr>
				<td>第七八节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>影视编辑与合成<br>庞士昱<br>G计算机1903</td>
			</tr>
		</table>
	</body>
</html>

本文使用了表格标签table，行标签tr，列标签td，换行标签br实现效果，再使用内嵌css为表格进行美化。

使用到的表格美化代码有：

border：用于同时设置边框的宽度、样式和颜色

border-collapse：表示表格的两边框合并为一条

margin：用于设置元素的外边距

text-align：用来文本水平居中

height：设置页面高度

width：设置页面宽度

background-color：设置元素的背景颜色

以上就是我分享的内容，如有疑问，欢迎提问。

G计应1903 李海兰

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用HTML和内嵌css制作课程表

本文使用了表格标签table，行标签tr，列标签td，换行标签br实现效果，再使用内嵌css为表格进行美化。border-collapse：表示表格的两边框合并为一条。background-color：设置元素的背景颜色。border：用于同时设置边框的宽度、样式和颜色。text-align：用来文本水平居中。margin：用于设置元素的外边距。height：设置页面高度。width：设置页面宽度。
复制链接

扫一扫