table 表单
align="center" 排列(表格)居中
<tr> 行
<th> 表头
<td> 格子
<colspan> 列往右
<rowspan> 行往下
border 边界(框的边界线)
outline 边界(聚焦的边界线)
text-align 文本位置
td[colspan] td标签下的colspan属性
td[colspan] .date td标签下的colspan属性下创建的class类
border-collapse 边界折叠
border-radius 四个边角
font-weight 字体重量(粗细颜色深浅)
font-size 字体大小
margin-bottom 下边缘(框往外)
padding-top 上边缘(框以内)
cursor:pointer 手指光标(光标标志)
hover 悬停
border-spacing 边框间距(在style标签中使用)
cellspacing 格子间距(在table标签中使用)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>07-课程表-练习</title>
<style>
td {
border: 1px solid #000;
text-align: center;
}
td[colspan], td[rowspan], .date {
font-weight: 700;
}
.date td {
width: 70px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td colspan="6">课程表</td>
</tr>
<tr class="date">
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<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>
</tr>
</table>
</body>
</html>
1384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
