打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
XHTML教程——表格

XHTML教程——表格

表格是XHTML中处境尴尬的一个标签。我们需要了解,表格应该被用来展示数据,而不是用于网页布局。

本教程前后联系比较紧密,建议您从第一节读起。

关于表格

在CSS流行之前,table被广泛应用于定位。在XHTML中,table不被推荐用来定位,W3C希望CSS可以取代<table>在定位方面的地位。不过事实上由于利用CSS布局常常需要大量的手写代码工作(常用的网页设计软件如Dreamweaver并不能完美支持div的显示),<table>仍被许多网站用语首页布局,例如Google的More products页面就利用了table来定位。 不过我个人推荐您开始使用CSS来定位网页,因为这是Web发展的方向。

表格标签<table>

在XHTML中,创建表格的标签是<table>,书写代码时,我们要先用<tr>标签将表格分成一行一行,再用<td>标签把每行分成一格一格。完全手写代码创建table是十分困难和低效的,而在网页制作软件中制作表格就如同Word一样简单,只需要选择行列之类的简单属性即可。但是我们可能会遇到自动做出的表格不符合要求,而需要在代码模式调整的可能,因此我们还是要大概了解XHTML表格标签的具体写法。

表格的边框(border)属性

<table>标签可以有border属性。如果不设置border属性的值,在默认情况下,浏览器将不显示表格的边框。

表格练习

我们来建立一个四行两列的标签,代码如下:

<table border="1"> <tr> <td>一个格子</td> <td>一个格子</td> </tr> <tr> <td>一个格子</td> <td>一个格子</td> </tr> <tr> <td>一个格子</td> <td>一个格子</td> </tr> <tr> <td>一个格子</td> <td>一个格子</td> </tr> </table> 

显示结果如下:注意上面的代码,一共有4对<tr>,对应着下面的4个行。而没个<tr>(行)又有两个<td>单元格。于是就成了一个4行2列的表格。

一个格子一个格子
一个格子一个格子
一个格子一个格子
一个格子一个格子

这样的表格用来列出数据之类的信息足够了,但是用来定位的表格通常要复杂一些。再次强调我们不推荐用table来定位,所以这里仅仅简单地介绍了<table>。

如果要使用表格显示很多数据,可能还需要加入caption(标题),thead、tbody等等,这里也不做介绍了,有兴趣可以看一看XHTML教程补充——复杂的表格

进入下一节:XHTML教程——框架结构

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
表格边框合并
重新发现HTML表格 | CSS | 前端观察
网站制作规范
HMTL 随笔(1)
『音画教程』HTML初中级教程
电脑技术
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服