关于制作表格

话不多说，直入主题

目标效果

• 无序列表法

首先一种比较歪的方法，利用 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