<table> <td> <tr> << Why are they thought of as "Evil"? [Archive]

View Full Version : <table> <td> <tr> << Why are they thought of as "Evil"?

JakeS

07-18-2009, 03:16 AM

Hi Folks.

Just wondering here.

Why are <table> and it's partners hated so much? I mean a lot of people claim "To go css only"

I understand that, but you can anyway even if you use css.. for example:

<table class="table1layout">You could then use css to alter it's width size etc. And it'll pass the strict validation check.

So why is it so bad?

I still use tables when I make websites. As I don't see why I have to change this for example:

<DOCTYPE HTML>
<html>
<table class="table1layout>
<tr>
<td class="td1">My text here!!!!</td>
</tr>
</table>
</html>
to..

<DOCTYPE HTML>
<html>
<div class="div1layout">
<div>
<div class="div1">My text here!!</div>
</div>
</div>
</html>
Which basically, you end up with a div only document, and ends up getting confusing when coding when closing all the tags? (Eg make sure you close the right number of divs!)

But I really don't see any advantage to it. As it still passes validation with table. and yet, if I use div, sometimes it makes it a royal pain in the... to get the desired result as text will appear out of line etc.

So why are tables hated so much? Or was it simply started because some person prefered to just type div all day long?

Dismounted

07-18-2009, 11:21 AM

The world is moving to a place where data is separated from the presentation. ;) That is, the styling is stored in CSS. This is called semantic (X)HTML. Tables are not all bad - they should still be used for tabular data. Currently, tables are used heavily in positioning, etc. This is what is "despised".

JakeS

07-19-2009, 03:03 AM

I see.

So theirs not much choice eh? :p

I'm one of those people who use tables heavily in positioning. I'll go play with a website to see if I can replace them with a div, maybe some div will be able to work for me :-)

Thanks

EDIT:

Ok, switch everything to div and the site goes kboom and falls over :p

BTW: Is their any tags which do the same as tr and td? rather than just using div? as it's making it a royal pain.

Dismounted

07-19-2009, 04:05 AM

Don't think of just replacing tables, columns and rows with divs. For example, a list of links (e.g. navbar) should use use a ul (unordered list) element. Google around for some semantic HTML explanations.

JakeS

07-19-2009, 05:55 AM

Well googling, tells me all this is to do is so the computer can read it?! I want people to read my site, not computers :p

I got my header working fine, that looks as it used to now, using only divs, were ul & ol etc would not be very useful anyway.

However, I've now got 2 problems.

Main content box has a margin.. and is still there, BUT. It's now got a frigging white border in place of a margin were it never used to, but had the margin matching the colour needed. Is there a way to fix that?

And now, I used to have 2 tables next to each other, one on the left, one on the right.. now it sits under it now it's a div!

Way to fix that? :D

Heres my code (without header and footer, as the main index pulls them in with a php require)

<div class="page">
<div class="toptr">

<div class="td100">
<br />
<div class="tmain">
<div>
<div class="tcat">»CobraOS</div>
</div>
<div>
<div class="menuboxmiddle">Welcome!</div>
</div>

<div>
<div class="alt1">
<div class="alt1">
<div>



<div style="margin: 10px;">
~snip text content~
<br /> <br />
~and again it's just text~
</div>
</div>

</div>
</div>
</div>

</div>
<div>
<div class="tmenu">
<div>
<div class="tcat"><strong>»Screenshots</strong></div>
</div>
<div>
<div class="menuboxmiddle">Gallary</div>
</div>
<div>
<div class="alt1">
<video src="sources/video/front.ogv" controls="controls" class="frontvid">
Hmm. Seeing this text? Here's some possible reasons: <br />
<br />
1. Your blocking all webpage scripts <br />
2. Your browser does not like HTML5 video <br />
3. Your browser doesn't support mp4 or Ogg Vorbis
</video><br /> <br /><a href="watch.php">See More!</a>

</div>
</div>
</div>

<br />

</div><br />
</div>

Any idea what I'm doing wrong?

Some of the CSS being used in that particular template file:

.tmain
{
border: solid 1px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border-spacing: 0px;
width: 100%;
}
.tmenu
{
border: solid 1px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border-spacing: 0px;
width: 175px;
}
.page
{
background: #FFFFFF;
color: #000000;
padding: 0px;
border-spacing: 20px;
border: 0px;
margin-left: auto;
margin-right: auto;
width: 1000px;
font: 10pt sans, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.menuboxmiddle
{
background: #fff url(../images/headerbackgroundlinks.gif) repeat-x top left;
border: 1px;
color: #000;
padding: 0px;
height: 15px;
font: 10pt sans, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
}
.tcat
{
background: #0140a8 url(../images/headerbackground.png) repeat-x top left;
color: #FFFFFF;
border: 1px #000;
height: 27px;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 0px;
}
.alt1, .alt1Active
{
background: #F5F5FF;
color: #000000;
font: 10pt sans, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;

}

Think that's all.

PS: Sorry for the odd questions. I know it's not related to vB.. but I figured.. What better place to ask than a modification community? where most of the people modify templates all day :p

This worked fine when it was tables and td's etc.

I learn from example and from seeing code and trial and error.. a block of writing would just confuse me. Just so you know ;)

