什么是表格?
表格,是指按所需的内容项目画成格子,分别填写文字或数字的书面材料,便于统计查看。在HTML中,表格就是一个个成行排列的单元格。例如某单位里人员名单,包含姓名、性别、联系方式、职务等信息,就连可以用一个表格来显示。

如上表所示的一个表格,就可以用HTML来制作。其中,HTML表格元素使用table标签,表格元素的所有内容都放置在table的起始标签和结束标签内,表格的行元素使用tr标签,一对tr标签(标签的起始标签和结束标签称为一对标签)表示表格的一行。表格的单元格放置在tr标签内,单元格又分为表头(表格的开头部分)和表格单元格(表格的主体部分),表头使用th标签,表格单元格使用td标签。基本表格结构如下。

下面是代码在浏览器的实现效果,从显示效果可以看出,表格为四行四列,第一行为表头,使用tr标签,tr标签内的单元格使用th标签,标签间的内容为加粗字体,起到强调的作用;第二、三、四行为表格主体,也使用tr标签,tr标签内的单元格使用td标签,标签间的内容为普通字体。

边框:
上边的显示效果虽然是出来了,但是有很明显的弊端——行列之间没有任何分割,表格结构不是十分清晰,阅读不是十分方便,甚至可能会出错。这时候,我们可以通过添加属性boder来设置边框线,border的值为边框线的宽度,单位为像素。如,我们可以给上面边框加一个宽度为1像素的边框:

实现现过如下:

表格单元格间距离(cellspacing)
单元格间距离是指表格行与行之间、列与列之间的距离,table标签的cellspacing属性用于设置表格单元格之间的距离,cellspacing属性的值是像素。例如,我们可以在前面HTML文档的table标签添加cellspacing属性,属性的值为20像素。如下图:

实现效果如下:

单元格内间距(cellpadding)
单元格内间距是指表格单元格内容与单元格边框线之间的距离。在上图表格中,单元格的内容与单元格边框线紧挨在一起,没有间距,表格加上边框线后,显得不够直观。这时我们可以在前面HTML文档的table标签添加cellpadding属性,属性的值为20像素。如下图:


但是上边很明显不是我们想要的效果,这时,我们只需要将cellspacing值设置为0即可。如下图:

这样,我们就实现了一个表格的基本内容。后边会继续美化这个表格。
网友评论