Gyancode

A free library of HTML, CSS, JS

Search This Blog

Showing posts with label table. Show all posts
Showing posts with label table. Show all posts

Friday 3 March 2017

Table Css with Border and Background

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Border and Background</title>
</head>
<style type="text/css">
        table{}
        table tr{ border: 1px #eee solid;}
        table tr th{ border-bottom: 1px #ccc solid;border-top: 1px #ccc solid; margin: 0px; padding: 5px; border-right: 1px #ccc solid; background: #eee;}
        table tr th:first-child{ border-left:1px #ccc solid;}
        table tr td{ border-bottom: 1px #ccc solid; padding: 5px; margin: 1px; /* border-left: 1px #ccc solid; */ border-right: 1px #ccc solid;}
        table tr td:first-child{ border-left:1px #ccc solid;}
    </style>

<body>
<table width="700" cellpadding="10" cellspacing="0">
            <tr>
                <th>Demo</th>
                <th>Demo</th>
                <th>Demo</th>
                <th>Demo</th>
            </tr>
            <tr>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
            </tr>
            <tr>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
            </tr>
        </table>

</body>
</html>

Width and Spacing Table Create


<html>
    <head>
        <title>Width and Spacing</title>
        <style type="text/css">
            th, td {background-color: #eee;}
        </style>
    </head>
    <body>
        <table width="700" cellpadding="10" cellspacing="5">
            <tr>
                <th width="150"></th>
                <th>Withdrawn</th>
                <th>Credit</th>
                <th width="150">Balance</th>
            </tr>
            <tr>
                <th>January</th>
                <td>250.00</td>
                <td>660.50</td>
                <td>410.50</td>
            </tr>
            <tr>
                <th>February</th>
                <td>135.55</td>
                <td>895.20</td>
                <td>1170.15</td>
            </tr>
        </table>
    </body>
</html>