关于table布局的实例详解
1、先看有间距的布局效果：
2、少说多做，直接看代码（代码中有注释）
1 <!DOCTYPE html> 2 <html lang="zh">
<head> 5 <meta charset="UTF-8" /> 6
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7
<title>有间距的表格布局</title> 8 <style type="text/css">
* { 10 margin: 0; 11 padding: 0; 12 }
table { 15 width: 500px; 16 margin-top: 30px; 17
border-collapse: separate; 18 /*关键设置：间距5px*/ 19
border-spacing: 5px; 20 /*均匀分布效果*/ 21
table-layout: fixed; 22 } 23 24
table th { 25 height: 44px; 26
font-size: 18px; 27 color: #fff; 28
text-align: center; 29 background-color: #1262a2; 30 }
table td { 33 height: 44px; 34
font-size: 16px; 35
color: #000; 36 text-align: center; 37
background-color: #e5e5e5; 38 } 39 </style> 40 </head> 41 42 <body>
<table> 44 45 <thead> 46 <tr> 47 <th>部门</th>
<th>联系方式</th> 49 </tr> 50 </thead> 51 <tbody> 52
<tr> 53 54 <td>综合办公室</td><br />
<td>65892365<br />35093269(FAX)</td> 56 </tr> 57 <tr> 58 59
<td>党群工作部</td> 60 <td>65895682</td> 61 </tr> 62
<tr> 63 <td>财务会计处</td> 64 <td>55216949</td> 65
</tr> 66 <tr> 67 <td>业务监管处</td> 68
<td>65896474</td> 69 </tr> 70 <tr> 71
<td>指挥中心</td> 72 <td>65899627<br />65899367(FAX)</td> 73 </tr> 74
<tr> 75 <td>航交所办事处</td> 76
<td>55130093<br />63233775(FAX)</td> 77 </tr> 78 <tr> 79
<td>政务中心</td> 80 <td>65355597<br />65890958(FAX)</td> 81
</tr> 82 <tr> 83 <td>上海海事局政务中心<br />浦东分中心 </td> 84
<td>50151950<br />50151952(FAX)</td> 85 </tr> 86 <tr> 87
<td>第一执法大队</td> 88 <td>65892051</td> 89 </tr> 90
<tr> 91 <td>第二执法大队</td> 92
<td>55899652<br />55895608(FAX)</td> 93 </tr> 94 <tr> 95
<td>第三、第四执法大队</td> 96 <td>65894772</td> 97 </tr> 98
<tr> 99 <td>高桥石化签证点</td>100
<td>58616257<br />58674012(FAX)</td>101 </tr>102 <tr>103
<td>第二执法大队</td>104 <td>55899652<br />55895608(FAX)</td>105
</tr>106 <tr>107 <td>第三、第四执法大队</td>108
<td>65894772</td>109 </tr>110 <tr>111
<td>高桥石化签证点</td>112
<td>58616257<br />58674012(FAX)</td>
</tr>114 </tbody>
</table>116
</body>
</html>
以上是关于table布局的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PPT表格中插入的图片调整格式的操作步骤
Mar 26, 2024 pm 04:16 PM
1、新建一个PPT文件，命名为【PPT技巧】，作为示例。2、双击【PPT技巧】，打开PPT文件。3、插入两行两列的表格，作为示例。4、在表格的边框上双击，上方工具栏出现【设计】的选项。5、点击【底纹】的选项，点击【图片】。6、点击【图片】，弹出以图片为背景的填充选项对话框。7、在目录中找到要插入的托，点击确定即可插入图片。8、在表格框上右击，弹出设置的对话框。9、点击【设置单元格格式】，勾选【将图片平铺为底纹】。10、设置【居中】【镜像】等自己需要的功能，点击确定即可。注意：默认为图片填充在表格
wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤
Mar 27, 2024 pm 07:30 PM
1、打开工作表，找到【开始】-【条件格式】按钮。2、点击列选择，选中将添加条件格式的列。3、单击【条件格式】按钮，弹出选项菜单国。4、选择【突出显示条件规则】-【介于】。5、填写规则：20，24，深填充色深绿色文本。6、确定后，所选列中数据按照设定对相应数字文字、单元框加色处理。7、对于没有冲突的条件规则，可以重复添加，但对于冲突规则wps则会以最后添加的规则代替之前建立的条件规则。8、重复添加【介于】规则20-24和【小于】20后的单元列。9、如需改变规则，刚可以清除规则后重新设定规则。
关于销量预测如何制作表格
Mar 20, 2024 pm 03:06 PM
能够熟练的制作表格不仅是会计、人事以及财务的必备技能，对于很多销售人员来说，学会制作表格也是很重要的。因为与销量有关的数据都是很多并且很复杂的，而且不是简单的记在文档当中，就可以说明问题的。为了能够让更多的销售人员熟练运用Excel来制作表格，小编接下来要介绍的就是有关于销量预测的表格制作问题，有需要的朋友不要错过哦！1，打开【销量预测及目标制定】，xlsm，来分析每个表格所存放的数据。2，新建【空白工作表】，选择【单元格】，输入【标签信息】。向下【拖拽】，【填充】月份。输入【其它】数据，点击【
如何使用 JavaScript 实现表格列宽拖拽调整功能？
Oct 21, 2023 am 08:14 AM
如何使用JavaScript实现表格列宽拖拽调整功能？随着Web技术的发展，越来越多的数据以表格的形式展示在网页上。然而，有时候表格的列宽并不能满足我们的需求，可能会出现内容溢出或者宽度不足的情况。为了解决这个问题，我们可以使用JavaScript实现表格的列宽拖拽调整功能，使用户可以根据需求自由调整列宽。实现表格列宽拖拽调整功能，需要以下三个主
你知道Word表格怎么求和吗
Mar 21, 2024 pm 01:10 PM
有时候，我们在Word表格中会经常遇到计数的问题；一般遇到这样的问题，大部分同学都回把Word表格复制到Excel中来计算；还有一部分同学会默默地拿起计算器去算。那有没有快速的方法来计算呢？当然有啊，其实在Word中也是可以计算求和的。那么，你知道该怎么操作吗？今天，我们就来一起来看一下吧！废话不多说，有需要的小伙伴赶紧收藏起来吧！步骤详情：1、首先，我们打开电脑上的Word软件，打开需要处理的文档。（如图所示）2、接着，我们将光标定位在求和数值所在的单元格上（如图所示）；然后，我们点击【菜单栏
word怎么把表格横竖调换
Mar 20, 2024 am 09:31 AM
Word软件是我们必不可少并需要经常使用的，前面学习了Word软件编辑表格，但是，如果不小心，将表格的横竖方向编辑反了，又不想浪费时间重新制作，是否可以将表格的横竖调换呢？答案当然是肯定，接下来，就由小编为大家详细的介绍word怎么把表格横竖调换的操作方法，，让我们一起来学习吧。首先，我们需要将下面的Word表格进行行列互换。要做到这一点，我们需要先全部选中表格，然后右键点击并选择复制功能。第2步，选择复制以后我们把word最小化，然后打开一个Excel表格，点击右键，选择粘贴，把它粘贴到Exc
如何使用 JavaScript 实现表格分页功能？
Oct 20, 2023 pm 06:19 PM
如何使用JavaScript实现表格分页功能？随着互联网的发展，越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下，需要将数据进行分页展示，以提升用户体验。本文将介绍如何使用JavaScript实现表格分页功能，并提供具体的代码示例。一、HTML结构首先，我们需要准备一个HTML结构来承载表格和分页按钮。我们可以使用<tab
Word表格自动编号或序号怎样插入
Mar 20, 2024 am 09:30 AM
我们在制作表格时，第一想到的是会用Excel软件制作表格，但是你知道吗，其实Word软件制作表格也是非常方便的，有时我们在Word软件里进行表格制作的时候，需要输入序号或编号，如果是手动一个一个地输，那就非常地麻烦了，其实word软件里有一个操作能自动插入编号或序号，那么下面就和小编一起来学习Word表格自动编号或序号怎么插入的方法吧。1.首先建立一个Word文档，插入表格。 2.选中需要插入自动序号或编号的列或单元格。 3.点击“开始”—“编号”。 4.选择其中的一种样式的编号。 5.
