用html制作四行四列的表格,HTML表格元素

什么是表格？

表格，是指按所需的内容项目画成格子，分别填写文字或数字的书面材料，便于统计查看。在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像素。如下图：

单元格间距20像素

实现效果如下：

单元格内间距(cellpadding)

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

单元格内边距为20像素

实现效果

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

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