[SOLVED] Tables

[Liquid Fire]

I still don't understand why the CSS wouldn't be the same for tables as for divs..

The issue in not css working with table, you can use css on table, the issue is table for layout itself.  I don't know any way better to explain than any of the people who have already tried to help you understand.  Let me try to give an example.

 

Lets say you build a site for a client with tables and you have a tr with td with site links going left to right.  Now lets say the client changes his mind and want the link to go from top to bottom.  This is something of a nightmare that i would not want to fix because of the use of tables.  you wold have to break the tr with td and have a tr for each link but also not break the rest of the site which would mostly have to use tables within tables which i take is really bad practice.  Now if the site links were designed with a ul/li and not tr/td and the css was properly code, you could change the list css attribute display(i think this is the correct one, someone correct me if i am wrong) for inline to block and add and padding of the width on the site links to the main body and BAM< YOUR DONE.  The rest of the site should move up to take the space on where the list used to be if the css is coded properly(just cause you use css does not mean it will work automatically).  You would not have to change a single line of html code(at least for this example).

 

The main issue for tables for layout is maintenance i a nightmare.  I am currently working with a site a few years old that uses tables in tables in tables and there are some part of the site that look a little funny but with the amount of tables is uses find the tr or td is next to impossible(but we have a new site nearly finished use css for the main layout).

[roopurt18]

How is

 

<table><tr><td>Link 1</td><td>Link 2</td><td>Link 3</td></tr><tr><td>Link 4</td><td>Link 5</td><td>Link 6</td></tr></table>

 

Worse then

 

<div><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li></ul><ul><li>Link 4</li><li>Link 5</li><li>Link 6</li></ul></div>

 

In most cases it is not.  However, in the table structure, a layout is implied by the tags, which is a horizontal layout.  In the div.ul.li structure, there is no implied layout; you are simply creating a division which contains an unordered list.  Now, the browser will give this a vertical layout that you are free to change with appropriate CSS.

 

For 99% of today's use that they are practically equivalent.  But let's say you went with the table layout and created a horizontal navigation menu.  Eventually your boss comes to you and says, "10% of our users are visiting the site through alternate browsing devices, such as PDAs and hand-helds.  We are receiving numerous complaints about the way the site displays in those devices, especially the width of the menu, and are even losing customers."

 

Now you are tasked with creating an alternate layout for the page.  Since you went with the table-based design, you now have to create two separate HTML templates.  Whereas if you'd gone with the div.ul.li and CSS approach, you just create an alternate CSS file to override how that one element displays (from horizontal to vertical) and append it to the page for those users.

 

The persistent goal in programming is segregation and performing tasks through layers.  Your pages should be accessing the database through a data abstraction layer.  Your Javascript should not be present in your HTML.  Basically, while you are certainly free to do otherwise, the "best practice" in web design is to remove formatting information from HTML and use CSS.  If you are unable to buy any of the arguments for why this is the best practice, then just take it on faith and try to adhere to it.  Eventually things will fall into place.

[roopurt18]

Azu, I'm not posting this in any way to be malicious or mean, but I just remembered a couple things about you that may explain why you're having such a hard time wrapping your head around the difference.

 

In the "best editor" poll you said this:

And I HATE indention. It's a waste of my computer's precious little bytes!

 

In the MySQL forum you posted this code:

