简约纯粹的CSS表格设计方案案例


许多CSS喜好者讨厌HTML报表,特别是在是在制作表格的情况下,尽管如今早已是XHTML+CSS的时代,但表格的设计方案大多数仍在选用table来合理布局。那 么,有木有更强的应用纯词义化XHTML+CSS设计方案表格方式呢?今日要我们一起來试着这类更合乎词义化的方式来替代Table嵌套循环的表格原素吧!

在这里里我想说,其实不是要彻底革除table的应用,它有它的词义化合理布局功效,特别是在是在储存数据信息的情况下。我还在大多数数状况下能应用纯CSS设计制作表格, 可是,因为我很喜爱报表,要是大家能在恰当的地区应用恰当的原素便可以了,不必太过追求完美说白了的DIV+CSS。立即应用table要比应用CSS来 仿真模拟 (display:table;)报表更便捷迅速速。下边风暴彬彬将共享一种应用纯CSS替代HTML报表原素设计方案表格的方式。

您能够免费下载源码并应用在自身的网站新项目中。

第一步:HTML编码 ,随后复制并黏贴下列编码到

 


   
        Sign-up form
        This is the basic look of my form without table


       Name
         Add your name
     
     
      Email
           Add a valid address
     
     
      Password
           Min. size 6 chars
     
     
     Sign-up
       
     

根据上边的编码,你是不是可以看出它的视觉效果款式呢?下边就是我们的CSS表格构造图例:

我来每一个input原素应用了标识,并应用标识包括简洁明了的叙述。全部的label和input原素全是用了CSS的float特性,数值left。

第二步:CSS编码 拷贝并黏贴下列编码到你网页页面中的

内。(还可以独立储存到CSS文档中) body{
   font-family: Lucida Grande , Lucida Sans Unicode , Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* My Form */
.myform{
   margin:0 auto;
   width:400px;
   padding:14px;
}
/* stylized */
#stylized{
   border:solid 2px #b7ddf2;
   background:#ebf4fb;
}
#stylized h1 {
   font-size:14px;
   font-weight:bold;
   margin-bottom:8px;
}
#stylized p{
   font-size:11px;
   color:#666666;
   margin-bottom:20px;
   border-bottom:solid 1px #b7ddf2;
   padding-bottom:10px;
}
#stylized label{
   display:block;
   font-weight:bold;
   text-align:right;
   width:140px;
   float:left;
}
#stylized .small{
   color:#666666;
   display:block;
   font-size:11px;
   font-weight:normal;
   text-align:right;
   width:140px;
}
#stylized input{
   float:left;
   font-size:12px;
   padding:4px 2px;
   border:solid 1px #aacfe4;
   width:200px;
   margin:2px 0 20px 10px;
}
#stylized button{
   clear:both;
   margin-left:150px;
   width:125px;
   height:31px;
   background:#666666 url(img/button.png) no-repeat;
   text-align:center;
   line-height:31px;
   color:#FFFFFF;
   font-size:11px;
   font-weight:bold;
}

之上只是是表格合理布局的一种方法,您还可以依照您的爱好来改动源码并举新应用它。
假如您针对CSS表格合理布局有其他不一样的或更强的提议得话,热烈欢迎在此留有您珍贵的评价.

 

全文:
汉语翻译:

 


· 10个十分非常好的CSS方法 在这里里,恰当的应用 CSS 的方法,可让你没用改动 HTML 就可以得.... · 款式与构造分离出来的网页页面设计方案早已变成流行 大伙儿都了解,现如今的网页页面基本全是由 DIV +CSS来写的,而像之前的.... · DIV+CSS网页页面合理布局方法案例19:用css hack对于IE的提升 一些情况下,你必须对IE访问器的bug界定一些非常的标准,这儿有太.... · 《十天学好web规范div+css》10:div+css网页页面规范合理布局案例二 (接好一篇,这节实例教程文本较多,较为枯燥乏味,假如前边专业知识学习培训坚固.... · 《十天学好web规范(div+css)》第八天:CSS表格设计方案 今日大家刚开始学习培训《十天学好web规范(div+css)》的css表格设计方案,....