table详细用法

注意：table元素上的很多属性都已经被废弃了，建议使用css方式替代。
表格的box-sizing默认值为border-box

例如：
在这里插入图片描述

border-collapse属性

border-collapse CSS 属性是用来决定表格的边框是分开（separate）默认值的还是合并（collapse）的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse

border-spacing属性

border-spacing 属性指定相邻单元格边框之间的距离（只适用于边框分离模式）。

注意：border-spacing 在 border-collapse 设置为 collapse 时将无效。

colgroup标签

定义了表格中的一组列
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup

使用说明：

在这里插入图片描述

caption标签

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为

的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

综合例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            table {
                border-collapse: collapse; 
                /* border-collapse: collapse; 等价于 border-collapse: separate; border-spacing: 0; */
                /* border-spacing: 10px; collapse时无效 */
                /* border: 2px solid rgb(140 140 140); */
            }

            caption {
                caption-side: bottom;
                padding: 10px;
            }

            th,
            td {
                border: 1px solid rgb(160 160 160);
                padding: 8px 6px;
                text-align: center;
            }
            /* tr {
                border: 1px solid red;
            } */

            .weekdays {
                background-color: #d7d9f2;
            }

            .weekend {
                background-color: #ffe8d4;
            }
        </style>
    </head>
    <body>
        <table width="400">
            <caption>
                个人每周活动
            </caption>
            <colgroup span="5" class="weekdays"></colgroup>
            <colgroup span="2" class="weekend"></colgroup>
            <thead>
                <tr>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                    <th>周日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>打扫房间</td>
                    <td>足球训练</td>
                    <td>舞蹈课</td>
                    <td>历史课</td>
                    <td>买饮料</td>
                    <td>自习</td>
                    <td>自由时间</td>
                </tr>
                <tr>
                    <td>瑜伽</td>
                    <td>棋类俱乐部</td>
                    <td>见朋友</td>
                    <td>体操</td>
                    <td>生日派对</td>
                    <td>钓鱼之旅</td>
                    <td>自由时间</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>