set_time_limit(120);
$a0=timed_query("select `id` from `db`.`Topics`");
while($b0=mysqli_fetch_row($a0)){$q=0;$x=0;
$x=mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b0[0]"));
if(!$a1=timed_query("select `id` from `db`.`Topics` where `parent`=$b0[0]"))break;
$q=mysqli_num_rows($a1);
while($b1=mysqli_fetch_row($a1)){
if(!$a2=timed_query("select `id` from `db`.`Topics` where `parent`=$b1[0]"))break;
$q=$q+mysqli_num_rows($a2);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b1[0]"));
while($b2=mysqli_fetch_row($a2)){
if(!$a3=timed_query("select `id` from `db`.`Topics` where `parent`=$b2[0]"))break;
$q=$q+mysqli_num_rows($a3);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b2[0]"));
while($b3=mysqli_fetch_row($a3)){
if(!$a4=timed_query("select `id` from `db`.`Topics` where `parent`=$b3[0]"))break;
$q=$q+mysqli_num_rows($a4);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b3[0]"));
while($b4=mysqli_fetch_row($a4)){
if(!$a5=timed_query("select `id` from `db`.`Topics` where `parent`=$b4[0]"))break;
$q=$q+mysqli_num_rows($a5);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b4[0]"));
while($b5=mysqli_fetch_row($a5)){
if(!$a6=timed_query("select `id` from `db`.`Topics` where `parent`=$b5[0]"))break;
$q=$q+mysqli_num_rows($a6);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b5[0]"));
while($b5=mysqli_fetch_row($a5)){
if(!$a6=timed_query("select `id` from `db`.`Topics` where `parent`=$b5[0]"))break;
$q=$q+mysqli_num_rows($a6);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b5[0]"));
while($b5=mysqli_fetch_row($a5)){
if(!$a6=timed_query("select `id` from `db`.`Topics` where `parent`=$b5[0]"))break;
$q=$q+mysqli_num_rows($a6);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b5[0]"));
while($b5=mysqli_fetch_row($a5)){
if(!$a6=timed_query("select `id` from `db`.`Topics` where `parent`=$b5[0]"))break;
$q=$q+mysqli_num_rows($a6);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b5[0]"));
while($b5=mysqli_fetch_row($a5)){
if(!$a6=timed_query("select `id` from `db`.`Topics` where `parent`=$b5[0]"))break;
$q=$q+mysqli_num_rows($a6);
$x=$x+mysqli_result(timed_query("select count(*) from `db`.`Posts` where `question_id`=$b5[0]"));}}}}}}}}}
timed_query("update `db`.`Topics` set `subs`=$q,`reply`=$x where `id`=$b0[0]");}}
exit;}

 

From an outsider looking in, organization and maintainability do not appear to be things that you concern yourself with.  Separating the layout from the markup (i.e. dropping tables in favor of generic tags and using CSS to apply layout) is an organizational thing.

 

I don't believe in God, but if I did, the first prayer I'd make is that I was never asked to maintain anything written by you.

[neylitalo]

And also I thought one of the good things about CSS is that you can use it on any element you want to.. so why wouldn't you use the same CSS with tables as with divs? I still don't understand.

 

Oh, you can use it on any element that you want to - the problem is that it will do crazy things with some elements, and it won't do anything with others. Would you put a font-weight style on an image? I should hope not, it's not going to do anything at all.

 

When I say that you're using CSS poorly if you would have the same CSS with divs and tables, I'm referring to the re-usability that I was talking about earlier, and I'm not necessarily talking about layout anymore. CSS has the wonderful ability to save you a whole lot of typing, with your ability to define classes, assign the same traits to different classes at once, etcetera. If you have the same CSS with divs that you have with tables, the only conclusion I can make is that you're not taking full advantage of the power that CSS provides - if you're using more simplistic elements like divs (You have to admit that tables are a very complex creature), you can create "objects", elements that have a style that's already been created. With a simple "<div class='imageCaption'>This is an image caption</div>", you can assign colors, borders, link hover effects, and any number of things! And the next time you want to create an image caption, it's the same thing - the only thing you have to remember and type is the class.

 

And if I haven't done a good job explaining what I mean.. okay.. let's say you add this CSS to your website;

div,ul,li{display:table}

How would this mess up the accessibility and bloat the code and stuff? Did I ask my question right this way? Or am I still not being clear? *confused*

 

I believe the display:table attribute is designed for an entirely different purpose - I've never used it, or any of its variants (table-row, inline-table, etc.), but this reference page seems to indicate that it's not going to do much of anything.

[Azu]

Thanks guys! I think I understand now ^^

 

It's much easier to update and modify the layout if you use divs instead of tables. With tables you have to change all of the HTML and with divs you just have to modify the CSS a little?

 

