表格的合并 | 易学教程

##表格的样式和合并 ##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;
}

菜鸟教程

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

colspan
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>

来源：oschina

链接：https://my.oschina.net/u/2980350/blog/783939

标签

table边框

border

table