html5之table表格标签的用法与总结(标签内联样式和css样式的对比)

 

<table >
            <tr>
                <td>姓名</td>
                <td>代号</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>麒麟</td>
                <td>kirin</td>
                <td>28</td>
            </tr>
            <tr>
                <td>麒麟</td>
                <td>kirin</td>
                <td>28</td>
            </tr>
            <tr>
                <td>麒麟</td>
                <td>kirin</td>
                <td>28</td>
            </tr>
        </table>

// 用法一：完全用CSS样式控制table表格！
// 用法二：table表格标签自带有border属性和cellspacing及其他属性,也可以控制表格！


table {
  width: 300px;
  height: 300px;

  // 注：必须设置border,border-collapse和border-spacing才会生效！
  border: 1px solid #ff0000;
  // border是设置为整体(collapse)还是设置为单独的(separate)
  border-collapse: separate;
  // 当border-collapse设置属性为separate时,border-spacing才会生效！
  // 单独border之间的空隙距离！
  border-spacing: 5px;
}

td {
  text-align: center;

  // 注：必须设置border,border-collapse和border-spacing才会生效！
  border: 1px solid #ff0000;
  // border是设置为整体(collapse)还是设置为单独的(separate)
  border-collapse: separate;
  // 当border-collapse设置属性为separate时,border-spacing才会生效！
  // 单独border之间的空隙距离！
  border-spacing: 5px;
}