表格由行、列、单元格三部分组成: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来选择定义自己的边框
例如:
width 来选择宽度
margin 来定义外边距和表格位置
border-color 边框颜色
再由td来选择定义自己的文字
例如:
text-align 来定义文字位置
color 来定义文字颜色
第三步:保存,来运行自己编写的课表