【示例】
-
HTML
<table> <caption> 金曲排行 </caption> <thead> <tr> <th>序号</th> <th>歌曲名</th> <th>演唱</th> <th>人气</th> </tr> </thead> <tbody> <tr> <th>01</th> <td>小苹果</td> <td>筷子兄弟</td> <td>120093</td> </tr> <tr> <th>02</th> <td>匆匆那年</td> <td colspan="1" rowspan="2">王菲</td> <td colspan="1" rowspan="2">38490</td> </tr> <tr> <th>03</th> <td>致青春</td> </tr> <tr> <th>04</th> <td>喜欢你</td> <td>G.E.M.邓紫棋</td> <td>37449</td> </tr> <tr> <th>05</th> <td>当你老了</td> <td>莫文蔚</td> <td>93947</td> </tr> <tr> <th>06</th> <td colspan="2" rowspan="2">群星演唱最炫小苹果</td> <td>93984</td> </tr> </tbody> </table>
-
CSS
caption { padding: 0 0 5px 0; font: 18px "Microsoft Yahei","Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } th { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA url(images/bg_header.jpg) no-repeat; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; font-size: 11px; padding: 6px 6px 6px 12px; color: #4f6b72; }