话不多说，直入主题
目标效果
-
无序列表法
首先一种比较歪的方法，利用 ul 和 li 构建。
其中最大的问题就是如果每个 li 标签设置 border，
两个 border 黏在一起就会出现加粗的效果。
// CSS重点
<div class="box">
<p>XXXX项目报价</p>
<div class="table"> // 父元素设置font-size: 0;
<ul> // 取消内部inline-block子元素间距
<li>公司</li> // ul 设置左、上的边框，
</ul> // li 设置右、底的边框，
......... // 并且 li 变成inline-block，变成行内元素。
<ul> // 这样凑起来就是一个表格。
<li>fsd</li>
</ul>
</div>
</div>
-
正经使用 <table>（表格）标签
首先应该知道这些东西:
| 标签 | 解释 |
|---|---|
| <caption> | 表格标题标签，类似于<p> |
| <tr> | table row，表格的行 |
| <th> | table head，表格头，表格最上一行（自带加粗） |
| <td> | table detail?，正常表格格子 |
| 属性（attr） | |
| border | 表格特有的边框 |
| cellspacing | 格子之间的间隙，默认为1px |
结构如此，和无序列表的方法优点相似。
<div class="box">
<table>
<caption>xxxx成绩单</caption>
<tr>
<th>姓名</th>
</tr>
............
<tr>
<td>xxx</td>
</tr>
</table>
</div>
以下是给 table 添加了不同 attr 之后的效果
属性效果
以上右下角就比较接近我们想要的效果，但是！
- 这个边框感觉非常奇怪吖
- 写内联属性似乎不太好啊
那么，下面将这些属性转化成 CSS 的形式
首先是 border ，这个简单，
将表格的格子标签添加上想要的边框效果。如:
border: 1px solid #000
就会得到黑色一像素的边框，
但是，这时看到的格子是分开的！像这样
大家都很生疏嘛
那接下来就是去掉间距，也就是从 cellspacing 下手，
这时就要用到
border-collapse: collapse;属性就是将边框折叠，
注意！这个属性只能设置在 table 标签上， 就像那些 attr 一样，
所以无序列表法不能用这个属性解决相同事情。
这样事情就办妥拉。
为了节省篇幅，以上只提到一些关键属性，
想要得到效果，还是需要设置其它的一些属性的。
Wait me back
