Heim >Web-Frontend >CSS-Tutorial >Beispiel für die CSS-Tabelleneinstellung
Beispiel für die CSS-Tabelleneinstellung
- 无忌哥哥Original
- 2018-06-28 17:24:581817Durchsuche
<!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>Das obige ist der detaillierte Inhalt vonBeispiel für die CSS-Tabelleneinstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beschreibung und Beispiele des CSS-Box-ModellsNächster Artikel：Beschreibung und Beispiele des CSS-Box-Modells