HTML小练习（课程表）

最新推荐文章于 2022-12-12 21:56:57 发布

So Young007

最新推荐文章于 2022-12-12 21:56:57 发布

阅读量173

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/qiaoge66/article/details/114638940

版权

这是一个关于HTML小练习的博客，主要聚焦于制作一个课程表。通过使用HTML5和CSS，作者介绍了如何创建一个实用且视觉上吸引人的课程表。

摘要由CSDN通过智能技术生成

html小练习

在这里插入图片描述

课程表练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--
        表格： 用来展示数据

            table 标签
            tr 行
            td 表格体单元格
            th 表格头单元格 居中加粗

        属性：
            border 边框  px
            align
                table 整个表格的水平对其方式
                tr  这一行中所有单元格中的文本在 单元格中的水平对其方式
                td th  单元格中的文本在 单元格中的水平对其方式
            width 宽度
            height 高度
                可以作用在table 或者 tr|td
            bordercolor 边框颜色
            cellspacing 边框外边距
            cellpadding 边板框内边距
            样式：style="border-collapse: collapse"  双线变成单线
            bgcolor 背景颜色    table td  tr

            合并单元格：
                rowspan ：跨行
                colspan ：跨列


         注意： 表格中，现有table，再有行，先有行再有单元格，内容放在单元格中
                在使用合并单元格时候，被占用位置的单元格需要删掉
    -->
    <table border="1" align="center" width="500px" height="350px" bordercolor="pink" cellspacing="0"  style="border-collapse: collapse" bgcolor="cyan"
    bgcolor="pink" background="../imgs/38dbb6fd5266d016a2569ace962bd40734fa358c.jpg">
        <tr>
            <th colspan="6" bgcolor="#FAFAD2">上海尚学堂课程表</th>
        </tr>
        <tr bgcolor="#87ceeb">
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="3">上午</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
        </tr>
        <tr  align="center">
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
        </tr>
        <tr   align="center">
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
        </tr>
        <tr  align="center">
            <td rowspan="2">下午</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
        </tr>
        <tr  align="center">
            <td  align="right">java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
            <td>java大数据</td>
        </tr>
        <tr align="center" bgcolor="#FAFAD2" >
            <td>晚上</td>
            <td colspan="5" >晚自习</td>
        </tr>
    </table>
</body>
</html>

So Young007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML小练习（课程表）

html小练习课程表练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格</title></head><body> <!-- 表格：用来展示数据 table 标签 tr 行 td 表格体单
复制链接

扫一扫