二维码
搜索 ×

HTML 表格并列组

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 表格并列组

该元素用于设置特定样式 表的列。<colgroup>

HTML 表格并列组

如果要设置表前两列的样式，请使用 和 元素。<colgroup>``<col>

该元素应用作列的容器 规格。<colgroup>

每个组都指定一个元素。<col>

该属性指定获取样式的列数。span

该属性指定要为列提供样式。style

注意： [colgroup 的合法 CSS 属性]选择非常有限。

1
2
3
4
5
6
7
8
9
10
<table>  
  <colgroup>  
    <col span="2" style="background-color: #D6EEEE">  
  </colgroup>  
  <tr>  
    <th>MON</th>  
    <th>TUE</th>  
    <th>WED</th>  
    <th>THU</th>  
...

注意： 标记必须是 元素的子元素，应放置 在任何其他表元素（如 、 等）之前，但在元素之后，如果 目前。<colgroup>``<table>``<thead>``<tr>``<td>``<caption>

合法的 CSS 属性

允许在 colgroup 中使用的 CSS 属性选择非常有限：

[width]属性 属性
属性 属性

[visibility]``[background]``[border]

所有其他 CSS 属性对表没有影响。

多个 col 元素

如果要设置更多具有不同样式的列的样式，请在 ：<col>``<colgroup>

1
2
3
4
5
6
7
8
9
10
11
<table>  
  <colgroup>  
    <col span="2" style="background-color: #D6EEEE">  
    <col span="3" style="background-color: pink">  
  </colgroup>  
  <tr>  
    <th>MON</th>  
    <th>TUE</th>  
    <th>WED</th>  
    <th>THU</th>  
...

空并列

如果需要帮助， 要设置表格中间列的样式，请插入一个“空”元素（没有 styles） 之前的列：<col>

1
2
3
4
5
6
7
8
9
10
11
<table>  
  <colgroup>  
    <col span="3">  
    <col span="2" style="background-color: pink">  
  </colgroup>  
  <tr>  
    <th>MON</th>  
    <th>TUE</th>  
    <th>WED</th>  
    <th>THU</th>  
...

隐藏列

您可以使用以下属性隐藏列：visibility: collapse

1
2
3
4
5
6
7
8
9
10
11
<table>  
  <colgroup>  
    <col span="2">  
    <col span="3" style="visibility: collapse">  
  </colgroup>  
  <tr>  
    <th>MON</th>  
    <th>TUE</th>  
    <th>WED</th>  
    <th>THU</th>  
...

推荐教程