zoukankan      html  css  js  c++  java
  • 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这四种样式。

  • 相关阅读:
    一步一步学习Unity3d学习笔记系1.2 单机游戏和网游的数据验证概念
    一步一步学习Unity3d学习笔记系1.1
    Mongodb 官网驱动2.2.4.26版本 增,删 改,查
    使用Zxing 一维码
    Linq 数据排序,分页
    easyui datagrid 批量编辑和提交数据
    Json序列化为对象方法
    百度地图车辆运动轨迹
    GridView后台绑定数据列表方法
    删除重复数据
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3793023.html
Copyright © 2011-2022 走看看