文档章节

表格的合并

 金于虎
发布于 2016/11/08 17:06
字数 757
阅读 10
收藏 0

##表格的样式和合并 ##table:

##1. border-collapse 属性

为表格设置合并边框模型:
table
{
border-collapse:collapse;
}

collapse	如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

##2.border属性 指定CSS表格边框,使用border属性。 下面的例子指定了一个表格的Th和TD元素的黑色边框:

实例
table, th, td
{
border: 1px solid black;
}

##3.表格宽度和高度 Width和height属性定义表格的宽度和高度。 下面的例子是设置100%的宽度,50像素的th元素的高度的表格:

实例
table 
{
width:100%;
}
th
{
height:50px;

##4. 表格文字对齐 表格中的文本对齐和垂直对齐属性。 text-align属性设置水平对齐方式,像左,右,或中心: 实例

td
{
text-align:right;
}

##5. 表格填充 如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:

实例
td
{
padding:15px;
}

##6. 表格颜色 下面的例子指定边框的颜色,和th元素的文本和背景颜色:

实例
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

菜鸟教程

#表格合并 表格合并必须写在元素上

  1. colspan

  2. rowspan

[删除空行插件] http://blog.sina.com.cn/s/blog_671c54fe0102vja7.html https://www.noniu.com/qianduan/sublime-text-kongbaihang.html https://www.noniu.com/qianduan/sublime-text-kongbaihang.html

输入图片说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    
    <style type="text/css">
    *{
    	margin: 0px;
    	padding: 0px;
    }
    table{
    	 border-collapse:collapse;
    	border: 1px solid #ccc;
    	width: 100%;
    	text-align: center;
    }
    td{
    	border: 1px solid #000;
    
    }
    </style>
    <table>	
    <caption>建设项目基本情况一览表</caption>
    <tr>
    	<td >项目名称</td>
    	<td colspan="3">鸿翔药业中西药生产配送中心建设项目竣工环保验收监测表</td>
    </tr>
     <tr>
    	<td>建设地点</td>
    	<td colspan="3">昆明市经开区大冲片区工业园区2-5#地块</td>
    </tr>
       <tr>
    	<td rowspan="4">建设单位</td>
    	<td rowspan="4">云南鸿翔一心堂药业(集团)股份有限公司	</td>
    	<td rowspan="4">联系方式</td>
    	
    		 <tr><td>联系人:王工</td></tr>
    		<tr><td>电话:0871-68181924</td></tr>
    		<tr><td>邮箱:1104038816@qq.com</td></tr>
      </tr>
    </table>
</body>
</html>

在合并三列时: 写法1:

<tr>
    	<td rowspan="4">建设单位</td>
    	<td rowspan="4">云南鸿翔一心堂药业(集团)股份有限公司	</td>
    	<td rowspan="4">联系方式</td>
    	
    		 <tr><td>联系人:王工</td></tr>
    		<tr><td>电话:0871-68181924</td></tr>
    		<tr><td>邮箱:1104038816@qq.com</td></tr>
      </tr>

写法2:

   <tr>
    	<td rowspan="3">建设单位</td>
    	<td rowspan="3">云南鸿翔一心堂药业(集团)股份有限公司	</td>
    	<td rowspan="3">联系方式</td>

    	<td>
    		   联系人:王工
    		<tr><td>电话:0871-68181924</td></tr>
    		<tr><td>邮箱:1104038816@qq.com</td></tr>

    	</td>
      </tr>

demo

<html>
<body>

<table width="100%" border="1">
 
  <tr>
    <td rowspan="3">$50</td>
    <td rowspan="3">$50</td>
    <td rowspan="3">$50</td>
    <td>电话:13999999999</td>
  </tr>


  <tr>
    <td>邮箱:16889999</td>
  </tr>

  <tr>
    <td>邮箱:16889999</td>
  </tr>

</table>

</body>
</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: css表格美化
下一篇: 3.项目结构
粉丝 1
博文 105
码字总数 42695
作品 0
曲靖
私信 提问
如何解决ABBYY FineReader中表格检测不到问题

ABBYY FineReader 12是一款OCR文字识别软件,使用ABBYY FineReader识别带有表格的文档时,表格区域对以表格形式排列的表格或文本片断进行标记,但有时会出现程序自动检测表格失败的现象,需使...

ABBYY
2015/10/16
398
0
Javascript实现把网页中table的内容导入到excel中的几种方法

Javascript实现把网页中table的内容导入到excel中的几种方法 一、 直接拷贝整个表格到EXCEL中 二、 通过遍历表格,给EXCEL中相应的单元格赋值。 三、 把表格中的内容提取出来,利用IE的另存为...

光石头
2010/09/22
0
0
为Web页中的Table对象创建一个映射表

HTML对象中的TABLE是我们常用的网页元素,在DHTML编程中,我们可以通过它的rows和cells方法方便的访问表格对象里面的每一个单元格,而且表格对象(table)的每个单元行(tr)和每个单元格(td)分别...

唐玄奘
2017/12/11
0
0
重新认识visibility

原先只是记住了display:none不点位,visibility:hidden要占位显示。 今天看到table中,列样式支持四个css的表格样式之外的属性:border width background visibility。 言外之意就是就像给表...

noonoo
2016/09/10
28
0
extjs5单元格合并

用extjs5做表格,遇到需要合并单元格的情况,在网上搜索了很多资料,并没有切实可行明确的办法。根据网上的方案做了一些调试,并没能成功。在前端debug的时候,我发现extjs的grid产生的html源...

秦拿希
2015/12/12
857
2

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部