Heim > Artikel > Web-Frontend > Ausführliche Erläuterung von Beispielen für das Tabellenlayout
Ausführliche Erläuterung von Beispielen für das Tabellenlayout
- 零下一度Original
- 2017-06-28 09:22:341901Durchsuche
1. Schauen Sie sich zuerst den Layouteffekt mit Abstand an:
2. Sprechen Sie weniger und tun Sie mehr, schauen Sie sich einfach den Code an (es gibt Kommentare im Code).
1 <!DOCTYPE html> 2 <html lang="zh">
<head> 5 <meta charset="UTF-8" /> 6
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7
<title>有间距的表格布局</title> 8 <style type="text/css">
* { 10 margin: 0; 11 padding: 0; 12 }
table { 15 width: 500px; 16 margin-top: 30px; 17
border-collapse: separate; 18 /*关键设置：间距5px*/ 19
border-spacing: 5px; 20 /*均匀分布效果*/ 21
table-layout: fixed; 22 } 23 24
table th { 25 height: 44px; 26
font-size: 18px; 27 color: #fff; 28
text-align: center; 29 background-color: #1262a2; 30 }
table td { 33 height: 44px; 34
font-size: 16px; 35
color: #000; 36 text-align: center; 37
background-color: #e5e5e5; 38 } 39 </style> 40 </head> 41 42 <body>
<table> 44 45 <thead> 46 <tr> 47 <th>部门</th>
<th>联系方式</th> 49 </tr> 50 </thead> 51 <tbody> 52
<tr> 53 54 <td>综合办公室</td><br />
<td>65892365<br />35093269(FAX)</td> 56 </tr> 57 <tr> 58 59
<td>党群工作部</td> 60 <td>65895682</td> 61 </tr> 62
<tr> 63 <td>财务会计处</td> 64 <td>55216949</td> 65
</tr> 66 <tr> 67 <td>业务监管处</td> 68
<td>65896474</td> 69 </tr> 70 <tr> 71
<td>指挥中心</td> 72 <td>65899627<br />65899367(FAX)</td> 73 </tr> 74
<tr> 75 <td>航交所办事处</td> 76
<td>55130093<br />63233775(FAX)</td> 77 </tr> 78 <tr> 79
<td>政务中心</td> 80 <td>65355597<br />65890958(FAX)</td> 81
</tr> 82 <tr> 83 <td>上海海事局政务中心<br />浦东分中心 </td> 84
<td>50151950<br />50151952(FAX)</td> 85 </tr> 86 <tr> 87
<td>第一执法大队</td> 88 <td>65892051</td> 89 </tr> 90
<tr> 91 <td>第二执法大队</td> 92
<td>55899652<br />55895608(FAX)</td> 93 </tr> 94 <tr> 95
<td>第三、第四执法大队</td> 96 <td>65894772</td> 97 </tr> 98
<tr> 99 <td>高桥石化签证点</td>100
<td>58616257<br />58674012(FAX)</td>101 </tr>102 <tr>103
<td>第二执法大队</td>104 <td>55899652<br />55895608(FAX)</td>105
</tr>106 <tr>107 <td>第三、第四执法大队</td>108
<td>65894772</td>109 </tr>110 <tr>111
<td>高桥石化签证点</td>112
<td>58616257<br />58674012(FAX)</td>
</tr>114 </tbody>
</table>116
</body>
</html>
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für das Tabellenlayout. 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：Einige Verformungsverarbeitungen in CSS3Nächster Artikel：Einige Verformungsverarbeitungen in CSS3