sara源码之分割技术

 

 表格分割属性 列分割colspan和行分割rowspan

sara源代码中用一个表格完成整个网页布局，和三个内嵌表格，分别完成内容左侧导航，中部内容，右边图片的布局。

主表格无宽度设定，通过底部观察数据单元得出主表格共有6列，6列宽度依次为165 50 305 50 190 100%。顶部第一列td放置logo宽度为215,这一列的这一个td要占两个空间，因此设定colspan="2"。通过直接观察页面发现顶部中间的一个td被分割为两行。

当一行中的其中一个td被行分割2行后，会产生新的一行(tr)一列(td)，这一行的其余td需设定为占两行空间rowspan="2"。而顶部中间宽度为305+50因此占了两列空间，所以那个新的一列td，被分割td设定为colspan="2"。顶部右端的那个td宽度为190，即与第五列相同空间即可，最右端的td宽度为100%，表示什么意思？

当指定表格宽度时，表格为100px，共有2列，当1列td为40%另一列为60%时，则一列td为40px,另一列为60px。当td为100%宽度时，而表格无指定宽度， 使占六列空间colspan="6"的td填充了整个页面。

第三行第一列的td中宽度为165，内嵌表格ID为#navigation宽度160，是左侧导航共5个按钮，所以有5行1列，每一列有一个<a>标签。

CSS定义为#navigation td{border-bottom: 1px solid #FF9900}边框底部宽度，显示，颜色  表格5行底边框设定。

#navigation a {font:11px Arial, Helvetica, sans-serif;
 color: #FF9900;
 line-height:16px;
 letter-spacing:.1em;
 text-decoration: none;
 display:block;
 padding:8px 6px 8px 22px;}   行高设置为16px，行高即这个元素的高度，字体高度加上下各一般行距等于行高。
letter-spacing:.1em;.1em等于0.1em，是font的十分之一，11px的十分之一字符间距。显示为块级元素来设置填充，上右下左的顺序设置填充。

#navigation a:hover {
 color:#FFFFCC;
 font-weight:bold;
 background: url("mm_bullet_yellow.gif") 10px 50% no-repeat;
 }    设置鼠标悬浮时颜色变化，字体变粗，背景在left10px,top50%处，即左空白的22px的一半和上下的中间。显示3*3的小方块图像

右边的那一列的td宽50px，用宽度为50px高度为1的空白图像填充了这一td。

后面的大致技术就是这些了，td可以设置line-height在一列的情况下，因为只有一列！最后一列的td宽度都为100%，除了菜单。

这就是这个源码的所有技术了，技术不是太多，但是空白图像有时开发用得到，所以收藏了。这些技术布局个小小的网页足够了，作为入门再合适不过了。这就是表格布局的核心处了！