Thanks again!

Dismounted

07-19-2009, 07:14 AM

Well googling, tells me all this is to do is so the computer can read it?!
Kind of. Semantic HTML is the creation of HTML documents with the author's intended meaning (and a tag's intended meaning). The famous example is the use of tables for positioning. Tables are for tabular data, not to position things. Another is <i> and <em>. A by-product of this is the fact that spiders can "read" a site better.

Again, semantic HTML is not replacing all tables with divs. I can see in your code there are just random nested containers. An example is this:
<div>
<div class="tcat"><strong>»Screenshots</strong></div>
</div>
<div>
<div class="menuboxmiddle">Gallary</div>
</div>
A menu is a list of links, and therefore should use a <ul> (unordered list) element. That's the kind of stuff semantic HTML intends to be.
Main content box has a margin.. and is still there, BUT. It's now got a frigging white border in place of a margin were it never used to, but had the margin matching the colour needed. Is there a way to fix that?
Screenshot example please? Don't really understand the problem.
And now, I used to have 2 tables next to each other, one on the left, one on the right.. now it sits under it now it's a div!
Have you tried floating the containers?

1Unreal

07-19-2009, 09:02 AM

When they are used for layouts and positioning they create lots of markup which makes it harder to find bugs and things. Also divs have alot less markup when making a big app. This makes editing things easier.

JakeS

07-19-2009, 09:20 AM

I see.

I've attached 2 screenshots, one is how it's supposed to look, and is using tables. Other is using divs and is quite badly broken.

Also, Here is the original table code:

<table class="page">
<tr class="toptr">

<td class="td100">

<table class="tmain">
<tr>
<td class="tcat">»CobraOS</td>
</tr>
<tr>
<td class="menuboxmiddle">Welcome!</td>
</tr>

<tr>
<td class="alt1">
<div class="alt1">
<div>



<div style="margin: 10px;">~snip~
<br /> <br />
~snip~
</div>
</div>

</div>
</td>
</tr>

</table>
<br />
<td>
<table class="tmenu">
<tr>
<td class="tcat"><strong>»Screenshots</strong></td>
</tr>
<tr>
<td class="menuboxmiddle">Gallary</td>
</tr>
<tr>
<td class="alt1">
<video src="sources/video/front.ogv" controls="controls" class="frontvid">
Hmm. Seeing this text? Here's some possible reasons: <br />
<br />
1. Your blocking all webpage scripts <br />
2. Your browser does not like HTML5 video <br />
3. Your browser doesn't support mp4 or Ogg Vorbis
</video><br /> <br /><a href="watch.php">See More!</a>

</td>
</tr>
</table>

<br />

</td>
</tr>
As you can see pre-div it was not just duplicating tags.

Floating containers? Never heard of them x-x. care to provide some examples?

Also "menuboxmiddle" is simply the refer to css. originally made for the old side menu (Which is extinct)

Thanks!

PS: Attachments look awful after uploading them :(

Dismounted

07-19-2009, 10:58 AM

You can't just take an existing layout and "semanticise" it. (Well, you can, but it takes a lot of work.) You will probably be better off starting afresh, with guidance from the many websites out there who provide tutorials and the such.

JakeS

07-19-2009, 11:43 AM

Hmm ok. Well I guess it's back to the "drawing board" for me :D (Yes I really have one actually)

Considering tables are not "extinct" just yet. I've decided to roll out the table version at first (When it's complete). And then later on start work with a new one (Using semantic html) :-).

For me that's more convenient, as firstly, I don't basically throw away a whole website and at the moment my time on coding the website half is.. well in half (I got more than websites to code with this project :eek:)

Thanks guys for advise and such :)

cad2go

07-19-2009, 12:30 PM

I think a lot of people don't even know why they hate tables so much.

TWood

07-19-2009, 03:57 PM

Looking at your screenshots, I'd suggest you investigate the 'float' CSS property.

JakeS

07-19-2009, 04:48 PM

Hey folks.

Well me being me, I absolutly cannot stand "giving up" as I end up feeling like an idiot for the rest of the week :p.. So.. I did some research, and as a few here have said "use float" so I did and done some "quick learning".. and this happened.. PS: This is only div, and has no tables.

http://img39.imageshack.us/img39/117/screenshot6p.png

Stuck it on image shack now as this site made the last ones look awful. Also still got the margin issue :(

Thanks guys.

EDIT: All problems solved. All is working fine :-) Now to go convert the rest :-) Switched margin with padding.