1. First look at the layout effect with spacing:
2. Talk less and do more, just look at the code (there are comments in the 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>
The above is the detailed content of Detailed explanation of examples of table layout. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