I think I'm just going to stick with the table for this part then since I like it how it is and don't plan on changing it a bunch and I don't think it can be aligned if I use div.

[Daniel0]

Your site will also load faster if you separate content (HTML), presentation (CSS) and behavior (Javascript). If you do that then the browser will only have to download the HTML each time while the CSS and Javascript files are cached. If you use tables, then part of the presentation is moved into the content and therefore forcing the user to download it each time.

[Azu]

You mean because <table> is two letters longer then <div>?

[roopurt18]

No.

 

The HTML will be in one file, the Javascript in another, and the CSS in another.

 

The browser will used cached files as long as they have not changed.  So if you style your sheet you can constantly modify the content without changing the style and the browser will never have to download the style sheet (until you modify it).

[Barand]

For an excellent demo of what can be achieved just by changing the CSS, see

 

http://www.csszengarden.com/

[Daniel0]

To the table-people: Try to create this using tables: http://www.webdesignerwall.com/tutorials/advanced-css-menu/ (final result: http://www.webdesignerwall.com/demo/advanced-css-menu/). Also note how small the HTML is:

<ul id="menu">
<li><a href="#" class="home">Home<span></span></a></li>
<li><a href="#" class="about">About<span></span></a></li>
<li><a href="#" class="rss">RSS<span></span></a></li>
</ul>

[Azu]

No.

 

The HTML will be in one file, the Javascript in another, and the CSS in another.

 

The browser will used cached files as long as they have not changed.  So if you style your sheet you can constantly modify the content without changing the style and the browser will never have to download the style sheet (until you modify it).

Why can't I put my Javascript and CSS in external files if I am using tables?

 

 

For an excellent demo of what can be achieved just by changing the CSS, see

 

http://www.csszengarden.com/

Why can't I style my website with CSS if I am using tables?

 

 

To the table-people: Try to create this using tables: http://www.webdesignerwall.com/tutorials/advanced-css-menu/ (final result: http://www.webdesignerwall.com/demo/advanced-css-menu/). Also note how small the HTML is:

<ul id="menu">
<li><a href="#" class="home">Home<span></span></a></li>
<li><a href="#" class="about">About<span></span></a></li>
<li><a href="#" class="rss">RSS<span></span></a></li>
</ul>

Why can't I use CSS hover effects if I am using tables?

[Daniel0]

Why can't I put my Javascript and CSS in external files if I am using tables?

You can, but if you use tables for presentation then you haven't separated content from presentation.

 

Why can't I style my website with CSS if I am using tables?

You can, but if you look at the HTML source then you'll see that it remains the same. It's only the CSS that changes.

 

Why can't I use CSS hover effects if I am using tables?

You can, but what about the people without Javascript. Actually I wasn't talking about the rollovers but the design in general. It would take much more HTML to do it in tables.

 

--

 

I don't think you got the point of most of what people in this topic said. Re-read them

[Azu]

Okay but I still don't see any differance of the actual results.

 

All I'm hearing is "It's easier to make stuff without tables" and "If you use tables you will do stupid things that will mess up your site" and "CSS rox0rz your box0rz"..

 

 

 

I still can't think of any way that a website will be changed by doing a search and replace to replace all "div" with "table", "ul" with "tr", and "li" with "td", other then it making stuff be aligned.

If there is another differance that this will make please explain.

 

The only other differance I can think of is that putting table instead of div uses 2 more bytes of code.

 

I download that page and did a search and replace to replace all "div" with "table", "ul" with "tr", and "li" with "td" and it works fine. With tables. So please explain..

 

And what do you mean "what about people without Javascript"? You don't need javascript enabled for tables..

[fenway]

Okay but I still don't see any differance of the actual results.

 

All I'm hearing is "It's easier to make stuff without tables" and "If you use tables you will do stupid things that will mess up your site" and "CSS rox0rz your box0rz"..

 

I still can't think of any way that a website will be changed by doing a search and replace to replace all "div" with "table", "ul" with "tr", and "li" with "td", other then it making stuff be aligned.

If there is another differance that this will make please explain.

 

