【html_table基础】使用colgroup col 设置列共同样式

本文链接：https://blog.csdn.net/Sonnenlicht77/article/details/125222121

HTML table 基础

*<table>表格是由行和列组成的结构化数据集 (表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。

td 在表格中，最小的内容容器是单元格，是通过元素创建的 (‘td’ 代表 ‘table data’).
tr 元素 (‘tr’ 代表 ‘table row’) 表格的行元素，包裹单元格元素
每一行都需要一个额外的元素来包装，每个单元格的内容都应该写在中。
th 元素表格的标题表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型*

为表格中的列提供共同的样式

HTML 有一种方法可以定义整列数据的样式信息：就是 <col>和<colgroup> 元素。

  <colgroup>
    <col>
    <col style="">
    ...
    ...
  </colgroup>

   <table>
        <colgroup>
            <col>
            <col>
            <col style="background-color:#97db9a;">
            <col style="width:42px;">
            <col style="background-color: #97db9a;">
            <col style="background-color:#dcc48e;border:4px solid #c1437a;">
            <col style="width:42px;">
            <col style="width:42px;">
        </colgroup>
        <tr>
            <td>&nbsp;</td>
            <th>Mon</th>
            <th>Tues</th>
            <th>Wed</th>
            <th>Thurs</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
        <tr>
            <th>1st period</th>
            <td>English</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>German</td>
            <td>Dutch</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>2nd period</th>
            <td>English</td>
            <td>English</td>
            <td>&nbsp;</td>
            <td>German</td>
            <td>Dutch</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>3rd period</th>
            <td>&nbsp;</td>
            <td>German</td>
            <td>&nbsp;</td>
            <td>German</td>
            <td>Dutch</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>4th period</th>
            <td>&nbsp;</td>
            <td>English</td>
            <td>&nbsp;</td>
            <td>English</td>
            <td>Dutch</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

    <style>
        table {
            border-collapse: collapse;
            border: 2px solid rgb(200, 200, 200);
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        td,
        th {
            border: 1px solid rgb(190, 190, 190);
            padding: 10px 20px;
        }

        td {
            text-align: center;
        }

        caption {
            padding: 10px;
        }
    </style>
    ```
效果
chrome
![在这里插入图片描述](https://img-blog.csdnimg.cn/27d8215cb3bd46198b22355d82f50439.png#pic_center)
firefox
![在这里插入图片描述](https://img-blog.csdnimg.cn/59ba94b28dc54b1fb21d21279d2b5c72.png#pic_center)
手机微信
![在这里插入图片描述](https://img-blog.csdnimg.cn/471d3310aa5b42a1b0a351ffff530c28.png#pic_center)