html语言

表格

1. `<table>`:table
2. `<tr>`:table row
3. `<th>`:table header cell
4. `<td>`:table data cell
5. `<thead>`:table head

6. `<tbody>`:table body
7. `<tfoot>`:table foot

表格制作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浙江师范大学官网</title>
    <link rel="stylesheet" href="style1.css">
    <style>
        table {
            border: 2px solid rgb(185, 240, 240); 
            background-color: #e0e0e0; 
            margin: 0 auto;
            width: 1000px;
            height: 200px;
            border-collapse: collapse; 
        }
        td {
            background-color: white; 
            border: 5px double rgb(185, 240, 240); 
            padding: 4px; 
        }
        .blue-row td{
            background-color: rgb(26, 173, 218);
            color: white;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        #t1 {
            margin: 0 auto;
            text-align: center; 
        }
        
    </style>
</head>
<body style="background-color: white;">
    <table class="table">
        <tr class="blue-row">
            <td colspan="6" style="text-align: center;" >各种食物含糖指数</td>
        </tr>
        <tr>
            <td >食物种类</td>
            <td>低GI(55以下)</td>
            <td>中GI(56-69)</td>
            <td>高GI(70以上)I</td>

        </tr>    
        <tr>
            <td rowspan="3">主食</td>
            <td>糙米 黑米</td>
            <td>糙米饭 红米饭</td>
            <td>糯米饭 白饭</td>
        </tr>
        <tr>
            <td>粉丝 意粉 通心粉 全蛋面</td>
            <td>乌冬面</td>
            <td>普通小麦面</td>
        </tr>
        <tr>
            <td>裸麦粒面包</td>
            <td>彼得包 牛角包</td>
            <td>白面包 馒头</td>
        </tr>
        <tr>
            <td>生果类</td>
            <td>橙 苹果 雪梨 奇异果 提子 沙 葡萄柚 士多啤梨</td>
            <td>蜜瓜 香蕉 木瓜 芒果</td>
            <td>西瓜 荔枝 龙眼</td>
        </tr>
        <tr>
            <td>豆类</td>
            <td>黄豆 绿豆 眉豆 红腰豆 扁豆类</td>
            <td>焗豆</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="4">资料来源:中国食物成分表</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生课表查询</title>
    <link rel="stylesheet" href="style.css">
    <style>
        table {
            border: 2px solid rgb(185, 240, 240);
            background-color: #e0e0e0;
            margin: 0 auto;
            width: 2000px;
            height: 1000px;
            border-collapse: collapse;
            empty-cells: show;
            font-size: 20px;
        }
        td {
            background-color: white; 
            border:solid  2px  black;
        }
        .blue-row td{
            background-color: rgb(26, 173, 218);
            color: rgb(3, 3, 3);
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        #t1 {
            margin: 0 auto;
            text-align: center; 
        }
        
    </style>
<!-- border: 1px double rgb(185, 240, 240); !-->
<!-- style="background-color: white;" !-->
<body style="text-align: center;">
    <table class="table" >
        <tr class="blue-row">
            <td colspan="9" style="text-align: center;font-size:  40px;" >卢本伟的课表</td>
        </tr>
        <tr>
            <td>时间段</td>
            <td>节次</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="5">上午</td>
            <td class="font_time">
                1<br>
                08:00<br>
                08:40
            </td>
            <td rowspan="2" class="random-color" >多媒体技术与应用<br>25-215</td>
            <td rowspan="2" class="random-color">Web开发技术<br>29-106</td>
            <td></td>
            <td rowspan="3" class="random-color">智能感知技术<br>20-107</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="font_time">2<br>08:45<br>09:25</td>
            <td rowspan="3" class="random-color">数据库原理及应用<br>29-106</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">3<br>09:40<br>10:20</td>
            <td></td>
            <td rowspan="3" class="random-color">操作系统<br>23-527</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">4<br>10:35<br>11:15</td>
            <td></td>
            <td rowspan="2" class="random-color">操作系统<br>20-109<br>9-16</td>
            <td rowspan="2" class="random-color">操作系统<br>23-527</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">5<br>11:20<br>12:00</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="4">下午</td>
            <td class="font_time">6<br>14:00<br>14:40</td>
            <td rowspan="3" class="random-color">多媒体技术与应用<br>20-109<br>8-13</td>
            <td rowspan="4" class="random-color">软件项目实训<br>20-102</td>
            <td></td>
            <td rowspan="3" class="random-color">计算机网络<br>23-109</td>
            <td rowspan="3" class="random-color">数字电路<br>24-407</td>
            <td>&#x0020;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">7<br>14:45<br>15:25</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="random-color">大学生性健康教育</td>
        </tr>
        <tr>
            <td class="font_time">8<br>15:40<br>16:20</td>
            <td rowspan="2" class="random-color">大学体育—定向运动</td>
            <td>&nbsp;</td>
            <td class="random-color">走进创业<br>1-8</td>

        </tr>
        <tr>
            <td class="font_time">9<br>16:30<br>17:10</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="4">晚上</td>
            <td class="font_time">10<br>18:00<br>18:40</td>
            <td rowspan="2" class="random-color">软件工程基础<br>23-213</td>
            <td></td>
            <td></td>
            <td rowspan="3" class="random-color">计算机网络<br>20-109<br>9-16</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
        <tr>
            <td class="font_time">11<br>18:45<br>19:25</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">12<br>19:40<br>20:20</td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2" class="random-color">软件工程基础<br>20-206<br>9-16</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">13<br>20:30<br>21:10</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <div style="text-align: right; margin-top: 20px;">
        <a href="index.html" class="vertical-text" style="color: #007bff;">返回主页</a>
    </div>
    <script>
        // 生成随机颜色值
        function getRandomColor() {
            var r = Math.floor(Math.random() * 128) + 90; // 红色范围在128-255之间
            var g = Math.floor(Math.random() * 128) + 128; // 绿色范围在128-255之间
            var b = Math.floor(Math.random() * 128) + 128; // 蓝色范围在128-255之间
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }   

        // 应用随机颜色到元素背景
        var elements = document.querySelectorAll('.random-color');
        elements.forEach(function(element) {
            element.style.backgroundColor = getRandomColor();
        });
    </script>
</body>
</html>
  • 22
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值