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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS layout problem (table)

    Hello guys !

    My name is Cédric Boetens, a 18 year old student. I am working on a new website for school but I have this problem with a table layout. It's the following table:

    <head>
    <style type="text/css">
    /*hoe een tabel opmaken in de #main-zone*/
    table
    {
    margin-top: 20px;
    margin-bottom: 20px;
    border-collapse: collapse;
    border: 1px solid #000000;
    }


    /*hoe een titel-cel opmaken in een tabel in de #main-zone*/
    .title
    {
    background: #590000;
    padding: 6px;
    font-weight: bold;
    color: #FFFFFF;
    }


    /*hoe een cel in een even rij in een tabel opmaken in de #main-zone*/
    .row1
    {
    background: #DFDFDF;
    padding: 6px 3px 6px 3px;
    border-top:solid 1px #000000;
    }


    /*hoe een cel in een oneven rij in een tabel opmaken in de #main-zone*/
    .row2
    {
    background: #BFBFBF;
    padding: 6px 3px 6px 3px;
    border-top:solid 1px #000000;
    }
    </style>
    </head>
    <body>
    <table>
    <tr class="title">
    <td>TypeID</td>
    <td>Omschrijving</td>
    <td>Beheer</td>
    </tr>

    <tr class="row1">
    <td>1</td>
    <td>computer</td>
    <td><a href="index.aspx?type=wijzigtype&materiaaltype=1">Wijzigen</a></td>
    </tr>

    <tr class="row2">
    <td>2</td>
    <td>beamer</td>
    <td><a href="index.aspx?type=wijzigtype&materiaaltype=2">Wijzigen</a></td>
    </tr>

    <tr class="row1">
    <td>3</td>
    <td>aanwijspen</td>
    <td><a href="index.aspx?type=wijzigtype&materiaaltype=3">Wijzigen</a></td>
    </tr>

    </table>
    </body>
    </html>


    When you run this page in a browser you will see that the table's padding is gone while this is inplented in the code. Also the table's border is gone and this is also inplented in the code. Is there something wrong with the css code or?

    Thanks in advance !

    Greetings,
    Cédric Boetens

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Welcome to the forums Cédric,
    You should use a doctype.
    With <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    We can make a table like this:
    Code:
    <table width="400px" cellpadding="20px" cellspacing="20px" border="1">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    </table>
    But not with <!DOCTYPE html> or with <head>

    You say
    table's border is gone
    With your css change to red and see what type of border you have:
    Code:
    table
    {
    margin-top: 20px;
    margin-bottom: 20px;
    border-collapse: collapse;
    border: 1px solid red;  // was black
    }
    Use a doctype and give it another go.
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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