12 replies to this topic

[Legion]

Many of you use tables. You, are the few who haven't learned to use the superior and far-more flexible <DIV> system. Not only can you develop stacked layout elements, but absolutely position them from the edges of the page, and position them relevant to related objects, or their standard position if the DIV was not used.
Div is short for divisions, structural building blocks within the code.

<DIV>!

A <div> element is most likely to be styled and positioned using CSS. Making a DIV relate to CSS is easy. Here's an example of it linking to the CSS via its ID, or the title that the CSS looks for. Of course, you'll need the HTML document to use an external stylesheet, but I think doing that is pretty self-explanatory. If anything, use google.

<DIV id="div1">

That links it to the appropriate "style.css" section. The CSS code would be something like this:

#div1 { style goes here; }

Styles are the visual and structural changes made to a standard DIV element. For instance,

#leftend { width: 16px; height: 24px; position: absolute; left: 10px; top: 0px; }

is a bit of code taken from the CSS of my site, prime cencored revora on his forum , actually. Let's break it down.

Width and Height specify how many pixels wide, and how many tall the DIV element is.
Position: Absolute; specifies that it is being positioned relevant to the browser window itself
Left:, Top:, Right;, and Bottom; all specify how many pixels away from the edges the DIV is. If you use none it will center. Each location of absolute positioning will automatically position it to the side specified, and how many pixels you put as the value will shift it over. So, my DIV style shown above would position it at the top left, but away from the left side 10 pixels.

If you were wondering what browsers support DIV tags, the answer is any browser which is Standard XHTML compliant. If you are confused as to what that means, here is a list of the standard browsers which support standard XHTML.

* Netscape 2, 3, 4, 6, 7
* Mozilla 1
* Firefox 1
* Internet Explorer 3, 4, 5, 6
* Opera 3, 4, 5, 6, 7, 8
* Safari 1
* WebTV/MSN TV
* AvantGo Palm OS
* AvantGo Windows CE

