<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计应2307课程表</title>
<style>
table{
width: 800px;
margin: 0 auto;
border-color: #00ff00;
}
td{
text-align: center;
color: red;
}
tr:nth-child(3){
font-weight: bold;
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan="7">河南工业职业技术学院 计应2307 班级课程表</td>
</tr>
<tr>
<td></td>
<td>学年学期:2023-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>web表示层开发与技术</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>web表示层开发与技术</td>
<td>数字平面设计基础</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
第一步:使用编辑器新建一个HTML文件。
第二步:为其命名,添加样式<style><style/>,并在其中输入表格三要素(table tr td)。
注《table为表格 tr为表格的行 td为表格的列》
第三步:设置适合自己表格的宽度和边距,然后再设置自己想要的字体和表格的效果。
第二步和第三步如图所示:
第四步:在<body></body>中添加table表格。
第五步:在第一个table括号中添加 《border="1" style="border-collapse: collapse;"》使表格和边距融在一起,使表格看起来更美观。
第六步:在table表格中添加行"<tr></tr>",有几行就添加几个"<tr></tr>"。
注:添加在两个table的><中间 如<table>#</table> 添加位置就在#号位置,后面的tr和td也是如此。
第七步:在tr行中添加"<td></td>",有几列就添加几个"<td></td>"。
第八步:可以在td的括号里添加"colspan=“(填数字)”"进行列之间的融合
如图:
效果为 如图:
第九步:在td列中添加自己需要的内容
如图:
第十步:进行保存(可以Ctrl+s键进行快捷保存),然后点击运行 --- 在浏览器中运行---点击自己电脑上有的浏览器进行运行即可。
最后 , 运行代码的效果图: