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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How to properly define table elements in CSS

    I've just started looking into CSS, and am currently trying to define some table elements properties in CSS, and using these in a web page. However, I'm being eluded by the fact that although my math for setting the table width seems OK, my 3-row test table still doesn't look right. Here's the code:

    HTML:
    <html>
    <head><link type="text/css" rel="stylesheet" href="css/style.css"></head>
    <title>=- Page title -=</title>
    <body>
    <center>
    <table cellspacing="0">
    <tr height="1px"><td colspan="4" class="hor_line"></td></tr>
    <tr>
    <td class="ver_line"></td>
    <td width="659px" class="locator">Site Guide : <a href="index.htm">Home</a></td>
    <td width="100px" class="locator" align="right"><a href="sitemap.htm">Site Map</a></td>
    <td class="ver_line"></td>
    </tr>
    <tr height="1px"><td colspan="4" class="hor_line"></td></tr>
    </table>
    </center>
    </body>
    </html>

    CSS:
    table {
    width: 761px;
    border-style: none;
    background-color: "#ffffff";
    color: "#000000";
    font-family: Arial;
    font-size: 10pt;
    }
    td {
    padding: 0;
    }
    td.locator {
    padding-left: 15px;
    padding-right: 15px;
    background: "#ffffc0";
    }
    td.ver_line {
    width: 1px;
    background: "#65859a";
    }
    td.hor_line {
    width: 761px;
    background: "#65859a";
    }

    This was supposed to give me a 761px width table, with a 1px blue vertical bar (ver_line), followed by a 659px element, a 100px element, closed by another 1px vertical blue line (761=1+659+100+1). However, the left blue vertical 1px line dissapears. I can repro it by altering the 659px or 100px values to a somewhat lower value, shortening some text, or changing the font-size.

    But, I'm still no smarter why the problem happens with the attached code... Can anyone advice?

    Thanks in advance,
    Kim.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Border

    First of all, lose the hor_line and ver_line cells and set a proper border on the table; using table cells for such visual effects is plain silly.

    Suggested style rule for the table:
    Code:
    table {
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    border: 1px solid #65859a;
    }
    Remarks:
    • I removed the width property since the remaining two cells will force the table to have the proper width;
    • I replaced the border-style property with the shorthand border property, which should set your desired border in one go;
    • Color values don't need to be quoted;
    • I added the generic font family "sans-serif", just in case a visitor doesn't have Arial installed (yeah, that's really likely to happen, but anyway).

    I hope this helps you along.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Example

    For the sake of argument, I cooked up a complete example with internal stylesheet:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Table with border</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    
    html {
    font-size: 1em;
    }
    body {
    min-width: 600px;
    font-family: verdana, sans-serif;
    font-size: 89%;
    background-color: #f0f0f0;
    }
    
    table {
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    border: 1px solid #65859a;
    margin: 0 auto;
    }
    
    td {
    padding-left: 15px;
    padding-right: 15px;
    background: #ffffc0;
    vertical-align: top;
    }
    
    td.main {
    width: 659px;
    }
    
    td.sidebar {
    width: 100px;
    text-align: right;
    }
    
    </style>
    </head>
    
    <body>
    <table cellspacing="0">
    <tr>
    <td class="main">Site Guide : <a href="index.htm">Home</a></td>
    <td class="sidebar"><a href="sitemap.htm">Site Map</a></td>
    </tr>
    </table>
    
    
    </body>
    </html>
    (There's some stuff in there that I use for standard tryout pages; you may not all need it)

    Does that look like something you could use?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Donald,

    Most certainly does - I agree using table cells for such visuals is not exactly good. Just trying things out.

    My plan was/is to use a number of tables down through the site, all with the same horizontal (between rows/tables) and vertical (between cells) blue lines (thanks for the border tip).

    However, I just want the border to be 1px between each table, but with the border: 1px... approach, I'm ending up with a 2px border between each table (1px bottom of top table + 1px top of next table). This problem is easily solved for the vertical lines between cells in a table (the number of cells per row vary greatly, so I split them into different tables) by using border-collapse: collapse;, but I haven't been able to find a similar solution so that tables can share that 1px border, horizontally.

    Any ideas? I can set border for 3 sides, and then dummy the top/bottom one, but then again, not really elegant...

    Thanks again,
    Kim.

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Adding "new" code (haven't implemented all suggestions, still trying to figure out):

    CSS:
    table {
    width: 761px;
    border: 1px solid #65859a;
    border-collapse: collapse;
    background-color: #ffffff;
    color: #000000;
    font-family: Arial;
    font-size: 10pt;
    }
    td {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    }
    td.locator {
    background: #ffffc0;
    }

    Remarks on CSS:
    - Chose to keep table.width, as I'll be using several tables with identical width. Using several tables, as they'll all be having different amount of cells. Interestingly, when I remove the table.width property, and only use width declaration in the td element (HTML, not CSS), the width changes (becomes wider), how come, why doesn't the 761px declaration in CSS.table.width yield the same length as <td width="659px"> + <td width="100px"> + 2 borders (=761px)?

    HTML:
    <html>
    <head><link type="text/css" rel="stylesheet" href="css/style.css"></head>
    <title>=- Page title -=</title>
    <body>
    <center>
    <table cellspacing="0">
    <tr>
    <td width="659px" class="locator">Site Guide : <a href="index.htm">Home</a></td>
    <td width="100px" class="locator" align="right"><a href="sitemap.htm">Site Map</a></td>
    </tr>
    </table>
    </center>
    <center>
    <table cellspacing="0">
    <tr>
    <td width="250px" class="locator">Site Guide : <a href="index.htm">Home</a></td>
    <td width="400px" class="locator">Some dummy text</td>
    <td width="109px" class="locator" align="right"><a href="sitemap.htm">Site Map</a></td>
    </tr>
    </table>
    </center>
    </body>
    </html>

    So, what "remains" is to reduce the border width between the two tables to 1px (instead of 1px from each table giving 2px), and also for me to understand the width difference. Will keep reading, and appreciate more feedback .

    Thanks,
    Kim.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Box model, borders

    In the CSS box model, the total width of an element is determined by the sum of the content width, padding, borders and margins.
    The table has to be wide enough to fit two cells, including their content, padding, etc.
    If you set the (content) width for a table cell at 659 px and add 15 px of padding on both sides, it already takes up 659 + 30 = 719 px. In total, the added width from all the padding for those two cells is 60 px, which is what your difference should be.

    It's perfectly alright to not set the bottom border in the top table to reduce the combined border in between them to 1 px; if you want to get advanced, you could set a 1 px negative top margin on the bottom table instead.

    Lastly, I strongly recommend not to use the width and align attributes and the center element; these are all deprecated in favor of using CSS, of which I gave examples. If you get used to going with best practices as soon as possible, you'll only benefit lateron.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question center and width

    Thanks again, I'm starting to get a better hang of this. I've gotten rid of the center prop (margin does the trick), but I'm in doubt about giving up the width elements. I've gotten rid of the width prop for the table element, but as I'm building up my site(s), I'm likely to have a lot of td elements, with a lot of different widths.

    Your example also used width for the two td defs, but with a _lot_ of td's with different widths, isn't it more efficient to have a "master td" element through CSS (padding, border, etc.), but to specify the td widths in the HTML itself (instead of having to specify each possible td element in CSS (I'm considering CSS my backbone and my HTML the wrapper, just to illustrate my "analogy")?

    Also, I'd like to have a completely "fixed" width feeling for my table rows on the page, after experimenting without using width, the widt varies depending on my browser window size.

    Kim.


  •  

    Posting Permissions

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