(Source: http://webdesign.abo...bltags_div.htm)

Thats the basic lowdown of DIV elements. One advantage is that DIVs load each picture/text seperately, so you dont have to wait for it all to be rendered before it is displayed. DIV's are fast, and they are supported by every modern web browser.

If something is off by 1 pixel, ONLY in Internet Explorer, or any other browsers that use the MSHTML rendering engine, don't be alarmed. This happens when you use absolute positioning, so here's how to fix it:

Make a new attribute, from the direction of the div having the problem. To make a 1 pixel IE only change, add an underscore before an IE only attribute, and add the 1 pixel difference that is needed, like so:

right: 10px; _right: 9px;

The 2nd attribute overrides the first, but only in IE.
Absolute positioning can be a pain in the ass to work with, but it pays off. IE has problems with it, and the Underscore trick is a little hack which can only be read by a browser that uses the MSHTML rendering engine. It can be used for any tag meant to be IE-only.


Have fun, and if you have any questions, please feel free to PM me them.

Edited by Legion, 18 July 2006 - 06:28 PM.

[Az3r^]

Really good tut, i never knew what Div tags did or how to use them. cheers

[Mastermind]

Many of you use tables. You, are the few who haven't learned to use the superior and far-more flexible <DIV> system. Not only can you develop stacked layout elements, but absolutely position them from the edges of the page, and position them relevant to related objects, or their standard position if the DIV was not used.

Either that or we find tables to be more consistent and flexible across browsers and make implementing a cross browser layout much easier.

And if tables are good enough for Amazon and Google, I think they're good enough for me.

[Legion]

DIV's are supported by all browsers.
EDIT: Added a section on IE-only hack for absolute positioning.

Edited by Legion, 23 April 2006 - 05:38 PM.

[Legion]

Recently updated the tutorial with a bit of useless information regarding the underscore hack.

[Bart]

i totally support ditching tables whenever it's possible. however, at this moment, technology hasn't advanced enough so that it's actually easier to use divs than tables.

there should be a variation of the table element (named grid, or something) which would be there for layout purposes only

IE and M$ messing things up as usual (like wrongly using the box model) doesn't help either :(

[Ingwe]

Many apologies for posting to a thread that has not been updated for over a year; however, I've had problems with div's as well (as far as cross-compatibility).

Oftentimes, you're forced to not use any border around floating div cells. Using positions works; however, it seems only with floating div cells that you can set, for instance, a footer, to avoid being thrown up instead of appearing below the floating div cells.

IE is sometimes confusing when it comes to floats, but there's always a way to beat some sense into it. Then when everything is updated with xhtml2, some things will have to be changed, etc.

Hopefully object will be more commonly supported in IE.

[Jeeves]

margin: -1px?

[CodeCat]

http://www.lupinia.n...out-example.htm

An extremely simple design using divs, yet as you can see there are quite a few shortcomings. Margins aren't collapsing properly (resulting in double margins), things aren't filling the proper height/width, etc. With tables, that layout would be a piece of cake.

[Ingwe]

Yeah, that's pretty much what I have going on here: http://www.phoenixga...at_mozilla.html.

I put that page up to test some stuff out. The -ONLY- problem(s) I have with my layout is...
1. 1,000 pixel width as a bare minimum (OMG)
2. In Internet Explorer and Opera, some of the stuff does, what I'd like to call, "pukes" out of the borders.

I have seen some sources online that say that tables are -completely- invalid Xhtml. Not necessarily.

Div layouts have a particular use - to have an asymmetric column system; however, tables do indeed have a semantic and defined purpose, and W3C isn't going to be letting those go in anytime in the near future, even in Xhtml 2. What they ARE getting rid of is -ANY- reference to the cellpadding and cellspacing attributes - attributes I'm proud to see go - it just added to the mess of things in a way. It's like what frameborder was to iframes (a deprecated element anyway). Tables have a specific purpose that are almost impossible to attain with divs (at this time that is).

CSS 3 is going to take care of cleaning some of that up.

The table tag, just like any other tag, needs to be used in a proper sequence or used when it is proper to use it.


You don't want to use a table like this:

<table><tr><td>Some code I could have just put in a division, paragraph, list, or whatever.</td></tr></table>

You should probably use it if you have something like...

This post has been edited by original author:
[[[BEGIN EDITS<<<=

<table>
<caption>Memberlist: Provides access to the current list of members and contact information.</caption>
<thead>
<tr><th>Username</th><th>Member Group</th><th>Email Address</th></tr>
</thead>
<tfoot>
<tr><td colspan="3">Email addresses are not viewable by guests. In addition, you must be registered to send a private message (pm) to a member on this list.</td></tr>
</tfoot>
<tbody>
 <tr><td>Member 1</td><td>Network Leader</td><td>Total Posts</td><td>...email address...</td></tr>
  <tr><td>Member 2</td><td>Network Admin</td><td>Total Posts</td><td>...email address...</td></tr>
</tbody>
 </table>

...and so on

A table is useful when one of the two following conditions (or opportunities) present themselves...
1. When you absolutely need a fluid grid layout (one that is NOT set in size, but is resizeable by the width of the viewport).
2. When you're dealing with tabular data (I try to make data come from XML a lot of the time these days, XSL is kewl).
=>>>/END EDITS]]] Reason for editing: original failed to outline the caption, thead, tbody, and tfoot that is available in semantic tables even up to -AT LEAST- Xhtml 1.0 Strict.

ADDITION:

Document Type Xhtml 1.0 Strict allows Elements in Table:

<!ELEMENT table

				   (caption?, (col*|colgroup*), thead?,			 tfoot?, (tbody+|tr+))>

			  <!ELEMENT caption  %Inline;>

			  <!ELEMENT thead	(tr)+>

			  <!ELEMENT tfoot	(tr)+>

			  <!ELEMENT tbody	(tr)+>

			  <!ELEMENT colgroup (col)*>

			  <!ELEMENT col	  EMPTY>

			  <!ELEMENT tr				   (th|td)+>

			  <!ELEMENT th	   %Flow;>

			  <!ELEMENT td	   %Flow;>

In addition, Xhtml 2's current draft adds availability for the "summary" element. The summary element within a table is almost like the title attribute commonly used for anchor (<a>) tags.
/END ADD

So what kind of pages would you expect to find tables? Hmm...perhaps tables of bans, error logs, statistics, member lists, etc.

With the display: table; and display: table-cell; properties being supported in the future (hopefully) by IE, divs or whatever you want will basically be able to become like tables. You're most likely to use the list format though, such as with...

Structure:

<ul class="table"><li>Cell 1</li><li>Cell 2</li><li>Hey I'm cell 3 haha</li><ul>

Style:

ul.table{display: table;}
  ul.table li{display: table-cell; }

Firefox seems to support it.


Another fun thing to have working for you, especially on a forum, is bbcode that you can make articles out of (or just clicking a button to get regular html -and- css - separated by two windows), so you're basically clicking to add what you'd normally type. I've been working on a javascript thing where you can click the code, throw it in two separate textareas (one for structure, one for markup), it gets thrown together and auto-tested. You get options such as <table class="randomclass"> and in the css area you get table.randomclass{ } area for later on formating your css. It sure is the lazy approach.

When css3 is fully supported across the browser universe, that will be a totally awesome day! The motivation for being into something like this is trying to be as far away from myspace coding as you can possibly get. Long gone are the days when tables with nested tables and so on would exist. Hail W3C, Hail CSS Zen Garden for showing so many people how to make really great stuff!


And remember, it's not tables that are invalid, it's the -common- use of them that is. Out with cellspacing and cellpadding, in with padding and margins for replacements. But for now we're left with border-collapse for the most part, but eh, not so bad.

Edited by Ingwe, 11 February 2008 - 12:48 AM.

[Jeeves]

You forgot the table headings and a caption, you bastard! Hear hear, though I think you could correct "1. When you absolutely need a grid layout." to "1. When you absolutely need a FLUID grid layout;" fixed is easy as pie to do with semantic use of xhtml and valid simple CSS

[Ingwe]

You forgot the table headings and a caption, you bastard! Hear hear, though I think you could correct "1. When you absolutely need a grid layout." to "1. When you absolutely need a FLUID grid layout;" fixed is easy as pie to do with semantic use of xhtml and valid simple CSS

Original post updated to reverse the obvious errors that were made. This post updated to reflect that said changes were made. Thanks for making me aware that this had happened. A good example for one law that should be observed on forums: Do NOT hesitate to correct someone if they are in error, particularly if someone's error is reasonably obvious.

Edited by Ingwe, 11 February 2008 - 12:50 AM.

[Ingwe]

I'm thinking that this thread is pretty useful. I might provide a little more on floating columns.

Another way of setting up columns...in Internet Explorer 7 and below divs set to an overall width of 100% will throw the last column below the others. In other browsers this doesn't happen, and it's because of a bad box model overall. So another way of making multiple columns is...

Setting up width classes for various widths that are commonly-used on your website layout. w100pc would be the class for 100% width and w050pc would be for 50%. Then floating columns could be set up as such:

Sample HTML:

<div id="section-1" class="pos-l-1">
	<div class="col-l w025pc">25% Column</div>
	<div class="col-l w030pc">30% Column</div>
	<div class="col-l w017pc">17% Column</div>
	<div class="col-l w027pc">27% Column</div>
	<div class="caption">Example 1</div>
	 <div class="col-l w050pc">50% Column</div>
	 <div class="col-l w025pc">25% Column</div>
	 <div class="col-l w007pc">7% Column</div>
	 <div class="col-l w017pc">17% Column</div>
	 <div class="caption">Example 2</div>
</div>

Sample CSS:

.pos-l-1{position:relative;left:0.5%} /* Sets all columns to the left by 0.5% since columns add up to 99% */
.pos-l-2{position:relative;left:1%} /* Just in case columns add up to 98% instead of 99% */
.col-l,.col-r{margin:0 !important;padding:0 !important}.col-l{float:left}.col-r{float:right} /* Floating columns, padding and margins nominal at 0. */
.clear-both,.visual-clear,.caption{clear:both} /* This is a visual clear (three classes for them for the purpose of an example), so that elements below the floating columns don't get mixed up with content below them. */
/* Widths used just for this example */
.w017pc{width:17pc}.w025pc{width:25%}.w027pc{width:27%}.w030pc{width:30%}.w050pc{width:50%}

In the above example, col-r class wasn't used because in this case, it's not really needed. All those columns will display in order as they should, without having to use tables. Positioning is great too, for certain things especially. Floating is good as well though.