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. springMVC 前台向后台传数组

    前台: $(function() {//点击播放按钮执行的事件 $("#button").click(function(e) { alert("kaishi chuanz ...

  2. 深入浅出VC++串口编程之基于Win32 API

    1.API描述 在WIN32 API中,串口使用文件方式进行访问,其操作的API基本上与文件操作的API一致. 打开串口 Win32 中用于打开串口的API 函数为CreateFile,其原型为: H ...

  3. MVC日期格式化,后台使用Newtonsoft.Json序列化日期,前端使用”f”格式化日期

    MVC控制器中,经常使用Newtonsoft.Json把对象序列化成json字符串传递到前端视图.当对象中有DateTime类型的属性时,前后台如何处理才能把DateTime类型转换成想要的格式呢? ...

  4. java hashcode()和equal()方法比较

    通常equals,toString,hashCode,在应用中都会被复写,建立具体对象的特有的内容. 之所以有hashCode方法,是因为在批量的对象比较中,hashCode要比equals来得快,很 ...

  5. Starting nginx: nginx: [emerg] bind() to 0.0.0.0:8088 failed (13: Permission denied) nginx 启动失败

     Starting nginx: nginx: [emerg] bind() to 0.0.0.0:8088 failed (13: Permission denied)     nginx 启动失败 ...

  6. 解决TextView排版混乱或者自动换行的问题

    其实在TextView中遇到排版自动换行而导致混乱不堪的情况是非常常见的,而且导致这种问题产生的原因就是英文和中文混合输入,半角字符和全角字符混合在一起了.一般情况下,我们输入的数字.字母以及英文标点 ...

  7. 【docker】docker部署spring boot项目在服务器上

    IDE:idea 工具:docker spring boot:2.0.1 ======================================== 简单记录一下流程,以供参考: 第一步:首先得 ...

  8. NGUI 3.5教程（一）安装NGUI 3.5.8

    写在前面: 网上找的NGUI教程,都是基于2.x版本号的.为了能配合教程学着做,我也是下载了各种NGUI 2.x版本号.可是在导入的时候,或多或少都报错(我用的Unity 的版本号是4.3.2).无奈 ...

  9. pgm转jpg

    clc;clear all;for i=1:40for j=1:10image=imread(strcat('N:\FACE\orl_faces\s',...int2str(i),'\',int2st ...

  10. Facebook 工程师是如何高效工作的？

    编者按:Facebook 的工程师有哪些高效工作的经验呢?软件工程师访谈了多位 Facebook 的高产工程师,总结了他们的共同经验以及晋级之路,供各位参考. 成为高效开发者这件事你可以通过经验.书本 ...