table表格单元格横向和属性合并代码实例-白红宇

利用单元格可以能够有效的组织数据，如果能够灵活熟练的利用，则对于组织清晰明了的数据有着重要意义，下面是一段表格布局的代码实例，它实现了横向和纵向的单元格合并效果。

代码如下:

                            
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
meta
name
=
"author"
content
=
""
/>
<
title
>蚂蚁部落</
title
>
<
style
>
html,body{ 
  
padding:10px;
  
margin:0px;
  
width:100%;
  
height:100%;
  
overflow:hidden;
}
table{ 
  
border:1px solid #ccc;
}
td{ 
  
width:100px;
  
height:100px;
  
text-align:center;
  
font-family:arial;
  
border:1px solid #aaa;
  
vertical-align:center;
}
</
style
>
</
head
>
<
body
>
<
table
border
=
"1"
cellspacing
=
"0"
cellpadding
=
"10"
>
  
<
tr
>
    
<
td
></
td
>
    
<
td
rowspan
=
'2'
></
td
>
    
<
td
></
td
>
  
</
tr
>
  
<
tr
>
    
<
td
></
td
>
    
<
td
></
td
>
  
</
tr
>
  
<
tr
>
    
<
td
></
td
>
    
<
td
colspan
=
"2"
></
td
>
  
</
tr
>
</
table
>
</
body
>
</
html
>
         
       

关键是利用了rowspan和colspan属性。

原文发布时间为：2017-2-13

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：