Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2083

Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2083

Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2083

Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2958
Create Fancy HTML tables using CSS
Results 1 to 3 of 3

Thread: Create Fancy HTML tables using CSS

  1. #1
    Administrator Jennifer's Avatar
    Join Date
    Jul 2010
    Posts
    99
    ΑΡ Credit
    990

    Create Fancy HTML tables using CSS

    Hello, Many people are looking for such css code for making fancy tables elements on their sites. I have found some good looking fancy css style code for them.

    Here is a css code for making fancy stylish tables.

    HTML Code:
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #FBF9FB;
        margin: 10px 0;
    }
    
    table td,table th {
        text-align: left;
        border: 1px solid #E4E4E4;
    }
    
    table th {
        background: #F9F9F9;
        color: #999;
        font-weight: 400;
        border: 1px solid #F3F3F3;
    }
    
    table td {
        border: 1px solid #F3F3F3;
        background: #F9F9F9;
        color: #555;
    }
    
    
    table tr:hover td {
        background: #F8F3FC;
        border: 1px solid #FBF9FB;
    }

    Another css style code is..



    Code:
    table { width:98%;background: rgba(238, 238, 238, 0.9);-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;border:1px solid #ccc;border-bottom:0;margin-bottom:15px;border-spacing: 0; line-height: 18px; margin: 0 0 22px 0; text-align: left; }
    th, td { font-size:14px;padding: 8px 11px; border-top:1px solid rgba(255, 255, 255, 0.6);border-bottom:1px solid rgba(0, 0, 0, 0.1);}
    thead, thead th, thead td {padding:10px 11px;font-weight:bold;background:rgba(0,0,0,.05);color:#111;text-shadow:0 1px 0px #fff;font-size:13px;}
    Above 2 codes are for class table , and these will effect all tables of your site/blog. if you want to make separate class then make specific class like below.

    CSS code you'll need, preferably in a separate file:


    HTML Code:
    table.fancy {
      margin: 1em 1em 1em 0;
      background: whitesmoke;
      border-collapse: collapse;
    }
    table.fancy th, table.fancy td {
      border: 1px silver gainsboro;
      padding: 0.2em;
    }
    table.fancy th {
      background: gainsboro;
      text-align: left;
    }
    table.fancy tr:hover td {
       background: mintcream !important;
    }
    table.fancy caption {
      margin-left: inherit;
      margin-right: inherit;
    }
    The HTML code is very simple with "fancy" being the only class declaration:
    HTML Code:
    <table class="fancy">
    <tr>
    <th>Key</th><th>Value</th>
    </tr>
    <tr>
    <td>ACT</td><td>Australian Capital Territory</td>
    </tr>
    <tr>
    <td>NSW</td><td>New South Wales</td>
    </tr>
    <tr>
    <td>NT</td><td>Northern Territory</td>
    </tr>
    <tr>
    <td>QLD</td><td>Queensland</td>
    </tr>
    <tr>
    <td>SA</td><td>South Australia</td>
    </tr>
    <tr>
    <td>TAS</td><td>Tasmania</td>
    </tr>
    <tr>
    <td>VIC</td><td>Victoria</td>
    </tr>
    <tr>
    <td>WA</td><td>Western Australia</td>
    </tr>
    </table>

  2. #2
    Administrator M.A.A's Avatar
    Join Date
    Oct 2011
    Posts
    345
    ΑΡ Credit
    3450
    Hi.

    Thanks for sharing such useful information. I also have some css code for making fancy tables.

    Here is the sample..
    For more stuff, download attachment file..
    Name:  sample table.jpg
Views: 10693
Size:  74.7 KB


    Code:
    /* Table 1 Style */
    table.table1{
        font-family: "Trebuchet MS", sans-serif;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4em;
        font-style: normal;
        border-collapse:separate;
    }
    .table1 thead th{
        padding:15px;
        color:#fff;
        text-shadow:1px 1px 1px #568F23;
        border:1px solid #93CE37;
        border-bottom:3px solid #9ED929;
        background-color:#9DD929;
        background:-webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.02, rgb(123,192,67)),
            color-stop(0.51, rgb(139,198,66)),
            color-stop(0.87, rgb(158,217,41))
            );
        background: -moz-linear-gradient(
            center bottom,
            rgb(123,192,67) 2%,
            rgb(139,198,66) 51%,
            rgb(158,217,41) 87%
            );
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
        -moz-border-radius:5px 5px 0px 0px;
        border-top-left-radius:5px;
        border-top-right-radius:5px;
    }
    .table1 thead th:empty{
        background:transparent;
        border:none;
    }
    .table1 tbody th{
        color:#fff;
        text-shadow:1px 1px 1px #568F23;
        background-color:#9DD929;
        border:1px solid #93CE37;
        border-right:3px solid #9ED929;
        padding:0px 10px;
        background:-webkit-gradient(
            linear,
            left bottom,
            right top,
            color-stop(0.02, rgb(158,217,41)),
            color-stop(0.51, rgb(139,198,66)),
            color-stop(0.87, rgb(123,192,67))
            );
        background: -moz-linear-gradient(
            left bottom,
            rgb(158,217,41) 2%,
            rgb(139,198,66) 51%,
            rgb(123,192,67) 87%
            );
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-top-left-radius:5px;
        -webkit-border-bottom-left-radius:5px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
    }
    .table1 tfoot td{
        color: #9CD009;
        font-size:32px;
        text-align:center;
        padding:10px 0px;
        text-shadow:1px 1px 1px #444;
    }
    .table1 tfoot th{
        color:#666;
    }
    .table1 tbody td{
        padding:10px;
        text-align:center;
        background-color:#DEF3CA;
        border: 2px solid #E7EFE0;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
        color:#666;
        text-shadow:1px 1px 1px #fff;
    }
    .table1 tbody span.check::before{
        content : url(../images/check0.png)
    }
    /* Table 2 Style */
    table.table2{
        font-family: Georgia, serif;
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        letter-spacing: -1px;
        line-height: 1.2em;
        border-collapse:collapse;
        text-align:center;
    }
    .table2 thead th, .table2 tfoot td{
        padding:20px 10px 40px 10px;
        color:#fff;
        font-size: 26px;
        background-color:#222;
        font-weight:normal;
        border-right:1px dotted #666;
        border-top:3px solid #666;
        -moz-box-shadow:0px -1px 4px #000;
        -webkit-box-shadow:0px -1px 4px #000;
        box-shadow:0px -1px 4px #000;
        text-shadow:1px 1px 1px #000;
    }
    .table2 tfoot th{
        padding:10px;
        font-size:18px;
        text-transform:uppercase;
        color:#888;
    }
    .table2 tfoot td{
        font-size:36px;
        color:#EF870E;
        border-top:none;
        border-bottom:3px solid #666;
        -moz-box-shadow:0px 1px 4px #000;
        -webkit-box-shadow:0px 1px 4px #000;
        box-shadow:0px 1px 4px #000;
    }
    .table2 thead th:empty{
        background:transparent;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
    }
    .table2 thead :nth-last-child(1){
        border-right:none;
    }
    .table2 thead :first-child,
    .table2 tbody :nth-last-child(1){
        border:none;
    }
    .table2 tbody th{
        text-align:right;
        padding:10px;
        color:#333;
        text-shadow:1px 1px 1px #ccc;
        background-color:#f9f9f9;
    }
    .table2 tbody td{
        padding:10px;
        background-color:#f0f0f0;
        border-right:1px dotted #999;
        text-shadow:-1px 1px 1px #fff;
        text-transform:uppercase;
        color:#333;
    }
    .table2 tbody span.check::before{
        content : url(../images/check1.png)
    }
    
    /* Table 3 Style */
    table.table3{
        font-family:Arial;
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        text-transform: uppercase;
        letter-spacing: -1px;
        line-height: 1.7em;
        text-align:center;
        border-collapse:collapse;
    }
    .table3 thead th{
        padding:6px 10px;
        text-transform:uppercase;
        color:#444;
        font-weight:bold;
        text-shadow:1px 1px 1px #fff;
        border-bottom:5px solid #444;
    }
    .table3 thead th:empty{
        background:transparent;
        border:none;
    }
    .table3 thead :nth-child(2),
    .table3 tfoot :nth-child(2){
        background-color: #7FD2FF;
    }
    .table3 tfoot :nth-child(2){
        -moz-border-radius:0px 0px 0px 5px;
        -webkit-border-bottom-left-radius:5px;
        border-bottom-left-radius:5px;
    }
    .table3 thead :nth-child(2){
        -moz-border-radius:5px 0px 0px 0px;
        -webkit-border-top-left-radius:5px;
        border-top-left-radius:5px;
    }
    .table3 thead :nth-child(3),
    .table3 tfoot :nth-child(3){
        background-color: #45A8DF;
    }
    .table3 thead :nth-child(4),
    .table3 tfoot :nth-child(4){
        background-color: #2388BF;
    }
    .table3 thead :nth-child(5),
    .table3 tfoot :nth-child(5){
        background-color: #096A9F;
    }
    .table3 thead :nth-child(5){
        -moz-border-radius:0px 5px 0px 0px;
        -webkit-border-top-right-radius:5px;
        border-top-right-radius:5px;
    }
    .table3 tfoot :nth-child(5){
        -moz-border-radius:0px 0px 5px 0px;
        -webkit-border-bottom-right-radius:5px;
        border-bottom-right-radius:5px;
    }
    .table3 tfoot td{
        font-size:38px;
        font-weight:bold;
        padding:15px 0px;
        text-shadow:1px 1px 1px #fff;
    }
    .table3 tbody td{
        padding:10px;
    }
    .table3 tbody tr:nth-child(4) td{
        font-size:26px;
        font-weight:bold;
    }
    .table3 tbody td:nth-child(even){
        background-color:#444;
        color:#444;
        border-bottom:1px solid #444;
        background:-webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.39, rgb(189,189,189)),
            color-stop(0.7, rgb(224,224,224))
            );
        background:-moz-linear-gradient(
            center bottom,
            rgb(189,189,189) 39%,
            rgb(224,224,224) 70%
            );
        text-shadow:1px 1px 1px #fff;
    }
    .table3 tbody td:nth-child(odd){
        background-color:#555;
        color:#f0f0f0;
        border-bottom:1px solid #444;
        background:-webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.39, rgb(85,85,85)),
            color-stop(0.7, rgb(105,105,105))
            );
        background:-moz-linear-gradient(
            center bottom,
            rgb(85,85,85) 39%,
            rgb(105,105,105) 70%
            );
        text-shadow:1px 1px 1px #000;
    }
    .table3 tbody td:nth-last-child(1){
        border-right:1px solid #222;
    }
    .table3 tbody th{
        color:#696969;
        text-align:right;
        padding:0px 10px;
        border-right:1px solid #aaa;
    }
    .table3 tbody span.check::before{
        content : url(../images/check2.png)
    }
    Attached Files Attached Files

  3. #3
    Junior Member Believ Eralan's Avatar
    Join Date
    Apr 2013
    Posts
    10
    ΑΡ Credit
    100
    10 CSS Table Examples | Design Shack

    see 10 CSS Table Examples check the link given above.

Similar Threads

  1. Replies: 1
    Last Post: 08-04-2014, 05:27 AM
  2. HTML Tutorial - HTML Color Coding System - Color Names
    By web_guru in forum Web Designing
    Replies: 1
    Last Post: 03-14-2011, 06:18 AM
  3. Amateur performances � tables connections in MySQL
    By Meer in forum Database Administration
    Replies: 0
    Last Post: 10-20-2010, 10:03 AM
  4. Creation of Excel-tables by means of PHP
    By Meer in forum Programming
    Replies: 0
    Last Post: 10-19-2010, 07:05 AM
  5. HTML Tutorial - Beginning HTML Tags
    By web_guru in forum Web Designing
    Replies: 0
    Last Post: 07-08-2010, 04:28 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •