发新话题
打印

【设计】HTML帖子制作教程

表格组合
◇ 黑马
    表格组合不是一个轻而易举的技术,所以,我们极少见到论坛各种精美的帖子会用到它,但表格组合技术是一个很有趣的技术,掌握它具有一定的挑战性,所以,黑马愿意花一节的篇幅专门讲它,如果你觉得不需要,可以跳过这一节。
    表格组合更多的用于布局,当然,也有少数情形需要用到它。本节不想探讨什么时候用到表格组合,只从实现手段方面进行讨论。
    先讲上下排列的表格组合。先看例子:
表一
表二

    要顺利地实现N张表格的纵向组合,至少有三种方法:一是,令参与排列的表格都居中(即在<table>里加入align=center),上例就是;二是,不定义表格的对齐属性,即<table>里没有align属性,这样给出的N张表格代码,它们都是上下排列的,表格的自身位置全是左对齐(但若定义了align=left,情形不是这样,大家可以在FP或DW里试试),例子请看表三和表四;三是把参与排列的表格放在一张表格里,这张作为容器的外表宽度不限,且里面的表格也不设置align属性——大家都看得出来,其实,它只是第二种实现方法的扩展,其目的是为了让参与排列的表格随心所欲地设置水平对齐,换句话说,外表的作用是为了实现自定义的对齐方式,示例为表五和表六。第三种方法虽然源于第二种,但使用它是个绝好的主意,这个,在使用表格排版过程中,相信大家会慢慢体会到的。
表三
表四
↓我叫表五表六右对齐 表五
表六



    下面看水平排列的表格。
    表格的水平排列更需要精确地计算参与排列的表格的宽度,它们的宽度的总和不能超过其所属容器所能装载的宽度,表格和其他元素的混排情形下更应该严格考虑。
    一个好的习惯是,还是用一张表格来规范并列组合的表格,这张表格,最好宽度设置为100%,然后将里面要并列组合的表格通通设置为左对齐(但注意:它们的宽度总和不能超过可显示的宽度)。试看以下两个示例:
外表宽度为100% align=left
width=150
align=left
width=150
align=left
width=150


外表居中,宽度为450 align=left
width=150
align=center
width=150
align=right
width=150


    本节从某个角度分析了表格的组合问题,它是一个主要用于排版的技术,要求计算精确,并不十分适用于论坛。但如果你是一个不怕挑战的人,那么,本节所讨论的内容或许对你来说还远远不够,好在聪明的你会自己去尝试,本节若能起到抛砖引玉的作用就已经达到目的了。谢谢阅读!
发新话题
最近访问的版块