Tuesday, December 15, 2015

div table primer 3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
    .Table
    {
        display: table;
border-collapse: separate;
border-spacing: 2px;
    }

     .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }

    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }

    .Row
    {
        display: table-row;
    }

    .Cell
    {
        display: table-cell;
        border: 1px silver solid;
        //border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
background-color: WhiteSmoke;

     }

 .Cell:hover {background-color:lavender;}
    
    .Cellh
    {
        display: table-cell;
        border: 1px silver solid;
        //border-width: thin;
        //padding-left: 1px;
        //padding-right: 1px;
        //padding-top: 1px;
        //padding-bottom: 1px;
background-color: aliceblue;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

     }
    
     .Cellh a {background-color:aliceblue; display: block;text-decoration: none;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
     .Cellh a:hover {background-color:lightskyblue; display: block;text-decoration: none;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
</style>
</head>
<body>
<center>
<div class="Table">
    <div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cellh">
            <a href=#sort1>Heading 1</a>
        </div>
        <div class="Cellh">
            <a href=#sort2>Heading 2</a>
        </div>
        <div class="Cellh">
            <a href=#sort3>Heading 3</a>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 2 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 3</p>
        </div>
    </div>
</div>
</center>

 </body>
</html>
Posted by at