html簡單跨行跨列表格製做

時間 2019-12-01

標籤 html 簡單跨行列表製做欄目 HTML 简体版

原文原文鏈接

主要屬性：html

跨行（rowspan=「3」）雙引號內的數值表示跨幾行數值爲幾；
跨列（colspan=「3」）雙引號內的數值表示跨幾列數值爲幾；
一個帶標題 (caption) 的表格；
使用 Cell padding 來建立單元格內容與其邊框之間的空白；
使用 Cell spacing 增長單元格之間的距離；

表格代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
	<style>


	table{
		width: 50%;
	}
	</style>
</head>
<body>
<table border="1" cellpadding="10px" cellspacing="0">
<caption>建設項目基本狀況一覽表</caption>
<tr>
	<td>項目名稱</td>
	<td colspan="3">xx藥業中西藥生產配送中心建設項目竣工環保驗收監測表</td>
</tr>
<tr>
	<td>建設地點</td>
	<td colspan="3">昆明市經開區大沖片區工業園區2-5#地塊</td>
</tr>
<tr>
	<td rowspan="3">建設單位</td>
	<td rowspan="3">xx藥業（集團）股份有限公司</td>
	<td rowspan="3">聯繫方式</td>
	<td>聯繫人：王工</td>
</tr>
<tr>
	<td>電話：0871-68181924</td>
</tr>
<tr>
<td>郵箱：1104038816@qq.com</td>
</tr>
<tr>
	<td rowspan="3">竣工驗收單位</td>
	<td rowspan="3">昆明市環境監測中心</td>
	<td rowspan="3">聯繫方式</td>
	<td >聯繫人：王工</td>
</tr>
<tr>
	<td>電話：0871-68241008</td>
</tr>
<tr>
<td>郵箱：273987850@qq.com</td>
</tr>
<tr>
	<td>建設地點</td>
	<td colspan="3">3條中藥飲片生產線（普通中藥飲片1條、 特殊（毒性）中藥飲片1條、直接 口服中藥飲片1條）、藥品配送中心、行政辦公樓、1條保健食品生產線（保健食品產品種類主要包括膠囊、軟膠囊、片劑、 顆粒劑、代用茶和調味料幾種）以及相關生活配套設施及環保設施。</td>
</tr>
</table>	
</body>
</html>

表格效果圖： code