马黑黑老师 colgroup ：表格列组元素,音画教程,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 音画教程 › 马黑黑老师 colgroup ：表格列组元素

醉美水芙蓉 发表于 6 天前

马黑黑老师 colgroup ：表格列组元素

<style>
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre code { padding: 0; background: none; }
</style>

<div class="artBox">
<p>表格列组元素 <code><colgroup></code> 用于定义 <code><table></code> 表格的一组列，即设置一个或多个列为一组以便通过 CSS 设定该组所有列的样式。换言之， <code>colgroup</code> 是 HTML 表格中的一个元素，用于对表格的列进行分组和样式化，其主要功能是为一组列设置统一的样式或属性，从而简化表格的样式管理。</p>
<h2>一、colgroup语法结构：</h2>
<div class="codebox">
<colgroup>
<col class="col-idx">          
<col span="2" class="col-main">
<col class="col-comment">    
</colgroup>


.col-idx { background: silver; }
.col-main { background: tan; }
.col-comment { background: pink; }
</div>
<p>【注】子元素 <code><col></code> 为自闭合标签，它可以拥有一个 <code>span</code> 属性，用于设定“合并”列，缺省此属性时其值为 1，即 col 是个单列，当 span 值为 n，表示该 col 标签将 n 个表格自然列“合并”在一起进行定义。这里的“合并”不是真的合并单元格，而是归拢 n 个自然列为一个子组。</p>
<p>下面给出一个可以预览的应用实例：</p>
<div class="codebox" data-prev="1"><style>
table { width: 800px; border-collapse: collapse; margin: 30px; }
caption { font-size: 2em; font-weight: bold; padding-bottom: 10px; }
th { background: #3498db; color: white; padding: 12px; text-align: left; font-weight: bold; text-align: center; }
td { padding: 8px 12px; border-bottom: 1px solid #eee; border: 1px solid gray; }
.col-idx { background: aliceblue; }
.col-main { background: beige; }
.col-comment { background: silver; }
</style>

<table>
<caption>学生名册</caption>

<colgroup>
   <col class="col-idx">
   <col span="2" class="col-main"> 
   <col class="col-comment">
</colgroup>

<thead>
   <tr>
         <th width="8%">序号</th>
         <th width="20%">姓名</th>
         <th width="8%">年龄</th>
         <th>备注</th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>1</td>
      <td>玛利亚</td>
      <td>17</td>
      <td>父母离异，随母亲生活</td>
   </tr>
   <tr>
      <td>2</td>
      <td>阿古丽</td>
      <td>15</td>
      <td>父亲为联合国维和部队上尉</td>
   </tr>
   <tr>
      <td>3</td>
      <td>朱亚军</td>
      <td>18</td>
      <td></td>
   </tr>
</tbody>
</table>
</div>
<h2>二、使用 <colgroup> 标签注意事项</h2>
<ul>
<li><p><code><colgroup></code> 标签应出现在 <code><table></code> 标签之内</p>
</li>
<li><p><code><colgroup></code> 标签在 table 代码流中非常讲究，<strong>必须放在任何 <code><caption></code> 元素（如果使用）之后、并在任何 <code><thead></code>、<code><tbody></code>、<code><tfoot></code> 和 <code><tr></code> 元素之前</strong></p>
</li>
<li><p>只有数量有限的 CSS 属性会影响 <code><colgroup></code>：</p>
<ol>
<li>background</li>
<li>border</li>
<li>visibility</li>
<li>width</li>
</ol>
</li>
</ul>
<h2>三、为 <code>table</code> 设置多个 <code>colgroup</code> 标签</h2>
<p><code><colgroup></code> 标签自身和其子标签 <code><col></code> 一样也可以拥有自己的 span 属性，这意味着我们可以通过多个无需子元素的 <code><colgroup></code> 标签来设置不同子组列的样式。下面可以在线预览的实例是一个七列的表格，分为 5 个子组：</p>
<div class="codebox" data-prev="1"><style>
table { width: 800px; border-collapse: collapse; margin: 30px; }
caption { font-size: 2em; font-weight: bold; padding-bottom: 10px; }
th { background: #3498db; color: white; padding: 12px; text-align: left; font-weight: bold; text-align: center; }
td { padding: 8px 12px; border-bottom: 1px solid #eee; border: 1px solid gray; }
.index { background: aliceblue; }
.main1 { background: beige; }
.main2 { background: gold; }
.main3 { background: tan; }
.comment { background: silver; }
</style>

<table>
<caption>学生名册</caption>

<colgroup class="index"></colgroup>
<colgroup span="3" class="main1"></colgroup> 
<colgroup class="main2"></colgroup>
<colgroup class="main3"></colgroup>
<colgroup class="comment"></colgroup>

<thead>
   <tr>
         <th width="8%">序号</th>
         <th width="10%">姓名</th>
         <th width="8%">性别</th>
         <th width="8%">年龄</th>
         <th width="8%">表现</th>
         <th width="28%">家庭住址</th>
         <th>备注</th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>1</td>
      <td>玛利亚</td>
      <td>女</td>
      <td>17</td>
      <td>优</td>
      <td>雅虎镇单亲公寓006号</td>
      <td>父母离异，随母亲生活</td>
   </tr>
   <tr>
      <td>2</td>
      <td>阿古丽</td>
      <td>女</td>
      <td>15</td>
      <td>优+</td>
      <td>西单公寓109号</td>
      <td>父亲为联合国维和部队上尉</td>
   </tr>
   <tr>
      <td>3</td>
      <td>朱亚军</td>
      <td>男</td>
      <td>18</td>
      <td>优++</td>
      <td>东大丰县县城北区西江公寓238号</td>
      <td></td>
   </tr>
</tbody>
</table>
</div>
<p>总而言之，表格用来展现数据在 HTML 中占据一定优势，而表格中的列分组标签 <code>colgroup</code> 可以灵活设置不同子组列的样式和属性，用好它可以令数据的渲染更为精彩、美观。</p>
</div>

<script>
function loadLineNumFile() {
   const script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
   script.defer = true;
   script.onload = () => addLineNumber();
   document.head.appendChild(script);
}
loadLineNumFile();
</script>

klxf 发表于 5 天前

这个标签用好不容易呢，谢谢醉美管理员分享

dazhankuai 发表于 4 天前

赞，顶帖超有参考作用

岩新新 发表于 4 天前

很给力。。。。很喜欢

luxianshi 发表于 3 天前

感谢分享，充满生活智慧

lanseyuanwei 发表于 3 天前

感谢分享，带来美好体验

uxyto 发表于 3 天前

感谢分享，带来满满惊喜

esegolusy 发表于 3 天前

支持！！！！！！

怀仁发表于前天 03:38

赞，顶帖角度十分独特

游侠发表于昨天 00:02

感谢分享，让我有所得啦

页: [1] 2

查看完整版本: 马黑黑老师 colgroup ：表格列组元素