SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you apply different attributes to the same table ?

    Hi all,

    I seem to be getting stuck on the basics at the moment Trying to get apply css to tables, so that 4 columns have certain widths, and to apply margins to 2 of the columns.

    Assuming keeping to the tables design, how would you apply css to them please ?

    Any help much appreciated.

    Dez.

    Here's the site:

    http://tinyurl.com/l3cv6


    and the code :

    <html>

    <head>
    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    </head>

    <body>

    <table width="760px">
    <tr>
    <td rowspan="4">This needs to be 150px wide and will hold no text</td>
    <td>This needs to be 300px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins in each cell to be 7px</td>
    <td>This needs to be 160px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins in each cell to be 7px</td>
    <td rowspan="4">This needs to be 150px wide and will hold no text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    </table>

    <p><br>
    &nbsp;</p>

    <table width="760px">
    <tr>
    <td rowspan="4">This needs to be 150px wide and will hold no text</td>
    <td>This needs to be 300px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins to be 7px</td>
    <td>This needs to be 160px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins to be 7px</td>
    <td rowspan="4">This needs to be 150px wide and will hold no text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    </table>


    <p><br>
    &nbsp;</p>


    <table width="760px">
    <tr>
    <td rowspan="4">This needs to be 150px wide and will hold no text</td>
    <td>This needs to be 300px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins to be 7px</td>
    <td>This needs to be 160px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins to be 7px</td>
    <td rowspan="4">This needs to be 150px wide and will hold no text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    <tr>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    <td>sample text<br>
    sample text<br>
    sample text<br>
    sample text</td>
    </tr>
    </table>


    </body>

    </html>

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi there,

    You can just apply classes or id's to specific table cells, for example:

    HTML Code:
    <td class="column-c">This needs to be 160px wide and all of the text in the cells below needs to be 14px arial, plus top and bottom margins to be 7px</td>
    Code:
    .column-c {
      width: 160px;
      padding: 7px 0;
    }
    
    .column-b, .column-c {
      font: 14px/1.4em Arial, sans-serif;
    }

  3. #3
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Many thanks Egor - that solved the problem.

    Much appreciated.

    Dez.


Bookmarks

Posting Permissions

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