这节课是练习课,在上一节课我们已经学了关于表格的一些东西,表格的功能不仅如此,还可以更强大.
这里会先用到了CSS文件,所以在工程中包含一个新文件stylesheet.css.CSS的内容会在下一节课里学习,这里先不去讲它.
css文件stylesheet.css:
<span style="font-size:14px;">img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}</span>
更多精彩内容:http://www.bianceng.cn/web/html/
表格里也可以放置图片,而且这个图片也可以设置成带超链接的,只要在<img>外面包围着<a>标签即可.
<!DOCTYPE html>>
<html>
<head>
</a>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead colspan='3'>
<th>Shuangde</th>
</thead>
<tbody>
<tr>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img4.douban.com/view/photo/photo/public/p616776018.jpg" /></a></td>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p1943390036.jpg" /></a></td>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p511146957.jpg" /></a></td>
</tr>
<tr>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p510861057.jpg" /></a></td>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p897378146.jpg" /></a></td>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p492406974.jpg" /></a></td>
</tr>
<tr>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img4.douban.com/view/photo/photo/public/p456665648.jpg" /></a></td>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img5.douban.com/view/photo/photo/public/p455599589.jpg" /></a></td>
<td> <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p457759533.jpg" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果图:
来源: http://www.bianceng.cn/web/Html/201411/46556.htm