用表格做一个好看的课程表
和表格相关的标签,大家第一反应就是:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
首先,table标签指的是一个表格的整体,tr代表的是行。td代表的是列,上面代码形成的效果就是一个一行两列的表格,再加上具体的内容,就可以实现一个简单的表格,如图所示:
为了让表格的效果更加明显,所以我们需要给表格加上边框,以及设置表格的宽高
<style>
table{
width: 600px;
height: 400px;
}
tr td{
border: 1px solid #000000;
}
</style>
现在表格已经具有雏形,接下来就是对表格的美化,首先在表格的边框交接的地方都是有两根实线,这是默认的1像素的间距,想要取消掉,需要消除表格之间的间距
table{
width: 600px;
height: 400px;
border-collapse: collapse;
}
border-collapse 用于表格属性, 表示表格的两边框的状态。取值有三种:
1.separate:
默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
2.collapse:
如果可能,边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
3.inherit:
规定应该从父元素继承border-collapse属性的值。
设置好border-collapse后的效果如图所示:
在上方的表格中,我们可以发现,上午,下午,午休这类词在某一块区域重复出现,那么我们可以直接将其合并成一个单元格,
<tr>
<td rowspan="2">上午</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>
</tr>
<tr>
<td rowspan="3">下午</td>
<td colspan="5">午休</td>
</tr>
在html中,合并单元格用colspan和rowspan来实现
colspan 属性规定单元格可横跨的列数。比如午休是五列合成一列,那么colspan就在第一列里设置属性值为5,则接下来的5列的位置就被一个表格占据
rowspan属性规定单元格可横跨的行数。比如上午是两行合成一行,那么rowspan就在第一行里设置属性值为2,则接下来的两行的位置就被一个表格占据
设置完成之后的效果如图所示:
表格的第一行为表头,所以要突出表现出来,在这就不得不说一个很容易让大家忽略的标签表头标签<th>
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 元素中的文本通常是普通的左对齐文本。
所以我们表格的第一行一般用th
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
不要忘了设置th的边框,最后的效果是:
最后设置字体大小,颜色,以及背景颜色即可
最后加表格标题:
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
width: 600px;
height: 400px;
border-collapse: collapse;
text-align: center;
font-size: 20px;
margin: 0 auto;
}
tr td,th{
border: 1px solid #000000;
}
.pink{
background-color: rgba(168, 111, 154, 0.3);
}
.blue{
background-color: rgba(106, 139, 170, 0.3);
}
.dark{
background-color: rgba(63, 102, 104, 0.3);
}
</style>
</head>
<body>
<table>
<caption><h2>最理想的课程表</h2></caption>
<tr class="dark">
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr class="pink">
<td rowspan="2" class="dark">上午</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr class="blue">
<!-- <td>上午</td> -->
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr class="dark">
<td rowspan="3">下午</td>
<td colspan="5">午休</td>
</tr>
<tr class="pink">
<td>数学</td>
<td>体育</td>
<td>数学</td>
<td>音乐</td>
<td>写作</td>
</tr>
<tr class="blue">
<td>体育</td>
<td>绘画</td>
<td>数学</td>
<td>围棋</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>