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
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table Layout Problems

    i have a problem with a table and i don't know how to sort it.

    How i want it:
    Code:
    <body bgcolor="#808080">
    <link rel="stylesheet" href=first.css>
    <table style="margin:auto; width:100%; padding:1px; border:0px solid #; background-color:#; color:#000; text-align:center;" cellspacing="1">
    
    <tbody><tr>
    <td> <!-- Don't want this <td> -->
    <table style="width:100%; height:410px; border:1px solid #83008C; background-color:#83008C;" cellpadding="0" cellspacing="1">
    
    <tr style="height:40px; background-color:#C0C0C0;">
    <th colspan="2" style="border:1px solid #83008C;">Species</th>
    <th colspan="2" style="border:1px solid #83008C;">Rank</th>
    </tr>
    
    <tr style="background-color:#F0F0F0;">
    <td colspan="2" style="border:1px solid #83008C;"><center>Demon</center></td>
    <td colspan="2" style="border:1px solid #83008C;"><center><a href="../rank.html#a+">A+</a></center></td>
    </tr>
    
    <tr style="background-color:#C0C0C0;">
    <th colspan="1" style="border:1px solid #83008C;">Type</th>
    <th colspan="1" style="border:1px solid #83008C;">Siblings</th>
    <th colspan="1" style="border:1px solid #83008C;">Date</th>
    <th colspan="1" style="border:1px solid #83008C;">Knowing</th>
    </tr>
    
    <tr style="background-color:#F0F0F0;">
    <td colspan="1" style="border:1px solid #83008C;"><center>Non-Existence</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Quintuplets:<br><a href="ra.html">Ra</a>, <a href="sa.html">Sa</a>, <a href="va.html">Va</a> & <a href="za.html">Za</a></center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>27/07/2013 True=(Un)</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Ripa+, Crimson, <a href="silvieta.html" style="text-decoration: none">Silvieta</a></center></td>
    </tr>
    
    <tr style="background-color:#C0C0C0;">
    <th colspan="1" style="border:1px solid #83008C;">Traits</th>
    <th colspan="1" style="border:1px solid #83008C;">Hair Color</th>
    <th colspan="1" style="border:1px solid #83008C;">Eye Color</th>
    <th colspan="1" style="border:1px solid #83008C;">Nickname</th>
    </tr>
    
    <tr style="background-color:#F0F0F0;">
    <td colspan="1" style="border:1px solid #83008C;"><center>Tail+Horns</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Green</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Red</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Happy</center></td>
    </tr></tbody></table>
    
    <td style="width:20%;"> <!-- Don't want this <td> -->
    <table style="width:100%; height:410px; border:0px solid #83008C; background-color:#83008C;">
    
    <tbody><tr>
    <th style="width:100%; border:1px solid #83008C; background-color:#C0C0C0; font-size:14pt;">Ka</th>
    </tr>
    
    <tr>
    <td colspan="2" style="background-color:#fff; font-size:6pt;"><center><img alt="Ka" src="../nodata.jpg" height="324" width="235"></img></center></td>
    </tr>
    
    <tr>
    <th colspan="2" style="width:50%; border:1px solid #83008C; background-color:#C0C0C0;">World</th>
    </tr>
    
    <tr>
    <td colspan="2" style="background-color:#F0F0F0;"><center>None</a></center></td>
    </tr></tbody></table></td>
    This is how it is:
    Code:
    <body bgcolor="#808080">
    <link rel="stylesheet" href=first.css>
    <table style="margin:auto; width:100%; padding:1px; border:0px solid #; background-color:#; color:#000; text-align:center;" cellspacing="1">
    
    <tbody><tr>
    
    <table style="width:80%; height:410px; border:1px solid #83008C; background-color:#83008C;" cellpadding="0" cellspacing="1">
    
    <tr style="height:40px; background-color:#C0C0C0;">
    <th colspan="2" style="border:1px solid #83008C;">Species</th>
    <th colspan="2" style="border:1px solid #83008C;">Rank</th>
    </tr>
    
    <tr style="background-color:#F0F0F0;">
    <td colspan="2" style="border:1px solid #83008C;"><center>Demon</center></td>
    <td colspan="2" style="border:1px solid #83008C;"><center><a href="../rank.html#a+">A+</a></center></td>
    </tr>
    
    <tr style="background-color:#C0C0C0;">
    <th colspan="1" style="border:1px solid #83008C;">Type</th>
    <th colspan="1" style="border:1px solid #83008C;">Siblings</th>
    <th colspan="1" style="border:1px solid #83008C;">Date</th>
    <th colspan="1" style="border:1px solid #83008C;">Knowing</th>
    </tr>
    
    <tr style="background-color:#F0F0F0;">
    <td colspan="1" style="border:1px solid #83008C;"><center>Non-Existence</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Quintuplets:<br><a href="ra.html">Ra</a>, <a href="sa.html">Sa</a>, <a href="va.html">Va</a> & <a href="za.html">Za</a></center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>27/07/2013 True=(Un)</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Ripa+, Crimson, <a href="silvieta.html" style="text-decoration: none">Silvieta</a></center></td>
    </tr>
    
    <tr style="background-color:#C0C0C0;">
    <th colspan="1" style="border:1px solid #83008C;">Traits</th>
    <th colspan="1" style="border:1px solid #83008C;">Hair Color</th>
    <th colspan="1" style="border:1px solid #83008C;">Eye Color</th>
    <th colspan="1" style="border:1px solid #83008C;">Nickname</th>
    </tr>
    
    <tr style="background-color:#F0F0F0;">
    <td colspan="1" style="border:1px solid #83008C;"><center>Tail+Horns</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Green</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Red</center></td>
    <td colspan="1" style="border:1px solid #83008C;"><center>Happy</center></td>
    </tr></tbody></table>
    
    <table style="width:20%; height:410px; border:1px solid #83008C; background-color:#83008C;">
    
    <tbody><tr>
    <th style="width:100%; border:1px solid #83008C; background-color:#C0C0C0; font-size:14pt;">Ka</th>
    </tr>
    
    <tr>
    <td colspan="2" style="background-color:#fff; font-size:6pt;"><center><img alt="Ka" src="../nodata.jpg" height="324" width="235"></img></center></td>
    </tr>
    
    <tr>
    <th colspan="2" style="width:50%; border:1px solid #83008C; background-color:#C0C0C0;">World</th>
    </tr>
    
    <tr>
    <td colspan="2" style="background-color:#F0F0F0;"><center>None</a></center></td>
    </tr></tbody></table></td>
    CSS:
    Code:
    /*A begginners first CSS*/
    h3{border-bottom:1px solid}
    a {text-decoration:none}
    table {table-layout: fixed;}
    td {background-color:#F0F0F0}
    th {background-color:#C0C0C0}

    I've marked two <td>'s in how i want it with '<!-- Don't want this <td> -->', the reason is because the color gets messed up by the extra <td>'s giving it a light colored outline which i want removed.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    At first you should start with valid HTML. While not technically required it’s common and good practice to have a document header. It’s certainly not allowed to have a <link> element in the body. This is a basic HTML document:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        …
      </body>
    </html>
    The stylesheet link goes into the <head> element:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="…">
      </head>
      <body>
        …
      </body>
    </html>
    And I think we’re putting the cart before the horse if we continue with your (erroneous) table code. You really should learn to create semantic HTML. Can you show us an image of what you want to create?

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://imageshack.us/a/img856/7145/pawy.png

    Right between the grey background and the purple table there is a silver/white outline going all the way around the two tables, with the css the lines are there, but without the css they're gone.
    Code:
    td {background-color:#F0F0F0}
    th {background-color:#C0C0C0}
    Is there a way around this, removing the td's i pointed out solves that but then the table on the right is placed under the left one set the the left of the page.
    (found first host site annoying)
    http://oi39.tinypic.com/apfns.jpg


  •  

    Posting Permissions

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