HTML+CSS Comprehensive Example of HTML+CSS for Easy Getting Started (1)
Example 1: Learning Plan
The code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng) 實(shí)例一</title>
<style type="text/css">
table{
width:600px;
border:1px solid #ccc;
text-align:center;
margin:0 auto;
margin-top:30px;
}
th{
border:1px solid #999;
background-color:#f60
}
td{
border:1px solid #999;
background-color:#f66
}
</style>
</head>
<body>
<table>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="3">上午</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英語(yǔ)</td>
<td>數(shù)學(xué)</td>
<td>生物</td>
<td>化學(xué)</td>
<td>歷史</td>
</tr>
<tr>
<td>政治</td>
<td>美術(shù)</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>化學(xué)</td>
<td>語(yǔ)文</td>
<td>生物</td>
</tr>
<tr>
<td>歷史</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>歷史</td>
<td>生物</td>
<td>語(yǔ)文</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>歷史</td>
<td>語(yǔ)文</td>
<td>化學(xué)</td>
<td>生物</td>
<td>語(yǔ)文</td>
</tr>
<tr>
<td>歷史</td>
<td>化學(xué)</td>
<td>生物</td>
<td>政治</td>
<td>物理</td>
<td>地理</td>
<td>體育</td>
</tr>
<tr>
<td>歷史</td>
<td>物理</td>
<td>化學(xué)</td>
<td>體育</td>
<td>地理</td>
<td>物理</td>
<td>化學(xué)</td>
</tr>
</table>
</body>
</html>Here we use a merged cell,
rowspan to merge vertical cells, you To merge several cells, you need to delete the following cells td and subtract one, because the cell itself cannot be deleted. For example, if I want to merge 3 cells, write rowspan in the first cell. ="3" Then remove the next two cells
colspan Merging horizontal cells is similar to merging vertical cells
