表格的合併

時間 2019-11-05

標籤表格合併简体版

原文原文鏈接

##表格的樣式和合並 ##table：css

##1. border-collapse 屬性html

爲表格設置合併邊框模型：

table
{
border-collapse:collapse;
}

collapse	若是可能，邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性
separate	默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性
inherit	規定應該從父元素繼承 border-collapse 屬性的值

##2.border屬性指定CSS表格邊框，使用border屬性。下面的例子指定了一個表格的Th和TD元素的黑色邊框：chrome

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

##3.表格寬度和高度 Width和height屬性定義表格的寬度和高度。下面的例子是設置100％的寬度，50像素的th元素的高度的表格：sublime-text

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

##4. 表格文字對齊表格中的文本對齊和垂直對齊屬性。 text-align屬性設置水平對齊方式，像左，右，或中心：實例ui

td
{
text-align:right;
}

##5. 表格填充若是在表的內容中控制空格之間的邊框，應使用td和th元素的填充屬性：spa

實例
td
{
padding:15px;
}

##6. 表格顏色下面的例子指定邊框的顏色，和th元素的文本和背景顏色：插件

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

菜鳥教程code

#表格合併表格合併必須寫在元素上htm

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。