Forum Moderators: not2easy
If you didn't know, to emulate the columns of a table (get block elements beside eachother), one uses the float property. Floats are more flexible than table cells, so it can be quite useful once you understand how to use them. Another method is using display:inline-block, but that is still not entirely supported perfectly.
CSS -
#table1 { /* centers outer table */
width: 800px; /* or whatever works for you */
margin: 0 auto;
}
#table2 { /*center nested table */
width: 200px;
margin: 0 auto;
}
HTML -
<table id="table1">
<tr>
<td>
<table id="table2">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Of course, this is very simplified.
Marshall
Marshall
But, then again, all of these big websites tend to have horrible source code. I'm pretty sure they all use programs to make their sites :/
Of course, they probably wanted those different blocks to be vertically expandable - and that would have been much more of a pain with divs. Of course, they could have just made a table with several rows and only 1 column and made the columns with divs. That would have been the best way. But, w/e...
HYBRIDS FTW!
Static, relative, absolute, and fixed = anyone for a breif explanation and exmaple of when to use them?
Well, I've never used static so I don't know about that. But I can cover the others.
Relative:
when you use this positioning, the object takes up space in the normal flow of the page as if nothing had changed. However, by specifying its left and top attributes, you can move it around from wherever it normally would be positioned. Moving it won't effect the normal flow of the document, and everything else will act as if it hadn't moved - still leaving space for where it would normally be. Objects that are moved will cover up other objects that happen to fall underneath it.
IMPORTANT: objects with an absolute positioning that are inside of objects with a relative positioning will use the top left corner of the relative object as their origin point - (0,0).
Absolute:
Objects that have an absolute position are taken out of the normal flow of the document. They will cover up objects in the normal flow of the document and absolutely positioned objects that were defined before themselves. Using the left and top attributes you can place them wherever you want. This is especially useful when you place absolute objects inside of relative objects - as described above. For example, you can have a main container that it centered withing the document. Then you use absolute positioned objects to setup the different areas of the page (like header, link bar, content area, etc). Because the these absolutely positioned objects are within the relative object - you don't have to use javascript or anything like that to center them within the page.
Fixed
This is very similar to absolute positioning EXCEPT that they NEVER MOVE. If you scroll the page - these objects will remain in on the screen wherever you put them. You've probably seen these before - though rare. These objects will follow the you up and down the page - often link bars. While highly useful and amusing, they are not well supported. They are ways to make fixed objects without using the fixed positioning, but that's another topic. I don't suggest using these as they are not supported well.
Anyways, while learning to use div's is good you should learn how to combine tables and divs to create hybrids. There is some stuff which tables just plain out do better. For example - if you want to have a content area that has dynamic content and could expand vertically - it is much easier to move any elements underneath this area with tables (which does it automatically) vs divs which would require javascript.
It all depends upon what your doing really.
