有间距的表格布局 table布局

1、先看有间距的布局效果：

2、少说多做，直接看代码（代码中有注释）

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3
  4     <head>
  5         <meta charset="UTF-8" />
  6         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7         <title>有间距的表格布局</title>
  8         <style type="text/css">
  9             * { 10                 margin: 0;
 11                 padding: 0;
 12             }
 13
 14             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             }
 31
 32             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>
 43         <table>
 44
 45             <thead>
 46                 <tr>
 47                     <th>部门</th>
 48                     <th>联系方式</th>
 49                 </tr>
 50             </thead>
 51             <tbody>
 52                 <tr>
 53
 54                     <td>综合办公室</td><br />
 55                     <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>
113                 </tr>
114             </tbody>
115         </table>
116     </body>
117
118 </html>

有间距的表格布局 table布局相关推荐

HTML学习之路-03HTML表格、table布局
目录一.HTML表格 a.基本知识 1.table标签 2.tr标签 3.td和th标签 b.练习 1.代码 2.运行 3.分析 4.感悟 c.案例 1. 效果: 2.分析注意:以上tr正确写法应 ...
html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
Table布局和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
Android表格布局(Table Layout)
Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...
html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...
html表格左右布局,css table布局大法，解决你大部分居中、多列等高、左右布局的问题...
1.table的一些特性与表现形式虽然table布局因为它的一些非语义化.布局代码冗余,以及不好维护改版等缺点被赶出了布局界.但是在css不给力时期,table布局也曾风靡一时,就算现在看来tabl ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
css表格布局_布局秘密武器＃1：CSS表格属性
css表格布局 Right now, Flexbox is arguably THE hot new thing for layout building. Flexbox's almost mirac ...
EasyTable.js，令html的table布局变得非常简单！
过年之前由于工作的需要,我花了一周的时间开发了一个纯js的网页插件,EasyTable.js.顾名思义,这个插件就是用来处理html里面的table的各种情况的.很多网站不喜欢使用table布局,因为 ...
firefox ie table 布局兼容性问题
2019独角兽企业重金招聘Python工程师标准>>> 最近在做一个表格控件,使用的布局方式是table布局,因为需求上要求表格的文本不能离边框太近,需要有5px的间隔,于是我很自然 ...

有间距的表格布局 table布局

有间距的表格布局 table布局相关推荐

最新文章

热门文章