這節課是練習課,在上一節課我們已經學了關於表格的一些東西,表格的功能不僅如此,還可以更強大。
這裡會先用到了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>
效果圖: