• 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;
                    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这四种样式。

  • 相关阅读:
    基本技能训练之线程
    关于UEditor的使用配置(图片上传配置)
    PAT 乙级练习题1002. 写出这个数 (20)
    codeforces 682C Alyona and the Tree DFS
    codeforces 681D Gifts by the List dfs+构造
    codeforces 678E Another Sith Tournament 概率dp
    codeforces 680E Bear and Square Grid 巧妙暴力
    codeforces 678D Iterated Linear Function 矩阵快速幂
    codeforces 679A Bear and Prime 100 交互
    XTUOJ 1248 TC or CF 搜索
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3793023.html
Copyright © 2020-2023  润新知