文档章节

表格的合并

 金于虎
发布于 2016/11/08 17:06
字数 757
阅读 9
收藏 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>

© 著作权归作者所有

共有 人打赏支持
粉丝 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
重新认识visibility

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

noonoo
2016/09/10
28
0
为Web页中的Table对象创建一个映射表

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

唐玄奘
2017/12/11
0
0
extjs5单元格合并

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

秦拿希
2015/12/12
857
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

困扰当前数据中心管理的三大难题

导读 当企业发展到一定程度,或者之前的机房不能满足现在的数据中心使用时,企业会对数据中心进行迁移。那么在数据中心进行迁移的时候会遇到哪些风险呢?针对这些风险我们应该做出怎样的措施来...

问题终结者
17分钟前
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
33分钟前
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
41分钟前
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
48分钟前
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
56分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部