<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{margin:0;padding:0;border-collapse:collapse;}/*边框会合并为一个单一的边框*/
th,td{border:1px solid #000000;height:30px;width:80px;text-align:center;}
/*cellspacing 属性规定单元格之间的空间,cellpadding 属性规定的是单元边沿与单元内容之间的空间。*/
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>时间日期</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</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>
<tr>
<td colspan="6"></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>
</tbody>
</table>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{margin:0;padding:0;border-collapse:collapse;}/*边框会合并为一个单一的边框*/
th,td{border:1px solid #000000;height:30px;width:80px;text-align:center;}
/*cellspacing 属性规定单元格之间的空间,cellpadding 属性规定的是单元边沿与单元内容之间的空间。*/
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>时间日期</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</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>
<tr>
<td colspan="6"></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>
</tbody>
</table>
</body>
</html>
HTML表格布局实例
本文提供了一个使用HTML和CSS创建表格布局的示例,展示了如何设置表格样式、合并单元格等技巧。
2429

被折叠的 条评论
为什么被折叠?



