您的位置：首页 > Web前端 > HTML

html简单跨行跨列表格制作

2016-12-22 00:00 411 查看
主要属性：

跨行（rowspan=“3”）双引号内的数值表示跨几行数值为几；

跨列（colspan=“3”）双引号内的数值表示跨几列数值为几；

一个带标题 (caption) 的表格；

使用 Cell padding 来创建单元格内容与其边框之间的空白；

使用 Cell spacing 增加单元格之间的距离；

表格代码：

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

表格效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航