给大家分享一个好看的HTML的表格样式,这个表格每个格子里都有背景图,
首先你需要下载俩张图,
cell-blue.jpg
cell-grey.jpg
命名为cell-blue.jpg和cell-grey.jpg
拷贝下面的代码到你想要的地方,记得修改图片url
<!-- CSS goes in the document HEAD or added to your external stylesheet --> <style type="text/css"> table.imagetable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.imagetable th { background:#b5cfd2 url('cell-blue.jpg'); border-width: 1px; padding: 8px; border-style: solid; border-color: #999999; } table.imagetable td { background:#dcddc0 url('cell-grey.jpg'); border-width: 1px; padding: 8px; border-style: solid; border-color: #999999; } </style> <!-- Table goes in the document BODY --> <table class="imagetable"> <tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr> <tr> <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr> <tr> <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr> </table>
需要的朋友可以直接拿去用,更多精彩请关注php中文网其它相关文章!
相关阅读:
Atas ialah kandungan terperinci HTML的表格样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!