当前位置:网站首页 / 建站知识 / 网站制作知识

网站制作中表格标签的使用

来源:未知时间:2015-04-04 16:33点击:

在网站制作中,表格是个很常用的东西(以前),在早期的网页中,表格可不单单是用来展示数据那么简单,它是只用来做网页布局的框架使用。表格代码:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

其中,table 标签圈定表格,然后 tr 标签圈定行,td 则标记行中的单元格。所以,上述代码是一个表格中有两行,每行三个单元格(三列)。本来想展示一下效果,但是看看还是算了,上述代码什么都没显示出来……(要明白没有显示可不代表没有东西哦)。

我们还是继续做点什么吧,给他们调价一些添加一些属性和内容再看看。当然,如下代码大家最好还是复制到编辑器里代码高亮了再看。

<table border="1">
<tr height="120">
<td width="200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, harum, consectetur libero itaque perferendis <td width="200">Placeat, nulla animi vel repellendus omnis velit odio delectus accusantium optio vitae voluptate error neque culpa <td width="200">Eius, necessitatibus similique recusandae fugiat? Consequuntur, accusantium, vitae, totam, hic officiis beatae </tr>
<tr height="120">
<td width="200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, itaque nulla fuga quibusdam reiciendis officiis <td width="200">Odio, saepe, earum, quam impedit ullam minus quasi fuga iusto omnis quisquam tempore libero adipisci doloremque <td width="200">Odit, sit, ratione, laudantium eveniet iusto cumque ad reiciendis enim inventore molestias itaque magnam animi. </tr>
</table>

上述代码我做了什么?

给表格(table)边框(border)设定了宽度(1);
给行(tr)设置了高度(height);
给单元格(或者说是列,td)设置了宽度(width);

在每个单元格里写了一些文字,文字没有意义,就是用来展示效果。然后他的效果是:

网站制作表格标签效果展示

这样的表格跟我们对他的预期差不多了。当然不不设置表格边框宽度,或者设置为 0,那么我们则只能看到其中的内容,却看不到表格边框,这就起到了布局的作用,通过设置行和单元格的宽高来控制内容出现的位置。那么我们再举一个例子,代码如下:

<table>
<tr height="120">
<td width="200"></td>
<td width="200">我在你上面,欧也~</td>
<td width="200"></td>
</tr>
<tr height="120">
<td width="200"></td>
<td width="200">看看我在哪里?</td>
<td width="200"></td>
</tr>
</table>

这个代码应该很好理解了,我不解释,咱们看看效果。

网站制作表格标签布局效果

用表格布局就是如此,当然还可以嵌套,比如在一个单元格里再放入一个表格,然后……乱到不想看。这里只是介绍一种历史中的东西,我们将来要学的是 div+css 布局,要比表格好的多。
然后如果一个有两行,第一行三列,第二行两列怎么写?像下边这样?

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

那是不对滴~不过想了想我们为什么搞把事情搞那么复杂呢?以后学了 div+css 大部分事情你都不会喜欢去用表格的。真到需要的时候复杂的表格还是用 Dreamweaver 之类可视化编辑器去搞的好,反正我是不回去手写复杂的表格的。所以,嘿嘿,关于表格我们就讲到这里,想深入研究就用 DW 去试试,然后看看他生成的代码好了。