给大家带来用CSS制造具有亲和力的表格
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。在前一段工夫制造了CSScalendar，然后我就想用css制造一个table的模子，该模子遵守亲和力划定规矩，并且有优秀的视觉效果,
图：色彩的选择和搭配
如许做的优点是：使用表格来装载数据，不问可知是最好的，你能够很天真的为每一个单位格界说款式。上面是详细的做法
起首在photoshop计划一个效果出来，经由过程对各类色彩，小图标等的知识，做出了一个效果使人中意的最终效果来。下一步呢，裁处上面三个图片来作为题目的背景图片，假如你对色彩的掌控不是很好的话，这里给你供应一些调色工具
www.snook.ca/technical/colour_contrast/colour.html</u/>
veerle.duoh.com/comments.php?id=108_0_2_20_C8
数据布局为
<tableid="mytable"cellspacing="0"summary="Thetechnical
specificationsoftheApplePowerMacG5series">
<caption>Table1:PowerMacG5techspecs</caption>
<tr>
<thscope="col"abbr="Configurations"class="nobg">Configurations</th>
<thscope="col"abbr="Dual1.8GHz">Dual1.8GHz</th>
<thscope="col"abbr="Dual2GHz">Dual2GHz</th>
<thscope="col"abbr="Dual2.5GHz">Dual2GHz</th>
</tr>
<tr>
<thscope="row"class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
...能够看到我用了scope属性来确保这个表格在忽视觉效果的扫瞄器下展现出更好的效果，这个属性界说题目元素包括的题目内容是不是为行(scope="col")或列(scope="row")。上面是CSS的内容关于下面的题目，利用和背景来更好的辨别出他们
th{
font:bold11px"TrebuchetMS",Verdana,Arial,Helvetica,
sans-serif;
color:#6D929B;
border-right:1pxsolid#C1DAD7;
border-bottom:1pxsolid#C1DAD7;
border-top:1pxsolid#C1DAD7;
letter-spacing:2px;
text-transform:uppercase;
text-align:left;
padding:6px6px6px12px;
background:#CAE8EAurl(images/bg_header.jpg)no-repeat;
}
th.nobg{
border-top:0;
border-left:0;
border-right:1pxsolid#C1DAD7;
background:none;
}上面界说左边的题目款式
th.spec{
border-left:1pxsolid#C1DAD7;
border-top:0;
background:#fffurl(images/bullet1.gif)no-repeat;
font:bold10px"TrebuchetMS",Verdana,Arial,Helvetica,
sans-serif;
}
th.specalt{
border-left:1pxsolid#C1DAD7;
border-top:0;
background:#f5fafaurl(images/bullet2.gif)no-repeat;
font:bold10px"TrebuchetMS",Verdana,Arial,Helvetica,
sans-serif;
color:#B4AA9D;
}这里的数据来自于MAC的technicalspecificationsofeachPowerMacG5|http://www.apple.com/powermac/specs.html上去界说一般的和主要的数据内容
td{
border-right:1pxsolid#C1DAD7;
border-bottom:1pxsolid#C1DAD7;
background:#fff;
padding:6px6px6px12px;
color:#6D929B;
}
td.alt{
background:#F5FAFA;
color:#B4AA9D;
}至此，全部制造历程停止了
检察表格效果
译者的话：这个页面经我测试经由过程W3C尺度严厉型考证，并且兼容IE，Firefox，Opera等支流扫瞄器，关于大批数据，能够使用js完成行两种背景瓜代显现。
</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
页:
[1]