Ausführliche Erläuterung von Beispielen für das Tabellenlayout

零下一度
Freigeben: 2017-06-28 09:22:34
Original
1951 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage