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

HTML table 基础

*

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

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

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

HTML 有一种方法可以定义整列数据的样式信息:就是

元素。

  <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> td>
            <th>Month>
            <th>Tuesth>
            <th>Wedth>
            <th>Thursth>
            <th>Frith>
            <th>Satth>
            <th>Sunth>
        tr>
        <tr>
            <th>1st periodth>
            <td>Englishtd>
            <td> td>
            <td> td>
            <td>Germantd>
            <td>Dutchtd>
            <td> td>
            <td> td>
        tr>
        <tr>
            <th>2nd periodth>
            <td>Englishtd>
            <td>Englishtd>
            <td> td>
            <td>Germantd>
            <td>Dutchtd>
            <td> td>
            <td> td>
        tr>
        <tr>
            <th>3rd periodth>
            <td> td>
            <td>Germantd>
            <td> td>
            <td>Germantd>
            <td>Dutchtd>
            <td> td>
            <td> td>
        tr>
        <tr>
            <th>4th periodth>
            <td> td>
            <td>Englishtd>
            <td> td>
            <td>Englishtd>
            <td>Dutchtd>
            <td> td>
            <td> td>
        tr>
    table>
    
    ```
效果
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)

你可能感兴趣的:(HTML,笔记,效果,html,前端)