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. Lua中调用C函数(lua-5.2.3)

    Lua能够调用C函数的能力将极大的提高Lua的可扩展性和可用性. 对于有些和操作系统相关的功能,或者是对效率要求较高的模块,我们全然能够通过C函数来实现,之后再通过Lua调用指定的C函数. 对于那些可 ...

  2. Swift教程之枚举语法

    import Foundation //MARK:-------枚举语法----------- //不像 C 和 Objective-C 一样.Swift 的枚举成员在被创建时不会被赋予一个默认的整数 ...

  3. MVC实现文件下载

    □ 思路 点击一个链接,把该文件的Id传递给控制器方法,遍历文件夹所有文件,根据ID找到对应文件,并返回FileResult类型. 与文件相关的Model: namespace MvcApplicat ...

  4. 2) broadcast,这是启动完毕之后,集群中的服务器开始接收客户端的连接一起工作的过程,如果客户端有修改数据的改动,那么一定会由leader广播给follower,所以称为”broadcast”.

    2) broadcast,这是启动完毕之后,集群中的服务器开始接收客户端的连接一起工作的过程,如果客户端有修改数据的改动,那么一定会由leader广播给follower,所以称为”broadcast” ...

  5. waitdialogform z

    namespace DevExpress.Utils { using DevExpress.LookAndFeel; using DevExpress.Skins; using DevExpress. ...

  6. VS2010 打包生成exe文件后 执行安装文件出现 TODO:&lt;文件说明&gt;已停止工作并已关闭

    一.VS2010 打包生成exe文件后  执行安装文件出现  TODO:<文件说明>已停止工作并已关闭 TODO: <文件说明>已停止工作 原因: 打包的时候在文件系统中建立了 ...

  7. windowsxp下的mysql集群技术

    1.准备工作 a.系统环境为:Windows Xp系统 b.mysql版本为:MySQL Server 5.5 c.mysql cluster版本为:mysql-cluster-gpl-noinsta ...

  8. iptables只允许指定ip地址访问指定端口

    首先,清除所有预设置 iptables -F#清除预设表filter中的所有规则链的规则 iptables -X#清除预设表filter中使用者自定链中的规则 其次,设置只允许指定ip地址访问指定端口 ...

  9. poj 3041 Asteroids 题解

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20686   Accepted: 11239 Descr ...

  10. @JVM垃圾收集器种类

    为什么要分代 之所以采用分代垃圾收集机制是因为不同的对象生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象,其中有些对 ...