使用表格制作课程表

原创 2019-01-22 23:12:47 376
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!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>表格标签table</title>

<style>

* {

margin: 0px;

padding: 0px;

}


table {


border: 1px solid #ccc;

border-collapse: collapse;


}


tr td {

height: 50px;

border: 1px solid #ccc;

width: 100px;

}


th {

height: 50px;

border: 1px solid #ccc;

width: 100px;

}

tr td#over{

height: 50px;

border: 1px solid#ccc;

width: 100px;

text-align: center

}

</style>

</head>


<body>

<table>

<tr>

<th>课程表</th>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

<th>星期六</th>

<th>星期日</th>

</tr>


<tr>

<!-- 合并行 rowspan -->

<td rowspan="3">上午</td>

<td></td>

<td></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>

<td></td>

</tr>

<tr>


<td></td>

<td></td>

<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>

<td></td>

<td></td>

</tr>

<tr>


<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<!-- 合并列 colspan -->

<td id="over" colspan="8">放学</td>


</tr>

</table>

</body>


</html>



批改老师:天蓬老师批改时间:2019-01-23 09:00:41
老师总结:表头放到<thead>中, 主体放在<tbody>中比较好, 特别是<tbody>不要省略, 就算是你不写, 浏览器也会自动生成, 如果省略掉了, 那么在用js获取表格数据时会出错

发布手记

热门词条