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. c#分页工具类，完美实现List分页

    using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Proje ...

  2. xamarin其实也是一个鸡肋

    刚刚体验了一把VS 2015,后来因为部分sdk和工具下载太慢,还是最终决定卸载.顺道了解了下xamarin studio.个人感觉Xamarin完全也是一个鸡肋,没必要过多的时间在xamarin上面 ...

  3. linux列出一个目录及其子目录下面的某种类型的文件

    linux列出一个目录及其子目录下面的某种类型的文件 作者:smarteng ⁄ 时间:2009年07月09日 ⁄ 分类: Linux命令 ⁄ 评论:0 怎么样把,一个目录及其所有的子目录下面的某种类 ...

  4. 浅用block 转

    block是一门有用的大后期学问.现在我只是列出一点基本用法. 1.快速枚举(Enumeration) 通常是和NSArray, NSDictionary, NSSet, NSIndexSet放在一起 ...

  5. Oracle存储过程update受外键约束的主键值时完整性冲突解决方式

    1.问题背景 尽管在数据库操作中我们并不提倡改动主键,可是确实在实际生活中有这种业务需求: 表A有主键KA,表B中声明了一个references A(KA)的外键约束.我们须要改动A中某条目KA的值而 ...

  6. StringUtils类常用方法介绍

    StringUtils方法包的位置:org.apache.commons.lang.StringUtils StringUtils 方法的操作对象是 java.lang.String 类型的对象,是 ...

  7. python类和实例以及__call__/__del__

    面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各自的数据可 ...

  8. HBase入门基础教程之单机模式与伪分布式模式安装（转）

    原文链接:HBase入门基础教程 在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Had ...

  9. JavaBean的应用

    1. 获取JavaBean属性信息 例1.1 在JSP页面中显示JavaBean属性信息. (1)创建名称为Produce的类,该类是封装商品对象的JavaBean,在Produce类中创建商品属性, ...

  10. Objective-C:保留计数器思想的详解(对象的保留和所有权的释放)

    对象的保留和所有权的释放: int main(int agrs,char *argv[]) { @autoreleasepool{ Person *person = [[Person alloc]in ...