The only other differance I can think of is that putting table instead of div uses 2 more bytes of code.

 

I download that page and did a search and replace to replace all "div" with "table", "ul" with "tr", and "li" with "td" and it works fine. With tables. So please explain..

 

And what do you mean "what about people without Javascript"? You don't need javascript enabled for tables..

I'm going to lock this thread very soon... Azu, you haven't taken in any of what all of the contributers to this thread have shared with you.  If you really can't see the power of CSS, don't use it... but don't try and claim that it isn't very powerful.  Bottom line -- if you're not displaying tabular data, don't use tables.  THE END.

 

Separating content from layout is the reason that there are dynamic, database-driven web sites -- CSS is just one more layer.

 

Think long and hard before responding...

[~n[EO]n~]

Now, this thread got to long and interesting, so I searched and found one good site, read it and found out

 

The future of the web is "FULL CSS", and not TABLES, so you should start learning it now.

 

Tables vs CSS:  PROS and CONS - 15 points to consider before choosing a traditional table website or a CSS tables website.(i.e. CSS-P - CSS Positional or CSSO - CSS Only website) - 01 - Pros and Cons, advantage and disadvantages (or Tables vs. Divs

 

link is

 

http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx

 

hope this is useful...

[roopurt18]

Seriously, wtf.

 

The future of the web is "FULL CSS", and not TABLES, so you should start learning it now.

I think you missed the point of the "article."

[Azu]

Okay but I still don't see any differance of the actual results.

 

All I'm hearing is "It's easier to make stuff without tables" and "If you use tables you will do stupid things that will mess up your site" and "CSS rox0rz your box0rz"..

 

I still can't think of any way that a website will be changed by doing a search and replace to replace all "div" with "table", "ul" with "tr", and "li" with "td", other then it making stuff be aligned.

If there is another differance that this will make please explain.

 

The only other differance I can think of is that putting table instead of div uses 2 more bytes of code.

 

I download that page and did a search and replace to replace all "div" with "table", "ul" with "tr", and "li" with "td" and it works fine. With tables. So please explain..

 

And what do you mean "what about people without Javascript"? You don't need javascript enabled for tables..

I'm going to lock this thread very soon... Azu, you haven't taken in any of what all of the contributers to this thread have shared with you.  If you really can't see the power of CSS, don't use it... but don't try and claim that it isn't very powerful.  Bottom line -- if you're not displaying tabular data, don't use tables.  THE END.

 

Separating content from layout is the reason that there are dynamic, database-driven web sites -- CSS is just one more layer.

 

Think long and hard before responding...

I really don't understand what you are trying to say sorry.

 

I think I might have explained something wrong. I'll try again.

 

Right now I am using tables, and CSS (which I like A LOT) and a little bit of javascript.

I'm considering using divs instead of tables since a lot of people say that tables are bad.

I am just trying to ask exactly what benefits I will get if I just replace all instances of "<table>" with "<div>", and replace all "<tr>" with "<ul>", and all "<td>" and with "<li>". This is all that I am trying to ask. And I can't find any straight answers to this question.. I'm sorry if it was answered but I can't find the answer..

 

And why do you keep saying that I am saying that "CSS is bad"? I never said that.. I love CSS!

[~n[EO]n~]

I think you missed the point of the "article."

Yeah sorry, i didn't read all, did you read ?

 

When i googled, I found this

http://www.phpfreaks.com/forums/index.php/topic,86595.0/wap2.html

 

LOL, this was a long thread too...

[jcombs_31]

I am just trying to ask exactly what benefits I will get if I just replace all instances of "<table>" with "<div>", and replace all "<tr>" with "<ul>", and all "<td>" and with "<li>". This is all that I am trying to ask. And I can't find any straight answers to this question.. I'm sorry if it was answered but I can't find the answer..

 

The easiest way to explain it would be to really think of how HTML was meant to be interpreted by the browser.  Tags were designed for specific purposes.  You don't just change <tr> to <ul>

 

<ul>should only be used for an unordered list

<ol>would be used for an ordered list

<table> would be used for a table along with the sub tags <tbody><theader><tr><td> etc.

<p> would be used for a paragraph

<div> would be used for a block element to be contained seperately.

 

Instead of wrapping lots of <tables> to achieve a specific design, you can use the tags as they were meant to be used and style them separately with a CSS file. 

 

You may be confused because some people make <div> soup that looks just as messy as a table.  You shouldn't use CSS just for the sake of it, the page should be coded as it was designed to be when HTML was created. 

 

When you create a form you should be able to style the different form elements without adding any unnecessary markup.  Style the form element, along with the fieldset, labels, inputs, and legends. 

 

People began to create pages with tables because designs became more graphics intense, and tables were the only way to get everything to look right.  Since then, is was realized that web design was not only text, and needed to be styled appropriately.  CSS was born and browsers began to really support it, so it is time to move away from the table hack to get things to look like you wanted.

[Azu]

Thank you, but I still don't understand what the benefit will be if I do this.. x_x

 

I mean besides "you are supposed to do it this way, this is how it is meant to be, it is better"..

 

I'm just looking for like what exactly the benefit will be..

 

I mean I know tables "aren't supposed to be used this way", but my question still isn't answered I think.. :-/

 

What EXACTLY will the benefits be of me just replacing the tables with the divs?

 

Like if there is a certain screen reader that this will make it work in that it wouldn't work in with tables, for example, then what is it called? Etc..

 

 

P.S. and how will I make sure that it will stay lined up with the divs like it does with the tables?

[fenway]

I really don't understand what you are trying to say sorry.

Actually, you don't understand anything that anyone is trying to say.... with CSS and DIVs, you can convert a 3-column layout to a 3-row layout in about 10 seconds.  With TABLEs, you'd to have recode the entire page.  Simple enough?  If not, I'm sorry, I don't think anyone will be able to help you.  You're obviously missing the point -- it's not a different way to draw out a table, it's that using a table to layout anything other than a table is misguided.

[Azu]

I understood about being able to modify it faster.

 

That's not what I am asking though.

 

I don't care at all which one is easier/takes less time to do.

 

I just want to know which one is BETTER and why.

 

Sorry if I worded my question wrong x_x

[zq29]

This thread is hilarious, I just have to get in on it!

 

I understood about being able to modify it faster.

 

That's not what I am asking though.

 

I don't care at all which one is easier/takes less time to do.

 

I just want to know which one is BETTER and why.

 

Kind of a contradiction, don't you think. You've asked which is better and why, others have pointed out to you that divs are better than tables for non-tabular data, because they are faster and cleaner to work with.

 

So, to clarify:

 

Q: Which is best?

A: DIVs

 

Q: Why?

A: Because they are faster to originate and modify, they're easier to read because of the cleanliness, future compatibility and standards compliance. Just a few of the many pointed out benefits.

 

And, it's not a case of just swapping <table> for <div>, <tr> for <ul>, <td> for <li> - Where are you getting this idea from?

[roopurt18]

I think you are beyond help in understanding this Azu.  If you can't understand the benefits of adding whitespace to your code, there is little hope of you seeing any benefit to this way of doing things.  But I will make one last attempt via an analogy.

 

Let's say you and I were in a room and I told you to close your eyes.  Next I told you to hold out your hand so I could put a piece of candy in it.  You close your eyes, hold out your hand, and I kick you in the nuts.  Aside from being in pain, you'd likely be confused.  "Why did he kick me in the bollocks when he said to hold out my hand?"

 

That is how the blind person using a screen reader feels while looking at a table-based site.  They are being told by the screen reader that part of the page is one thing, but then being given another.  The experience for them is confusing and painful.

[GingerRobot]

Haha, very interesting analogy there!

 

On a final point, you seem to be confused on another issue Azu. You keep referring to a feelig that tables are bad. Tables are not the invention of the devil, contrary to popular belief. Tables should be used for their purpose - using them is not bad, if you are using them for the right reasons!

 

I feel to make any other point would be to completely re-iterate what everyone else has said. So i wont.