HTML table 直列化格式

最新推荐文章于 2021-03-11 05:27:26 发布
原创 最新推荐文章于 2021-03-11 05:27:26 发布 · 3.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用 XHTML 中的 colgroup 和 col 标签对表格进行样式设置，包括对齐方式、背景颜色等，并通过示例展示了如何实现特定列的颜色及对齐方式的设置。

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

直列化格式
<colgroup>...</colgroup>
属性名称                                          属性值                            说明
align                                            left                                                 靠左
                                                   center                                             靠中
                                                   right                                               靠右
valign                                         top                                                  靠上
                                                  middle                                             靠中
                                                  bottom                                            靠下
span                                           数字                                                直列数
bgcolor                                      颜色                                                背景颜色
个别直列设置
格式:<col>功能完全和<colgroup>一样

 

 <!--注意设置第一行的DOCTYPE为xhtml会导致colgroup失效-->

---------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格的直列化格式</title>
</head>
<body>
    <table cellpadding="5px" cellspacing="0px" border="1px" bordercolor="black">
        <!--说明：用两组colgroup标签来控制整个第三列显示为红色
            第一组colgroup中的span="2"相当于一个占位符，这样第三列(数学这一整列)就会显示为红色
            同理，如果设置span="3",则第四列(英语这一整列)会显示为红色
            <colgroup span="2"></colgroup>
            <colgroup bgcolor="red"></colgroup>
        -->
        <!--<col>功能完全和<colgroup>一样
            设置<col>标签达到和<colgroup>一样的功能
            这里加了一个align="right"单独设置第三列(数学这一整列)右对齐
        -->
        <col span="2" />
        <col bgcolor="red" align="right" />
        <caption align="left">学生成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>89</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>92</td>
            <td>96</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>92</td>
            <td>97</td>
            <td>91</td>
        </tr>
        <tr>
            <td>总分</td>
            <td>200</td>
            <td>200</td>
            <td>200</td>
        </tr>
    </table>
</body>
</html>

html表格标签模板 实现跨行和跨列
qq_38409944的博客
05-17 2518
网站首页显示页面 1.表格标签 &lt;table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing=""&gt; &lt;thead&gt;
细究前端 table 直列化格式
yunduanaoligei的博客
11-30 89
今天分享下”细究前端 table 直列化格式“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 直列化格式 <colgroup>...</colgroup> 属性名称 属性值 说明 align
table 表格中 colgroup 和 col 标签
King Saj
01-05 8082
<col>标签是给表格中一个或多个列定义属性值，而<colgroup>标签是对表格中的列进行组合，从而实现对表格的格式化。<col>标签一般会放在<colgroup>标签中使用，对<colgroup>标签组合的列分别设置样式。<colgroup>标签也可以有样式属性，是对组合的列设置相同的样式，<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。 格式: <colgroup span=“跨几
表格table列宽度控制<colgroup>
weixin_30753873的博客
04-28 1208
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。 通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。 注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoo...
TABLE 的 COL 及 COLGROUP 元素
学习记录
06-03 5857
IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性 COLGROUP 元素指定表格中一列或一组列的默认属性。 COL 指定基于列的表格默认属性 table-colgroup
html中table里的col标签
数据库天地
05-07 3114
&lt;html&gt; &lt;body&gt; &lt;table border="2"&gt;&lt;col span="2" style="color:red"&gt; &lt;col style="color:blue"&gt; &lt;tr&gt; &lt;td&gt;红色&lt;/td&
php table格式,HTML table 直列化格式详解
weixin_34089871的博客
03-11 116
下面小编就为大家带来一篇HTML table 直列化格式详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧直列化格式...属性名称 属性值 说明align ...
HTML table 直列化格式详解
09-28
在HTML中，`<table>`标签用于创建表格，而直列化格式则是对表格列进行特定样式和属性设置的一种方法。这通常涉及到`<colgroup>`和`<col>`标签的使用。 `<colgroup>`标签允许我们对表格的一系列连续列应用相同的样式...
浅谈Html网页表格结构化标记的应用
12-13
5. **直列化格式（Column Formatting）**：HTML还提供了`<colgroup>`和`<col>`标签来定义表格列的样式，如背景色、对齐方式等。例如： ```html ;"> ``` 这样可以为一列设置特定的样式，使其在整个列中保持...
Html表格结构化标记：分块编辑与标题设置
然后，作者提到了表格的直列化格式，这是通过`<colgroup>`元素来控制的。这个元素允许对表格的特定列进行格式化，比如设置背景颜色、对齐方式（如左对齐（Left）、居中（Center）、右对齐（Right）），以及`valign`...
table 中的col和colgroup
weixin_30920513的博客
07-12 755
col和colgroup是table中很有用的两个元素，通过设置“ SPAN='X' ”可以用于定义一列或多列的背景色、宽度等（HTML5 中 只是实验了几种，目前判断仅支持背景色和宽度），这样就省去了把css定义到每一个td或th的麻烦。由于其支持的样式有限，写了一个jquery用于复制col中的class到相应的td中，以便用于动态生成内容样式的控制。插件地址：https://github.c...
table转换为Html格式Table
01-24
table转换为Html格式Table
表格的结构化
爱是与世界平行
03-28 2718
分享一些学习到的HTMl表格的结构化知识，生活总是在不断学习中前进，尽管作为萌新（小白）有很多迷茫和未知，但还是要鼓起勇气继续学习和坚持。。
HTML空链接的作用
limlimlim的专栏
01-15 4761
空链接:  就是没有目标端点的链接。  格式显示内容 空连接的作用 1.设为首页  onclick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">设为首页 2.添加收藏  onclick="javascript:window.external.add
CSS设置表格细边框
limlimlim的专栏
06-18 1864
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     表格简单操作             #tbl{border-collapse:collapse;border-left:1px solid #66BDFF;border-top:1px solid
HTML Form表单元素介绍
limlimlim的专栏
01-15 1577
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     注册表单                                                                                   请输入如下的信
HTML DIVCSS注意事项
limlimlim的专栏
01-23 576
+++++++++++++重点++++++++++++++++++++++++++++ *************当父元素，没有指定高度时，并且，它的子元素有浮动，这时，这个父元素的高度不会自动增加。************ *************当我们要想使用绝对定位时：必须要有两个条件 *************【1】，必须给父元素加定位属性，一般建议使用position:relat
HTML DOCTYPE
limlimlim的专栏
01-16 448
为页面添加正确的DOCTYPE DOCTYPE是document type(文档类型)的简写。 主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义）来解释页面代码， 并展现出来。所以要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分 1.XHTML1.0提供了三种DTD声明可供选择: 过渡的(Transitional):
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值