作为一枚程序员,当然要认真对待自己的节日^_^
今天用Table嵌套做两个小案例,Mark一下!
案例一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="5">
<tr>
<td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
<td bgcolor="#66FF00" align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
<tr>
<td align="center" valign="middle">
<table border="4">
<tr>
<td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
<td align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
<tr>
<td align="center" valign="middle">
<table border="3">
<tr>
<td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
<td align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
<tr>
<td align="center" valign="middle">
<table border="2">
<tr>
<td bgcolor="#66FF99" align="center" valign="middle" rowspan="2">
☆<br/>☆<br/>☆
</td>
<td align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
<tr>
<td align="center" valign="middle">
<table border="1">
<tr>
<td align="center" valign="middle" rowspan="2">
<a href="http://www.itheima.com/" target="_blank">★<br/></a>
<a href="http://www.itheima.com/" target="_blank">★<br/></a>
<a href="http://www.itheima.com/" target="_blank">★<br/></a>
</td>
<td align="center" valign="middle" colspan="2">
<a href="http://www.itheima.com/" target="_blank">★★★</a>
</td>
</tr>
<tr>
<!--<td align="center" valign="middle">★★★</td>-->
<td align="center" valign="middle"><a
href="http://www.itheima.com/" target="_blank">
<img src="../img/1024.png" width="50" height="25">
</a>
</td>
<td align="center" valign="middle" rowspan="2">
<a href="http://www.itheima.com/" target="_blank">★<br/></a>
<a href="http://www.itheima.com/" target="_blank">★<br/></a>
<a href="http://www.itheima.com/" target="_blank">★<br/></a>
</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">
<a href="http://www.itheima.com/" target="_blank">★★★</a>
</td>
</tr>
</table>
</td>
<td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
</tr>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
</table>
</td>
<td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
</tr>
</tr>
<tr>
<td bgcolor="#66FF66" align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
</table>
</td>
<td bgcolor="#66FF33" align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
</tr>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
</table>
</td>
<td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
</tr>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">☆☆☆</td>
</tr>
</table>
</body>
</html>
案例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table_span</title>
</head>
<body>
<table border="1">
<tr aria-rowspan="2">
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>
<table border="1">
<tr aria-rowspan="2">
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>
<table border="1">
<tr aria-rowspan="2">
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>
<table border="1">
<tr aria-rowspan="2">
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>
<table border="1">
<tr aria-rowspan="2">
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
<tr>
<td>AAA</td>
<td bgcolor="#adff2f"><font color="red"><b>1024</b></font></td>
<td>CCC</td>
</tr>
<tr>
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
</table>
</td>
<td>CCC</td>
</tr>
<tr>
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
</table>
</td>
<td>CCC</td>
</tr>
<tr>
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
</table>
</td>
<td>CCC</td>
</tr>
<tr>
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
</table>
</td>
<td>CCC</td>
</tr>
<tr>
<td bgcolor="#adff2f">AAA</td>
<td>BBB</td>
<td bgcolor="#adff2f">CCC</td>
</tr>
</table>
</body>
</html>