注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

Table小结  

2014-06-19 10:03:27|  分类: HTML小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
对于Table标签相信大家对tr和td已经很熟悉了,在这里咱们来总结一下table中容易忘的属性。
1.cellspacing  单元格之间的间距
在table的默认样式中单元格之间会出现间距,就像这样。
Table小结 - 淡淡De影痕 - 淡淡De影痕的博客
 想要去除单元格之间的间距只要为table设置cellspacing="0"就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table{
margin-bottom: 50px;
}
table tr td,table tr,table{
border:1px solid #000;
}
table tr td{
width: 200px;
}
</style>
</head>
<body>
<table cellspacing="0">

<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>


Table小结 - 淡淡De影痕 - 淡淡De影痕的博客

2.cellpadding  单元格边沿与其内容之间的空白
这个属性也很简单咱们看个例子就明白了。先看看未设置cellpadding时的table样式。
Table小结 - 淡淡De影痕 - 淡淡De影痕的博客
 之后是cellpadding="10"的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table{
margin-bottom: 50px;
}
table tr td,table tr,table{
border:1px solid #000;
}
table tr td{
width: 200px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="10">

<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>


Table小结 - 淡淡De影痕 - 淡淡De影痕的博客
我们可以看到td中的边距变大了。
 
3.colspan 单元格跨列合并

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table{
margin-bottom: 50px;
}
table tr td,table tr,table{
border:1px solid #000;
}
table tr td{
width: 200px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="3">5</td>
<td>6</td>
</tr>
</table>
</body>
</html>


 Table小结 - 淡淡De影痕 - 淡淡De影痕的博客
 
4.rowspan  单元格跨行合并

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table{
margin-bottom: 50px;
}
table tr td,table tr,table{
border:1px solid #000;
}
table tr td{
width: 200px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="10">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>
</html>


Table小结 - 淡淡De影痕 - 淡淡De影痕的博客
 
欢迎大家交流指正~  淡淡De影痕
  评论这张
 
阅读(94)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018