【HTML】table 标签的 colgroup 子标签

 

...
<table>
  <tr>
    <td>
    <td>
    <td>
  </tr>
  <tr>
    <td>
    <td>
    <td>
  </tr>
  <tr>
    <td>
    <td>
    <td>
  </tr>
...

 

上述 HTML 实现了一个3x3的表格，如何指定每列的宽度，方法有很多：

• 为每一个 td 标签都指定宽度
• 为每一个 td 标签都指定相应的 css 样式
• 只为第一行的每一个 td 标签指定宽度
• 指定 thead 中每一个 th 的宽度

最近又发现了一种，即使用 colgroup 子标签。用了这么多年 table 才发现有这个标签，惭愧

修改代码如下：

 

...
<table>
  <colgroup>
    <col width="100px"/>
    <col width="200px"/>
    <col width="300px"/>
  </colgroup>
  <tbody>
    <tr>
      <td>
      <td>
      <td>
    </tr>
    <tr>
      <td>
      <td>
      <td>
    </tr>
    <tr>
      <td>
      <td>
      <td>
    </tr>
  <tbody>
</table>
...