如何用table标签显示网页表格（如何用table标签显示网页表格）

这节来讲一下如何用table标签来做表格。

上节课的课后练习

1.将标题行的宽度变成100%，紧贴浏览器右侧。

修改代码的css的 bigtitle：

页面刷新：

2.将工作经历当中的职位职责技术这3行以及负责技术这2行分别用div包起来，并设置padding，上边距为15px，左边距20px，去掉上面多余的<br/>

修改css代码：

刷新页面：

发现一个规律，css文件代码越变越长，而html代码反而越变越短。这就是css的意义之所在：内容和样式进行分离。

3.在工作经验下面增加一块内容，标题是“技术经验”，内容是：

java 8年

C# 3年

html 10年

CSS 5年

Android 5年

iOS 5年

修改html代码，增加内容，无需修改css文件了，除非需要改变现实样式，再次体会内容和样式分离的好处。

刷新页面：

内容加好了，但是又发现一个问题，技术经验部分的技术点和年数这两列，由于文字长短不一，没有将年数对齐，不太好看。

各位看官可能发现了，学哥总是不满意，总是有问题，哈哈，学哥就是这个习惯，这样就可以持续不断的改进啊。

具体怎么解决呢，下面来用2个办法试试看。

HTML转义字符

先来尝试一下在技术点和年数之间插入空格字符来对齐，按照最长的Android算7个字符，相应地其它行补足需要的空格。

java后面补3个空格，c#后面补5个空格，依次类推：

刷新页面看看：

发现网页并没有按照预想的多的空格显示，这是咋回事呢？

这是因为HTML有一些规定，一些字符在HTML中拥有特殊的含义。

比如，最明显的<左尖括号，是用于定义HTML标签的开始，如果要显示一个内容就是<左尖括号，那么就不能直接写<，否则浏览器搞不清楚，你是想定义一个HTML标签呢，还是想输出一个符号<，针对这种情况，HTML规范规定了很多特殊含义字符，称为转义字符。

比如：

< 用 &lt; 来代替

> 用 &gt; 来代替

空格 用 &nbsp; 来代替

还有很多，大家自己去查看“HTML手册”。

说到这里，大家就明白了，输入多个空格，也只显示为一个空格

要在网页上显示一个空格，不能在html代码中直接输入空格，而要输入&nbsp;字符来代替。

再次修改html代码试试看，同时也试一下>符号：

刷新页面看看：

发现转义符号起作用了，但是好像还是没有对齐，苦恼啊，看来要想新的办法了。

table、tr和td标签

可以在HTML中使用table标签来创建表格。

table标签要配合tr标签和td标签来一起完成表格。

table标签表示要显示一个表格。

tr标签表示要显示表格的一行。

td标签表示要显示表格的某一行的某一格。

因此，标签的嵌套关系必须是这样的：

<table>

<tr><td>行1列1</td><td>行1列2</td></tr>

<tr><td>行2列1</td><td>行2列2</td></tr>

</table>

这样的表格就是一个2行2列总共4个格子的表格。

因此，要显示上面技术经验里面的6个技术点，就可以用table来实现。

每个技术是一行tr，技术点是一个td，年数是一个td，去掉所有的空格转义字符和换行标签<br/>：

刷新页面显示：

对齐达到效果了，但是有几个问题：2列之间间距太小，行和行之间也间距太小，字体好像变大了，最好表格的格子线显示出来。

设置列宽

可以通过设置td的属性width来控制列的宽度，将第一行第一列的td的width设置为100px：

刷新页面看看：

设置格子框线

可以看到宽度增加了，但是没有框线看起来不太舒服，给每一个td增加一个框线，采用前面学过的border属性来设置边框。

同时顺便将属性width改为用css的class来定义。

随时注意将内容和样式进行分离。

修改css文件，增加针对td的样式，2列宽度不一样，设置2个样式：

修改html文件，给每个td都加上class属性：

刷新页面看看：

发现一个问题，格子和格子之间有间距，如果觉得不好看可以去掉，学哥觉得不好看，所以修改css代码：

可以看到增加了针对table标签的css样式定义。border-spacing的作用就是设置td之间的间距。

注意这个属性只能针对table标签，因为table标签里面包含了td，所以可以设置。假如把属性设置到td标签上则没有效果。

刷新页面：

格子靠拢了，但是发现2个格子如果各有一条边线，则相邻2条线并在一起有点粗，如何才能变为1条线呢。

这就需要单独控制每一个边框了。

可以针对每个td只设置左边框和上边框，这样修改：

刷新页面看看：

可以看到最下面的一条线和右边还缺少线，可以通过在table上设置右边框和下边框来达到目的：

刷新页面看看，终于有点样子了：

设置内边距和字体

看看表格，学哥还有点不满意，一个文字大了点，再一个文字和表格的间距太近了，修改td文字大小和内边距：

再次刷新，学哥终于满意了。

课后练习

1.表格当中增加4行内容：Windows 20年，Linux 10年，Oracle 10年，MySQL 12年。

2.表格增加一列，放在第一列，列里面的内容分别是：1-6行：编程语言，7-8行：操作系统，9-10行：数据库。

往期教程

因为教程是系列教程，前后关联性非常强，请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。

,