1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

<DIV> vs <Table>, Making the change...

Discussion in 'HTML & Website Design' started by Nakirema, Mar 7, 2006.

0
Page 1 of 2
  1. #1
    I've always made my sites using all table and formating the style with CSS. Now i'm trying to design using <div>. It's not going very well. I understand how to positon <div>'s verticaly. However, I'm completely lost when it comes to horizontaly. I want to create the same effect as if I were using <td>. What would be the best way to do this? Ex. 4 or 5 columns.
     
    Nakirema, Mar 7, 2006 IP
  2. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
	<style type="text/css">

#D1, #D2, #D3, #D4, #D5 {
	width: 20%;
	height: 100px;
	float: left;
}

#D1 { background-color: maroon }
#D2 { background-color: purple }
#D3 { background-color: navy }
#D4 { background-color: black }
#D5 { background-color: red }

	</style>
</head>

<body>

	<div id="D1">
	</div>

	<div id="D2">
	</div>

	<div id="D3">
	</div>

	<div id="D4">
	</div>

	<div id="D5">
	</div>

</body>

</html>
    HTML:
    Internet Explorer, however, seems to give us trouble. Even though the five boxes add up to 100%, the last box is sometimes wrapped to the next line. Setting the box widths to 19.9% seems to correct that for IE.

    There are, in fact, CSS properties for mimicing the visual appearence of a table so you don't have to pollute your HTML document with misued tables. Once again, however, Internet Explorer does not support these properties. Crossing the IE hurdles will be one of the challenges of changing to a semantically correct HTML document.
     
    FeelLikeANut, Mar 7, 2006 IP
  3. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you sooooo much.. This worked great. It's the best example I've seen yet. Also I tried it in IE, FF, and Opera... It's looks fine.

    Again Thank You
     
    Nakirema, Mar 7, 2006 IP
  4. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #4
    nice reply!

    i hate to ask stupid questions but why is it that we're supposed to use divs instead of tables now? ive read this elsewhere as well, just wondering
     
    kkibak, Mar 7, 2006 IP
  5. fsmedia

    fsmedia Prominent Member

    Messages:
    5,163
    Likes Received:
    262
    Best Answers:
    0
    Trophy Points:
    390
    #5
    tables are for tabular data, divs are meant for design. That's really what it comes down to. (This is my opinion)
     
    fsmedia, Mar 7, 2006 IP
  6. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Well I tried editing the code you sent and.... it's not bad. What I'm doing is trying to layout a search feature to search jobs. keywords,location,job category, and the submit button. Maybe the calls for table use. The form fields just aren't looking right

    Whatcha think?
     
    Nakirema, Mar 8, 2006 IP
  7. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Is there some documentation on this? I remember reading some developers talking about how bad it is to use tables for layouts--but that's what i've been doin for years w/out problems. anyone have links to a sort of formal explanation?
     
    kkibak, Mar 8, 2006 IP
  8. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    check out www.google.com/ig now move those sections around. You can't do that with tables. Also sites load faster using <div> and css. I'm starting to think that in some cases it's ok to design with tables. Yahoo and Google are both designed with tables..:rolleyes:
     
    Nakirema, Mar 8, 2006 IP
  9. pozer

    pozer Active Member

    Messages:
    603
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    80
    #9
    Sites designed using <div> load much faster, I've stopped using tables
     
    pozer, Mar 8, 2006 IP
  10. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Ok, I want to learn to use only CSS and <div>, but I cant get this to look right with <div>

    
<table>
     <tr valign="top">
          <td>Keyword(s)<br /><input type="text"><br />ie. IT, Nurse, Construction</td>
          <td>Location<br /><input type="text"></td>
          <td>Job Category<br /><input type="text"></td>
          <td><br /><input type="submit" value="Search"></td>
     </tr>
