Html Simple Issue

Discussion in 'HTML & Website Design' started by nexis, Feb 22, 2008.

  1. #1
    Hello DP!!!

    I have tried my first web design and followed a pattern like below



    +++++++++++++++++++++++++++++++++++++++++++++++
    <table cellspacing=0 cellpadding=0 border=0 frame="void">
    <tr>
    <td height="100%" width="10%" bgcolor="#878A8B"> </td>
    <td>

    ... Content of body ....
    </td>

    <td height=100% width=10% bgcolor="#878A8B"></td>
    </tr>
    </table>

    ++++++++++++++++++++


    This will create me a page with three columns. I want to leave the two side columns and put my content on the middle one. However my webpage shows a white border around the main table which i dont want. Any help would be appreciated.
     
    nexis, Feb 22, 2008 IP
  2. jamil0458

    jamil0458 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try htmlgoodies.com for advice on creating tables, removing borders etc
     
    jamil0458, Feb 22, 2008 IP
  3. mds

    mds Active Member

    Messages:
    256
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #3
    By defining bgcolor inside the table data would make it have border automatically if it does not tally with the general body or table color. Since you have said border="0" i dont see any other reason. DP members help out here if you can.
     
    mds, Feb 22, 2008 IP
  4. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #4
    Get rid of this : frame="void" and assign a bgcolor to the table itself. Though I couldn't replicate what you stated, assumption is that the table cells are defined with color and the table border is defaulting to white. If you don't want to apply a bgcolor, add style="padding:0;" to the table. frame=void, is to remove the outer border and leaves the inner border, which you have already set to 0. So its unnecessary and could be what's causing the problem.

    Though you are a beginner, I would recommend against using tables for layout. It's a bad habit to start. Learn to use CSS and life will be much easier down the road.
     
    shallowink, Feb 22, 2008 IP
  5. emengen3

    emengen3 Well-Known Member

    Messages:
    241
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    learn css which every1 use at the moment
     
    emengen3, Feb 22, 2008 IP
  6. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #6
    agreed. the values of CSS is this:

    Suppose my site has 400 pages, each with the style markings embedded in the HTML itself.

    Now if I wanted to change the colour of the backgorund, I'd need to go update 400 pages to update my site.

    With CSS: each of those 400 pages references one CSS file, I want to change the background so I change 1 line in that 1 CSS file, and all of my 400 pages that get their style from that file, are instantly updated.

    CSS stands for Cascading Stylesheet. It's very very easy to learn and use, and if you've learned HTML you're already smarter than you need to be to do CSS. Here are the best CSS resources I've found and I really wish all the best to you!

    OSWD.org < open-source website design. They have hundreds of free html+css templates you're free to use and modify. I learned web design this way, by modifying existing code. This is aleways going to be a great resources, even after you've learned.

    W3CSchools css section < learn it from the people who made CSS. Very well laid out tutorials and live code samples you can play with in-browser until you understand.

    ilovejackdaniels.com < check out his HTML and CSS 1 page cheat sheets. Once you understand how the languages work, everything you ever need to reference is masterfully placed on one of these cheat sheets.

    Best of luck, it's a whole new world once you start using CSS.

    cheers, innovati!
     
    innovati, Feb 22, 2008 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi Nexis,

    The first thing I'd do is remove the invalid frame attribute from your code since it doesn't exist in HTML (or XHTML for that matter).

    The second thing I would do is use semantic HTML and CSS for your layout. As it is set up now, your page has no "meaning" whatsoever. Where is the menu going to be? What will be in the side columns? And so forth.

    Tell me what will be in those columns and I'll SHOW you how to code this in CSS. :)

    Actually W3Schools has nothing to do with the World Wide Web Consortium. The people who own the domain name just happen to be VERY lucky.
     
    Dan Schulz, Feb 22, 2008 IP
  8. Jalpari

    Jalpari Notable Member

    Messages:
    5,640
    Likes Received:
    137
    Best Answers:
    0
    Trophy Points:
    260
    #8
    Jalpari, Feb 23, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Apparently some people at DP will use a table for just this-- IF it needs to be a 100% height model with three columns.

    First thing I'd do (without knowing anything about what this will have as content on it) is have this piece of CSS:

    table {
    border-collapse: collapse;
    }

    You then state whatever borders you do want, or no borders, without all that cellpadding=0 crap. Adding the background colours in one declaration is also easy:

    
    <table>
    <tr>
    <td class="column">column stuff... </td>
    <td>
    
    ... Content of body ....
    </td>
    
    <td class="column">column stuff</td>
    </tr>
    </table>
    
    Code (markup):
    td.column {
    height: 100%;
    width: 10%;
    background-color: #878A8B;
    }
     
    Stomme poes, Feb 23, 2008 IP
  10. vishnups

    vishnups Banned

    Messages:
    166
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Use this code for 3 columns.
    
    <TABLE STYLE="table-layout:fixed" WIDTH=965>
    <COL WIDTH=400><COL WIDTH=310><COL WIDTH=250>
    <TR HEIGHT=20>
    <TD>
    First Colum Content
    </TD>
    <TD>
    Second Coulmn
    </TD>
    <TD>
    Third Colum
    </TD>
    </TR>
    </TABLE>
    
    Code (markup):
    Will give you more control. Change the <COL WIDTH= > above to change column widths.
     
    vishnups, Feb 23, 2008 IP
  11. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #11
    No, no no no. No no no no no.

    HTML should be in lowercase, xHTML must in lowercase. Uppercase HTML is a bad, bad thing. Listen to Dan and Stomme, they know what they are doing, and are good at it.
     
    blueparukia, Feb 23, 2008 IP