Ruby's Louvre

每天学习一点点算法

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

col标签的相关实验

col上有width属性，如果对应值没有单位，默认是像素

<!DOCTYPE html>
<html>
    <head>
        <title>col相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
 
    <body >
        <table border="1" width="100%">
            <col width="20"></col>
            <col width="50"></col>
            <col width="80"></col>
 
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>col相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
 
    <body >
        <table border="1" width="100%">
            <col width="20%"></col>
            <col width="20%"></col>
            <col width="30%"></col>
 
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

只有IE67才认align

<!DOCTYPE html>
<html>
    <head>
        <title>col相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
 
    <body >
        <table border="1" width="100%">
            <col align="left" width="20%"></col>
            <col align="right" width="20%"></col>
            <col align="center" width="30%"></col>
 
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

IE, chrome, safari能认bgcolor，firefox不认。

<!DOCTYPE html>
<html>
    <head>
        <title>col相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
 
    <body >
        <table border="1" width="100%">
            <col bgcolor="red" width="20%"/>
            <col bgcolor="blue" width="20%"/>
            <col bgcolor="yellow" width="30%" align="center"/>
            <col bgcolor="green" width="30%"/>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

我们可以使用style，全部浏览器都认

<!DOCTYPE html>
<html>
    <head>
        <title>col相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
 
    <body >
        <table border="1" width="100%">
            <col style="background: #2FECDC" width="20%"/>
            <col style="background: #FF77F1" width="20%"/>
            <col style="background: gold;text-align: center" width="30%" />
            <col style="background: greenyellow" width="30%"/>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

还可以用类名

<!DOCTYPE html>
<html>
    <head>
        <title>col相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style>
            .ccc{
                background: gold;
                text-align: center;
                font-weight: bold;
                width:40%;
            }
        </style>
    </head>
 
    <body >
        <table border="1" width="100%">
            <col style="background: #2FECDC" width="20%"/>
            <col style="background: #FF77F1" width="20%"/>
            <col class="ccc" />
            <col style="background: greenyellow"/>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

根据W3C规范，col只能设置border,background,width,visibility这四种样式。

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码

posted on   司徒正美  阅读(1113)  评论(0)  编辑  收藏  举报

编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
历史上的今天：
2012-06-18 knockout.js的学习笔记2
2010-06-18 获取屏幕的PDI值
点击右上角即可分享
微信分享提示
SQL AI 助手