稻米鼠 · 更新于 2018-11-28 11:00:43

第九章 来吧,表哥(表格)!

如果本章演示效果无法正常展示,请至主站查看 http://coffee.zji.me/

可惜我不是表妹……

不搞笑了,表格这一章其实很简单,只是很热闹,不过好在现在我也不怎么用表格,大家看懂就好,当然要是做淘宝的朋友们,我还是建议你认真学习一下,毕竟在淘宝上表格用的还是很多的(用作布局)。

是的,用表格可以布局的,或者说排版,随你怎么叫,反正都是一回事,不过现在几乎被淘汰了,大家都用 DIV + CSS 布局去了,有人说你这个叫法不科学!反正科学不科学的我不是很清楚,我就知道现在招聘前端都煞有介事的写上:熟练掌握 DIV + CSS 布局;熟练掌握 Dreamweaver …… 说得好像我们这些不用 Dreamweaver 的多么山寨,多么不专业似的。

不吐槽那些应该吐槽的了,然后强调一下:写代码一定要把代码缩进写整齐!!!重要的事情三个感叹号哦~然后让大家理解一下什么是清晰的代码缩进,下面代码中我把每一个 tab 缩进换成一个波折号:

<!DOCTYPE html>
<html lang="zh">
—— <head>
—— —— <meta charset="UTF-8">
—— —— <title>这里是标题</title>
—— </head>
—— <body>
—— —— <a href="http://coffee.zji.me/">
—— —— —— <img src="http://coffee.zji.me/imgs/bridge.jpg" />
—— —— </a>
—— </body>
</html>

看,这样各个标签间的包含关系和层次是不是一目了然了?这个一定要理解,也要做到;这个习惯是对于任何阅读你代码的人的起码的尊重,乱成一团麻的代码没人爱看,而且你自己阅读起来也很吃力。最后用当初我的老师的一句话来结束这个话题:

代码没有清晰缩进的作业别给我看,我看不懂!

好了,开始我们今天的话题,表格,刚才为什么要强调缩进呢?因为表格的标签层次比较多,要是不清晰缩进的话,一个表格没写完你就哭昏在加班的午夜了。

首先,表格的标签是 <table></table>,但是这还不够,我们还要知道行的标签是 <tr></tr>,和单元格的标签是 <td></td>。然后怎么把他们合理的放在一起呢?——按着大小个嵌套:

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

效果如下:

第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列

需要解释的有两点:第一、border 这个属性是指边框的粗细,我设置了 1 ,这样就能看到边框了,因为默认是 0 ,那样就不容易看懂效果了。第二、每一行中的单元格数量是相同的,合并单元格的效果在下面讲;

单元格有两个跨越属性:colspan(跨列)、rowspan(跨行),是指当前单元格占用几列,或者占用几行,我们来举例:

<table border="1">
    <tr>
        <td colspan="2">第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

这个单元格要占两列的位置,效果如下:

第一行第一列 第一行第二列
第二行第一列 第二行第二列 第二行第三列

然后再看跨行:

<table border="1">
    <tr>
        <td rowspan="2">第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

第一个单元格要占用两行,所以效果如下:

第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列

好复杂是不是?我也这么觉得,所以一般我都是用可视化编辑器(比如 Dreamweaver)来生成表格,极少自己手写,上边几个属性也是现查了抄过来的。大家看看做个了解,将来看到能看懂就很好了。

当然很多做淘宝的朋友会问了,虽然说看懂就行,但是我还常见到一个标签你没说啊——<tbody></tbody>

这里也说一下仅作了解:其实有三个标签<thead></thead> 这是表头,诶,这你听懂了,那么下面就好理解了,<tbody></tbody> 是表格的主体,那么 <tfoot></tfoot>就是表格的注脚(我也不知道怎么取名字,知道我什么意思就好)他们的嵌套顺序是酱紫的:

<table>
    <thead>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

有的时候我在想,我为什么要讲表格?后来想想,淘宝设计师还是用的到的,那么只好咬牙坚持了。讲表格要做噩梦的,求安慰啊~~

本章学习卡片:卡片 9


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me