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

  • 相关阅读:
    c# 方法重载
    c# propertyGrid下拉选项
    c# 枚举类型
    c# socket编程
    读书笔记之ado.net entity framework
    c# delegate的invoke和bejinInvoke的区别
    C# 读书笔记之类与结构体
    c#笔记之启动新线程
    c# listview的使用
    visual studio2013 改变匹配括号的颜色
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3793023.html
Copyright © 2011-2022 走看看