zoukankan      html  css  js  c++  java
  • 漂亮的HTML表格


    原文: http://www.textfixer.com/resources/css-tables.php#css-table01 

    一个像素边框的表格:

    Info Header 1Info Header 2Info Header 3
    Text 1A Text 1B Text 1C
    Text 2A Text 2B Text 2C

    代码如下:

    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.gridtable 
    {
        font-family
    : verdana,arial,sans-serif;
        font-size
    :11px;
        color
    :#333333;
        border-width
    : 1px;
        border-color
    : #666666;
        border-collapse
    : collapse;
    }
    table.gridtable th 
    {
        border-width
    : 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #666666;
        background-color
    : #dedede;
    }
    table.gridtable td 
    {
        border-width
    : 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #666666;
        background-color
    : #ffffff;
    }
    </style>

    <!-- Table goes in the document BODY -->
    <table class="gridtable">
    <tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>

    有背景图片的表格:

    Info Header 1Info Header 2Info Header 3
    Text 1A Text 1B Text 1C
    Text 2A Text 2B Text 2C

    代码如下:

    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.imagetable 
    {
        font-family
    : verdana,arial,sans-serif;
        font-size
    :11px;
        color
    :#333333;
        border-width
    : 1px;
        border-color
    : #999999;
        border-collapse
    : collapse;
    }
    table.imagetable th 
    {
        background
    :#b5cfd2 url('cell-grey.jpg');
        border-width: 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #999999;
    }
    table.imagetable td 
    {
        background
    :#dcddc0 url('cell-grey.jpg');
        border-width: 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #999999;
    }
    </style>

    <!-- Table goes in the document BODY -->
    <table class="imagetable">
    <tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>  

    间隔彩色行表格:

    Info Header 1Info Header 2Info Header 3
    Text 1A Text 1B Text 1C
    Text 2A Text 2B Text 2C
    Text 3A Text 3B Text 3C
    Text 4A Text 4B Text 4C
    Text 5A Text 5B Text 5C

    代码如下:

    <!-- Javascript goes in the document HEAD -->
    <script type="text/javascript">
    function altRows(id){
        if(document.getElementsByTagName){  
            
            var table = document.getElementById(id);  
            var rows = table.getElementsByTagName("tr"); 
             
            for(i = 0; i < rows.length; i++){          
                if(i % 2 == 0){
                    rows[i].className = "evenrowcolor";
                }else{
                    rows[i].className = "oddrowcolor";
                }      
            }
        }
    }

    window.onload=function(){
        altRows('alternatecolor');
    }
    </script>


    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.altrowstable 
    {
        font-family
    : verdana,arial,sans-serif;
        font-size
    :11px;
        color
    :#333333;
        border-width
    : 1px;
        border-color
    : #a9c6c9;
        border-collapse
    : collapse;
    }
    table.altrowstable th 
    {
        border-width
    : 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #a9c6c9;
    }
    table.altrowstable td 
    {
        border-width
    : 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #a9c6c9;
    }
    .oddrowcolor
    {
        background-color
    :#d4e3e5;
    }
    .evenrowcolor
    {
        background-color
    :#c3dde0;
    }
    </style>


    <!-- Table goes in the document BODY -->
    <table class="altrowstable" id="alternatecolor">
    <tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </tr>
    <tr>
        <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
    </tr>
    <tr>
        <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
    </tr>
    <tr>
        <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
    </tr>
    </table>


    鼠标停留时高亮行的表格:

    Info Header 1Info Header 2Info Header 3
    Item 1A Item 1B Item 1C
    Item 2A Item 2B Item 2C
    Item 3A Item 3B Item 3C
    Item 4A Item 4B Item 4C
    Item 5A Item 5B Item 5C

    代码如下:

    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.hovertable 
    {
        font-family
    : verdana,arial,sans-serif;
        font-size
    :11px;
        color
    :#333333;
        border-width
    : 1px;
        border-color
    : #999999;
        border-collapse
    : collapse;
    }
    table.hovertable th 
    {
        background-color
    :#c3dde0;
        border-width
    : 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #a9c6c9;
    }
    table.hovertable tr 
    {
        background-color
    :#d4e3e5;
    }
    table.hovertable td 
    {
        border-width
    : 1px;
        padding
    : 8px;
        border-style
    : solid;
        border-color
    : #a9c6c9;
    }
    </style>

    <!-- Table goes in the document BODY -->
    <table class="hovertable">
    <tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
        <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
    </tr>
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
        <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
    </tr>
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
        <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
    </tr>
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
        <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
    </tr>
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
        <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
    </tr>
    </table>  


    完! 

  • 相关阅读:
    python核心编程第五章练习-5.17-随机序列
    python核心编程第五章练习-5.11-最大公约数和最小公倍数
    微信机器人之PC微信hook
    PC微信获取登录二维码
    PC微信读取微信好友列表(联系人)
    验证码识别之二值化
    基于决策树的简单验证码识别
    基于朴素贝叶斯识别简单验证码
    PIL库的简单操作
    knn识别简单验证码
  • 原文地址:https://www.cnblogs.com/itech/p/2469041.html
Copyright © 2011-2022 走看看