实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS对表格的控制</title>
<style>
/*第一步：给表格加边框*/
table,th,td{
border: 1px solid black;
}
/*第二步：消除表格线*/
table{
border-collapse: collapse;
text-align: center;
background-image: url("img9.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 60%;
margin: 50px auto;
box-shadow: 5px 5px 5px #8989;
}
table caption{
color: red;
font-weight: bolder;
font-size: 2em;
margin-bottom: 30px;
}
th{
background-color: lightskyblue;
}
th,td{
padding:1.2em;
}
td img{
border-radius: 50%;
box-shadow: 5px 5px 5px #888;
}
.box{
color:rebeccapurple;
font-weight: bold;
}
</style>
</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="1.jpg" width="50"></td>
<td>纯阳掌</td>
<td class="box">回忆迷惘杀戮多，往事情仇待如何。绢写黑诗无限恨，夙兴夜寐枉徒劳</td>
<td>长年带领群侠抵御苗疆的入侵，与世仇苗疆战神藏镜人作战多年</td>
</tr>
<tr>
<td>2</td>
<td>神蛊温皇</td>
<td>还珠楼</td>
<td><img src="2.jpg" width="50"></td>
<td>飘渺绝剑</td>
<td class="box">风满楼，卷黄沙，舞剑春秋，名震天下。雨飘渺，倦红尘，还君明珠，秋水浮萍</td>
<td>智、武、毒、医兼修，在甲子名人录中拥有三个第一称号：分别为“天下第一毒”、“天下第一剑”、和亲手创立的“天下第一阁”——还珠楼。</td>
</tr>
<tr>
<td>3</td>
<td>赤羽信之介</td>
<td>西剑流</td>
<td><img src="3.jpg" width="50"></td>
<td>朱凰蚀炎</td>
<td class="box">朱凰降中土，赤羽惊鸿舞春秋，情义泯恩仇</td>
<td>曾协助祭司侵略中原，与以中原为主的各方势力展开争斗。后为报恩，来到中原，成为俏如来的一大助力，有恩报恩，有仇报仇。</td>
</tr>
<tr>
<td>4</td>
<td>欲星移</td>
<td>鳞族</td>
<td><img src="4.jpg" width="50"></td>
<td>相星九绝</td>
<td class="box">忏悔几时，拎剑挥沉，不省风波染一身。玩物丧志，无地埋根，人生何处不留恨</td>
<td>在魔世祸乱中原之际，为了保护族民，欲星移率先步出海境，联合中苗群侠共抗魔世。身为始帝血统根源之一、避世千年之久鳞族，也由欲星移的入世而重现九界、再出尘寰。</td>
</tr>
<tr>
<td>5</td>
<td>北竞王</td>
<td>苗疆</td>
<td><img src="5.jpg" width="50"></td>
<td>皇世经天宝典·轮回劫</td>
<td class="box">北龙归心号苍穹，竞曰风云山河。辕门策令战骁驰，尽下一步干戈</td>
<td>元邪皇祸乱中原之时，化身单夸救了千雪孤鸣，并故意多次走错道路提醒铁骕求衣元邪皇的真正动机，而后主动交出了真正的《九龙天书》帮助中原和苗疆共同对抗元邪皇，自己则云游四海自此隐退。</td>
</tr>
<tr>
<td>6</td>
<td>默苍离</td>
<td>墨家</td>
<td><img src="6.jpg" width="50"></td>
<td>止戈流</td>
<td class="box">霓霞羽战火连天，墨影神誓护千年。寄语孤鸿诛邪灭，止戈剑印荡魔渊</td>
<td>道域平乱，墨家以一敌九，远赴羽国阻内乱，破九龙天下之局，带领中原群侠对抗魔世</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
运行效果图：
