【HTML】table 标签的 colgroup 子标签

本文介绍了使用HTML中的colgroup和col标签来精确控制表格中各列宽度的方法。这是一种简便且有效的表格布局技巧,有助于提高网页的排版质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

...
<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 才发现有这个标签,惭愧

修改代码如下:

 

ExpandedBlockStart.gif代码
...
<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>
...

 

 

转载于:https://www.cnblogs.com/csharpstyle/archive/2010/05/06/1728569.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值