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. Android开发资料

    Android      [开发环境及工具] [控件使用及示例源码] [热更新] [开源组件] [系统内核] [错误及调试]   来自  http://www.howcode.cn ,内容不错,学习中 ...

  2. MAIN/autoslb.py · 林語/autoslb - 码云 - 开源中国

    MAIN/autoslb.py · 林語/autoslb - 码云 - 开源中国 CloudXNS

  3. Solution for sending Whatsapp via sqlite "INSERT INTO"

    I use something similar but thought I'd mention this 'bug' that can happen:when you INSERT '%wa_mess ...

  4. Android native层动态库注射

    1.简单介绍 本文解说在Android native层.root权限下.注射动态库到目标进程,从而hook目标进程中动态库的函数的实现方式. 文中的源代码所有来源于网络.我仅仅是略微加以整理. 环境: ...

  5. Qt移动应用开发（三）：使用精灵图片实现帧动画

    Qt移动应用开发(三):使用精灵图片实现帧动画 上一篇博文讲到了Qt Quick对于动画的一般支持.动画的形式多样,配合不同的插值函数,能够差点儿实现全部想要的动画效果,而对于游戏的一些特殊的效果比方 ...

  6. MVC二级联动使用$.getJSON方法

    本篇使用jQuery的$.getJSON()实现二级联动.   □ View Models 1: namespace MvcApplication1.Models 2: { 3: public cla ...

  7. python笔记29-队列Queue

    前言 Python的Queue模块提供一种适用于多线程编程的FIFO实现.它可用于在生产者(producer)和消费者(consumer)之间线程安全(thread-safe)地传递消息或其它数据,因 ...

  8. docker Redis的主从配置

    redis是k-v型nosql数据库,支持字符串(string).列表(list).集合(set).散列(hash).有序集合(zset:形如member:score的散列集合,其中member为成员 ...

  9. 启明星Exchange/outlook预定会议室终端显示解决方案

    启明星会议室预定系统(Exchange2007及其以上版本,)终端调用说明 (一)技术原理 系统采用三级刷新方式,以尽可能减少对服务器的访问压力. (1) exe程序,每隔5分钟访问Exchange, ...

  10. python垃圾回收杂谈

    当创建对象时Python立即向操作系统请求内存.每当对象的引用数减为0,Python垃圾回收器立刻挺身而出,立即将其释放,把内存还给操作系统.在Python中,每个对象都保存了一个称为引用计数的整数值 ...