代码教程——第九章 来吧,表哥(表格)!

可惜我不是表妹……

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

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

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

<!DOCTYPE html>

<html lang=“zh”>

—— <head>

—— —— <meta charset=“UTF-8”>

—— —— <title>这里是标题</title>

—— </head>

—— <body>

—— —— <a href=“http://www.ek58.com/”>

—— —— —— <img src=“http://www.ek58.com/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>

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容