欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » (X)HTML初级教程 » 正文

HTML教程-使用表格布局网站

创建时间:2012年05月21日 11:20  阅读次数:(5836)
分享到:
网站中有文本和图片了,但如何让这些网站元素按着规则整齐的排序起来了呢?这就是我们这章要讲解的表格。

在网站中定义表格,使用表格来规划网站的布局。
虽然现在很多网站都不推荐用表格来布局了,但我一直认为表格一个容易操控和理解的布局方式,极易上手。

表格,很简单了,从我们日常生活中经常用到的表格来理解,表格一定是由"行"与"列"来组成的。那么在Html中,用来表示“表格”,什么来表示“行”,什么来表示“列”呢?分别如下:
table:表示一个表格的开始
tr:表示表格内一行的开始
td:表示表格内一列的开始

这里为什么说是“某某的开始”呢?这是因为<table>,<tr>,<td>三个标签分别需要</table>,</tr>,</td>来闭合它们。

好吧,我们来看一个实例,从实例理解起来就更简单了。
<table border="1" cellpadding="3" cellspacing="3">
<tr>
<td>
第一行的第一列
</td>
<td>
第一行的第二列
</td>
</tr>
<tr>
<td>
第二行的第一列
</td>
<td>
第二行的第二列
</td>
</tr>
</table>

好吧,你应该看明白了,上面的示例执行后效果如下:
第一行的第一列 第一行的第二列
第二行的第一列 第二行的第二列

实际上,我们将表格中每一个小格子称为一个单元格。

在table,tr与td中包括了许多的属性,这是不一一列举了,大家可以从百度中搜索。本章只讲几个在table中用的非常多的属性。
border:设置table的边框,如果设置border="0",那么该表格的边框为0,此时,虽然表格里的内容还是按着表格排列,但浏览者从表面上是看不出来这是一个table的。数字越大,边框越粗。
width:设置表格的长度
heigth:设置表格的高度
cellpadding:设置单元格中内容离单元格边框的距离,值越大,距离越大。
cellspacing:设置单元格之间的间距,值越大,间距越大。

好了,你应该会在网站在创建一个表格了,这其中还有很多的知识,需要你在实际中慢慢熟悉与了解。

对了,再告诉大家如果设置表头。我们都知道,在大多数据表格中应该有一个表头,标识这一列值的意义。那么我们要如何定义一个表头呢?正确的做法是使用th标签(但很多网站没有这样定义,还是使用td标签,因为给用户的感觉,这两者一样的。但从代码的角度来讲,我们应该使用th)

使用的实例如下:
<table border="1" cellpadding="3" cellspacing="3">
<tr>
<th>
这是第一列的表头
</th>
<th>
这是第二列的表头
</th>
</tr>
<tr>
<td>
第一行的第一列
</td>
<td>
第一行的第二列
</td>
</tr>
<tr>
<td>
第二行的第一列
</td>
<td>
第二行的第二列
</td>
</tr>
</table>

注意:在默认情况下,th中的内容是加粗居中的,因为它是表头嘛 :) 运行效果如下:
这是第一列的表头 这是第二列的表头
第一行的第一列 第一行的第二列
第二行的第一列 第二行的第二列
,合理使用div+css布局,可以减少我们的代码量,让网页的加载
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 60+9=? 的结果(结果是:69)
结  果: