表格
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> </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> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </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> </td>
<td> </td>
</tr>
<tr>
<td class="font_time">5<br>11:20<br>12:00</td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
</tr>
<tr>
<td class="font_time">7<br>14:45<br>15:25</td>
<td> </td>
<td> </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> </td>
<td class="random-color">走进创业<br>1-8</td>
</tr>
<tr>
<td class="font_time">9<br>16:30<br>17:10</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="font_time">11<br>18:45<br>19:25</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
</tr>
<tr>
<td class="font_time">13<br>20:30<br>21:10</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
5345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
