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

淡淡的烟草味﹌ 2021-09-18 15:10 334阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

<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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/9015ee519d714e4595d095ba53bdb54d.png