Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to set table size in css

    i need to know how to set table size using css code.

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    836
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Better if you posted the code you have so far. For one table:

    table {
    width: XXpx;
    height: YYpx; /* optional */
    margin: 0 auto; /* centers */
    }

    If you have more than one table tag, then you will need selector names as ids or classes.

    Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
    How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/co...-tables-to-css
    Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps
    Last edited by Major Payne; 05-29-2010 at 09:34 AM.
    ☠ ☠RON☠ ☠

  • #3
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Replace height and width attributes with CSS height and width properties.

    For example replace height="23" width="45" with style="height:23px; width:45px;"

    Here is an example that illustrates height and width attributes being replaced with inline styles and with CSS classes.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>CSS Table Size</title>
    <style type="text/css">
    table.mood   { width:600px; }
    th.mood      { height:30px; }
    td.sad       { height:20px; }
    td.happy     { height:35px; }
    td.exuberant { height:50px; }
    </style>
    </head>
    <body>
    <h1>CSS Table Size</h1>
    <p>A demo of setting table size with attributes and with CSS.</p>
    <table border="1" width="600">
    <caption>Size set with attributes</caption>
    <tr><th height="30">Day</th><th>Mood</th></tr>
    <tr><td height="20">Yesterday</td><td>Sad</td></tr>
    <tr><td height="35">Today</td><td>Happy</td></tr>
    <tr><td height="50">Tomorrow</td><td>Exuberant</td></tr>
    </table>
    <br>
    <table border="1" style="width:600px;">
    <caption>Size set with inline CSS</caption>
    <tr><th style="height:30px;">Day</th><th>Mood</th></tr>
    <tr><td style="height:20px;">Yesterday</td><td>Sad</td></tr>
    <tr><td style="height:35px;">Today</td><td>Happy</td></tr>
    <tr><td style="height:50px;">Tomorrow</td><td>Exuberant</td></tr>
    </table>
    <br>
    <table border="1" class="mood">
    <caption>Size set with CSS classes</caption>
    <tr><th class="mood">Day</th><th>Mood</th></tr>
    <tr><td class="sad">Yesterday</td><td>Sad</td></tr>
    <tr><td class="happy">Today</td><td>Happy</td></tr>
    <tr><td class="exuberant">Tomorrow</td><td>Exuberant</td></tr>
    </table>
    
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

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