col标签的相关实验

时间：2023-02-03 00:11:17

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

相关文章