</table>
    HTML:
    I'm not doing to well with the columns. Also this has to fit in a 760px container.
     
    Nakirema, Mar 8, 2006 IP
  11. daboss

    daboss Guest

    Messages:
    2,249
    Likes Received:
    151
    Best Answers:
    0
    Trophy Points:
    0
    #11
    to me, divs are a hell lot more difficult to do. i've been using tables nicely all along... then i wrote my directory script using divs for the first time - quite a big mindset change.

    i have to warn you first though, make sure everything looks ok with firefox - it's real tough on standards. after you make it work on firefox, try it out using ie - fix any problems you find. i wrote my directory script based on ie first and had a tough time making it look ok on firefox - since firefox is much much more strict compared to ie.
     
    daboss, Mar 8, 2006 IP
  12. someguy

    someguy Guest

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    fsmedia is right, designing with div (using xhtml & css properly) doesn't mean not using tables, but using them for what they are meant for, tabular data.
     
    someguy, Mar 8, 2006 IP
  13. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #13
    David Siegel is the man who first formally introduced tables as a way to achieve a desired layout, back in the mid-90s. A little more than a year later (1998), he recanted, stating "The Web is dead, and I killed it - read more :)
     
    the_pm, Mar 8, 2006 IP
    kkibak likes this.
  14. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #14
    awesome link, thanks alot!
     
    kkibak, Mar 8, 2006 IP
  15. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #15
    You're welcome kkibak. It's a very interesting read, considering browser technology was not prepared to follow his path to redemption for another two or three years :)
     
    the_pm, Mar 8, 2006 IP
  16. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Ok, this image is a search form I created for a job board I'm making. This is made using tables, as the borders show. I just can't figure out how to create the same thing using <div>. Is it better to keep it in table? My site does not have alot of graphics and ads so i dont think it will affect the load time very much.

    Please someone share your ideas.

    [​IMG]

    Here is the code for this form:

    <cfform action="" method="post">
    <table cellpadding="5" cellspacing="0" align="center" border="1">
    <tr valign="top">
    <td>Keyword(s):<br /><cfinput class="search_input" name="keyword"><br>i.e. Nurse, IT, Construction</td>
    <td>Category:<br /><select class="search_input" ><option>Select Category</option></select></td>
    <td width="145" align="center"><br /><input type="submit" value="Search" /></td>
    </tr>
    <tr valign="bottom">
    <td>State/Prefecture:<br /><select class="search_input"><option>Select State/Prefecture</option></select></td>
    <td>City:<br /><select class="search_input"><option>Select City</option></select><br></td>
    <td width="145" align="center"><cfif adv is "expand">[ <a href="?page=search_jobs">less options</a> ]<cfelse>[ <a href="?page=search_jobs&adv=expand">more options</a> ]</cfif></td>
    </tr>
    <cfif adv is "expand">
    <tr valign="top">
    <td colspan="3">Employment Type: <input type="radio" checked name="EmpType"> Full Time <input type="radio" name="EmpType"> Part Time</td>
    </tr>
    <tr valign="bottom">
    <td colspan="3">Salary Range:<br /><select class="search_input"><option>$15,000 - $20,000</option><option>$21,000 - $25,000</option></select></td>
    </tr>
    <tr valign="bottom">
    <td colspan="3">Jobs Posted Within:<br /><select class="search_input"><option>30 Days</option><option>7 Days</option></select></td>
    </tr>
    </cfif>
    </table>
    </cfform>
     
    Nakirema, Mar 8, 2006 IP
  17. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #17
    This is an interesting case. In some sense, it is tabular. There is a distinct relationship between each form element and its corresponding label. But it's a relationship that can be expressed in the same context without tables, which means tables are not the ideal choice.

    All of that being said, I think this is one of those rare occasions where using tables in a questionable circumstance is not exactly a dealbreaker. I don't think you need to worry yourself too much over this one. The only thing that I could caution, for the sake of accessibility for those using text browsers/screen readers, is that the submission button be the last element in the table, and that you use <label> tags to define the relationship between form elements and inputs.
     
    the_pm, Mar 8, 2006 IP
  18. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I'm kinda confused about what you are saying about the submit buttom. As far as making it the last element in to table I can do that by changing the more options link and less options link with the button. However, every thing below the less option link will only appear if the user selects to have more options for their search. So that last half of the table will be there and not be there and be there and not be there... you know what I mean?

    Using Coldfusion... of course
     
    Nakirema, Mar 8, 2006 IP
  19. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Actually, now that I think about it, I think you can achieve the same effect by setting a tab order on your form elements. The point is that in the event your tables are not recognized (mobile browsing devices, text browsers, etc.), the submit button should be the final element in the form.

    ColdFusion shouldn't have anything to do with the form itself. It's just for processing the form, right?
     
    the_pm, Mar 8, 2006 IP
  20. Nakirema

    Nakirema Peon

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #20
    accually I will be changing the select elements to cfselect, pulling the select box content from a lookup table. I may make a whole seperate site for mobile devices. This is the english version of the site. We will have a japanese version as well and in Japan... everyone uses their cellphone to check out sites... That's alittle of topic, anyway.....

    I'll just stick with tables for column style designing.. The rest of my site is <div> and css..
     
    Nakirema, Mar 8, 2006 IP
Page 1 of 2