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

原文地址:https://www.cnblogs.com/rubylouvre/p/3793023.html