Combing CSS with Tables.

Discussion in 'Member Articles & Tutorials' started by NBK*Twitch, Jun 14, 2010.

  1. NBK*Twitch

    NBK*Twitch Regular Member

    I am sure already you are going CSS with Tables?!?!?!?! Do not worry though this is just to make the table be able to look better. Kind of like how mybb does.

    Okay first lets get out table ready =].

    Code:
    <head>
    <title> blah </title>
    </head>
    <body>
    <table>
    <tr>
    <td>
    </tr>
    </td>
    </table>
    </body>
    
    Not hard is it :P?

    Now as most of you should know a default table looks pretty boring =[.

    So lets make some css to spice it up :).

    Code:
    <head>
    <title> blah </title>
    <style type="text/css" media=screen>
    .thead {
    background-color: #666
    width: 400px;
    hieght: 400px;
    }
    
    .tborder {
    background-color: #333;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>
    </tr>
    </td>
    </table>
    </body>
    
    So now we have the css made.

    So now lets call it with divs :).

    Code:
    <head>
    <title> blah </title>
    </head>
    <body>
    <table>
    <tr>
    <td>
    </tr>
    </td>
    </table>
    </body>
    
    Not hard is it :P?

    Now as most of you should know a default table looks pretty boring =[.

    So lets make some css to spice it up :).

    Code:
    <head>
    <title> blah </title>
    <style type="text/css" media=screen>
    .thead {
    background-color: #666
    width: 400px;
    hieght: 400px;
    }
    
    .tborder {
    background-color: #333;
    }
    </style>
    </head>
    <body>
    <table class="tborder">
    <tr>
    <td class="thead">
    sd;lnhgdn
    </tr>
    </td>
    </table>
    </body>
    
    Now with the above the table should have a nice simple border. With a head with a grey color.

    So now you might ask why would I do this?

    Well if you do use tables you might notice when it comes to styling them(which you should not need to do to often) they are very limited. This is because tables are meant to be place holders. they aren't meant to be for styling.

    However if you do want to style them to look somewhat better the above will do so.

    So there you have my tutorial on styling tables. If you need any help recreating this just post below :).
     
  2. Syncro

    Syncro Regular Member

    Good example but I prefer divs
     
  3. phileas_fogg

    phileas_fogg Regular Member

    Tables should be Banned... Its nearly 2012! stop using Tables!


    SEO Services
     
  4. phileas_fogg

    phileas_fogg Regular Member

    Tables should be Banned... Its nearly 2012! stop using Tables!


    SEO Services
     
  5. phileas_fogg

    phileas_fogg Regular Member

    Tables should be Banned... Its nearly 2012! stop using Tables!


    SEO Services
     

Share This Page