table

<body>

    <table id="table1">
      <caption>hello table</caption>
        <thead>
            <tr>
                <!-- 跨列 -->
                <th colspan="2">The table header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- 跨行 -->
                <td rowspan="2">The table body</td>
                <td>with two columns</td>
            </tr>
            <tr>
                <td>with two columns</td>
                
            </tr>
        </tbody>
    </table>


</body>
<style>
    #table1 {
        height: 800px;
        width: 800px;
        border: 1px solid green;
        border-collapse: collapse;
        border-spacing: 20px;
        empty-cells: hide;
        /* border-collapse属性是用来设置表格边框是否合并，
        它有三个值其中
        separate表示分离边框，
        collapse表示合并边框，
        inherit 表示从父级那继承属性
        
        border-spacing：指的是相邻单元格的边框间的距离
        empty-cells：指的是是否显示表格中的空单元格
        separate值是表示边框会被分离不会合并为一个边框，
        而collapse值表示的是边框会被合并成单一的边框，
        而且会忽略border-spacing 和 empty-cells 属性
        
         */
    }

    td,
    th {
        border: 1px solid rgb(170, 19, 90);

    }
table

推荐阅读
