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


上节课的课后练习


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

修改代码的css的 bigtitle：


页面刷新：


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

修改css代码：


修改html代码：


刷新页面：


发现一个规律，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代码中直接输入空格，而要输入 字符来代替
再次修改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行：数据库。