CSS表格设置实例

来源：动视网责编：小采时间：2020-11-27 18:47:59

CSS表格设置实例

CSS表格设置实例:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>4.CSS表格设置</title> <style> /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td

推荐度：

点击下载本文 文档为doc格式

导读CSS表格设置实例:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>4.CSS表格设置</title> <style> /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>4.CSS表格设置</title>
 <style>
 /*第一步:给整个表格以及内部的所有单元格加上边框*/
 table,th,td {
 border: 1px solid #333;
 }
 /*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
 table {
 /*折叠表格线*/
 border-collapse: collapse;
 text-align: center;
 width: 60%;
 /*表格居中*/
 margin: 50px auto;
 box-shadow: 3px 3px 3px #888;
 background-image: url(../images/gs/bg.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 }
 table caption {
 font-size: 1.6em;
 font-weight: bolder;
 margin-bottom: 30px;
 }
 th,td {
 padding: 10px;
 }
 td img {
 border-radius: 50%;
 box-shadow: 2px 2px 2px #888;
 /*width:80px;*/
 }
 th {
 background-color: rgba(155,155,0,0.3);
 color: brown;
 }
 .green {
 color: darkgreen;
 font-weight: bolder;
 font-size: 1.2em;
 }
 </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="../images/gs/1.jpg" alt="" width="50"></td>
 <td>一阳指</td>
 <td>全真教</td>
 <td>空手打死过一只狗</td>
 </tr>
 <tr>
 <td>2</td>
 <td>张无忌</td>
 <td>魔教教主</td>
 <td><img src="../images/gs/2.jpg" alt="" width="50"></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="" width="50"></td>
 <td>全真教</td>
 <td>左右互搏术</td>
 <td>给皇帝戴过绿帽子</td>
 </tr>
 <tr>
 <td>4</td>
 <td>陈近南</td>
 <td>南霸天</td>
 <td><img src="../images/gs/4.jpg" alt="" width="50"></td>
 <td>天地会</td>
 <td>吃西瓜</td>
 <td>吃葡萄从来不吐葡萄皮</td>
 </tr>
</table>
</body>
</html>

CSS表格设置实例

CSS表格设置实例:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>4.CSS表格设置</title> <style> /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td

推荐度：

点击下载本文 文档为doc格式

标签：设置表格例子

热门焦点

CSS表格设置实例

CSS表格设置实例

CSS表格设置实例

最新推荐

猜你喜欢

热门推荐