五 实战: 制作一张超炫的表格
表格代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css对表格的控制</title> </head> <body> <table> <caption>武林高手排行榜</caption> <tr> <th>名次</th> <th>姓名</th> <th>江湖绰号</th> <th>头像</th> <th>独门绝技</th> <th>所属门派</th> <th>英雄事迹</th> </tr> <tr> <td>1</td> <td>王重阳</td> <td>童男子</td> <td><img src="images/gs/1.jpg" alt="5.盒子模型实战: 制作一张超炫的表格" width="30"></td> <td>一阳指</td> <td>全真教</td> <td>空手打死一只狗</td> </tr> <tr> <td>2</td> <td>张无忌</td> <td>魔教教主</td> <td><img src="images/gs/2.jpg" alt="5.盒子模型实战: 制作一张超炫的表格" width="30"></td> <td>九阳神功</td> <td>明教</td> <td>同时交往了5个女朋友</td> </tr> <tr> <td>3</td> <td>周伯通</td> <td>老顽童</td> <td><img src="images/gs/3.jpg" alt="5.盒子模型实战: 制作一张超炫的表格" width="30"></td> <td>左右手互博</td> <td>全真教</td> <td>给皇帝带绿帽子</td> </tr> <tr> <td>4</td> <td>陈近南</td> <td>南霸天</td> <td><img src="images/gs/4.jpg" alt="5.盒子模型实战: 制作一张超炫的表格" width="30"></td> <td>吃西瓜</td> <td>天地会</td> <td>吃葡萄不吐葡萄皮</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
执行：
第一步:给整个表格以及内部的所有单元格加上边框
第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一
文本水平居中，表格水平居中，宽度设置为80%
添加阴影，背景，禁止图片重复，缩放（css3）
给标题设置字体大小，字体加粗，下边距30px
给单元格加上内边距
让头像变圆，加阴影
给表头添加背景
让颜色变浅
background-color:rgba(155, 155, 0, 0.3);/*0.3是透明度*/
理论上可以，但是不生效，可能不兼容
换一种背景色
给英雄事迹添加一个类green,再设置样式，让英雄事迹突出显示
Css样式：
最终效果：
标题加一个章节符：
最终效果，见：第6章 css盒模型制作一张超炫的表格
本文作者为BUG之神，转载请注明。