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

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

 <!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <title>有间距的表格布局</title>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             table {

                 width: 500px;

                 margin-top: 30px;

                 border-collapse: separate;

                 /*关键设置：间距5px*/

                 border-spacing: 5px;

                 /*均匀分布效果*/

                 table-layout: fixed;

             }

             table th {

                 height: 44px;

                 font-size: 18px;

                 color: #fff;

                 text-align: center;

                 background-color: #1262a2;

             }

             table td {

                 height: 44px;

                 font-size: 16px;

                 color: #000;

                 text-align: center;

                 background-color: #e5e5e5;

             }

         </style>

     </head>

     <body>

         <table>

             <thead>

                 <tr>

                     <th>部门</th>

                     <th>联系方式</th>

                 </tr>

             </thead>

             <tbody>

                 <tr>

                     <td>综合办公室</td><br />

                     <td>65892365<br />35093269(FAX)</td>

                 </tr>

                 <tr>

                     <td>党群工作部</td>

                     <td>65895682</td>

                 </tr>

                 <tr>

                     <td>财务会计处</td>

                     <td>55216949</td>

                 </tr>

                 <tr>

                     <td>业务监管处</td>

                     <td>65896474</td>

                 </tr>

                 <tr>

                     <td>指挥中心</td>

                     <td>65899627<br />65899367(FAX)</td>

                 </tr>

                 <tr>

                     <td>航交所办事处</td>

                     <td>55130093<br />63233775(FAX)</td>

                 </tr>

                 <tr>

                     <td>政务中心</td>

                     <td>65355597<br />65890958(FAX)</td>

                 </tr>

                 <tr>

                     <td>上海海事局政务中心<br />浦东分中心 </td>

                     <td>50151950<br />50151952(FAX)</td>

                 </tr>

                 <tr>

                     <td>第一执法大队</td>

                     <td>65892051</td>

                 </tr>

                 <tr>

                     <td>第二执法大队</td>

                     <td>55899652<br />55895608(FAX)</td>

                 </tr>

                 <tr>

                     <td>第三、第四执法大队</td>

                     <td>65894772</td>

                 </tr>

                 <tr>

                     <td>高桥石化签证点</td>

                     <td>58616257<br />58674012(FAX)</td>

                 </tr>

                 <tr>

                     <td>第二执法大队</td>

                     <td>55899652<br />55895608(FAX)</td>

                 </tr>

                 <tr>

                     <td>第三、第四执法大队</td>

                     <td>65894772</td>

                 </tr>

                 <tr>

                     <td>高桥石化签证点</td>

                     <td>58616257<br />58674012(FAX)</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

有间距的表格布局 table布局的更多相关文章

  1. 网页布局——table布局

    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...

  2. ExtJS 布局-Table布局（Table layout）

    更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...

  3. Android表格布局(Table Layout)

    Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...

  4. html5: table表格与页面布局整理

    传统表格布局之table标签排版总结:   默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-coll ...

  5. html页面布局之table布局：

    table布局: table来做整体页面的布局,布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border.cellpadding.cellspacing全部 ...

  6. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  7. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  8. 日历控件table布局

    作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...

  9. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

随机推荐

  1. 使用Device IO Control 讀寫 USB Mass Storage

    http://www.ezblog.idv.tw/Download/USBStorage.rar 這是一個不透過檔案系統,去讀寫USB Mass Storage 任何位置(包含FAT)的方式 首先需安 ...

  2. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  3. Android系列教程(十六) 在电脑上装Android

    [软件准备] 1.LiveAndroid v0.3 liveCD [点击下载] 2.VirtualBox 3.0.4 [点击下载]       [图片安装流程]       主要安装思路为:通过vir ...

  4. Unity中关于Device Filter的选择问题

    引言 目前工作的Unity版本是5.4.1f,发布Android版本.apk的时候,对包体的大小有些疑问,就上网查了下资料,发现Build Settings——Player Settings——Oth ...

  5. [翻译] Working with NSURLSession: AFNetworking 2.0

    Working with NSURLSession: AFNetworking 2.0   简单翻译,有很多错误,看官无法理解处请英文原文对照. http://code.tutsplus.com/tu ...

  6. DWZ SSH2 菜单树--使用Struts2 标签（iterator/set/if 组合使用）

    最近在研究DWZ框架,然后要写一个菜单树,后台我使用了SSH2,然后想把菜单通过后台传过来的对象展示出来. 但是,发现应用样式的时候,如果子菜单在子循环中为空的话,会多出一对空标签“<ul> ...

  7. 《精通Ext JS 》

    <精通Ext JS > 基本信息 原书名:Mastering Ext JS 作者: (巴西)Loiane Groner 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ...

  8. strstr实现

    // strstr.c查找完全匹配的子字符串 #include<stdio.h> #include<string.h> char *my_strstr(const char * ...

  9. CVPR 2015 papers

    CVPR2015 Papers震撼来袭! CVPR 2015的文章可以下载了,如果链接无法下载,可以在Google上通过搜索paper名字下载(友情提示:可以使用filetype:pdf命令). Go ...

  10. 伪元素 :Before 和 :After的学习

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...