这节来讲一下如何用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规范规定了很多特殊含义字符，称为转义字符。
比如：
< 用 < 来代替
> 用 > 来代替
空格 用 来代替
还有很多，大家自己去查看“HTML手册”。
说到这里，大家就明白了，输入多个空格，也只显示为一个空格
要在网页上显示一个空格，不能在html代码中直接输入空格，而要输入 字符来代替。
再次修改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行：数据库。
往期教程因为教程是系列教程，前后关联性非常强，请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。
,
