vb.org Archive - <table> <td> <tr> << Why are they thought of as "Evil"?

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - <table> <td> <tr> << Why are they thought of as "Evil"? (https://vborg.vbsupport.ru/showthread.php?t=218857)

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

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:

Code:

<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:

Code:

<DOCTYPE HTML>

<html>

 <table class="table1layout>

    <tr>

         <td class="td1">My text here!!!!</td>

    </tr>

 </table>

</html>

to..

Code:

<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?

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".

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.

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.

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)

Code:

<div class="page">

<div class="toptr">



<div class="td100">

<br />

<div class="tmain">

    <div>

        <div class="tcat">&raquo;CobraOS</div>

    </div>

    <div>

        <div class="menuboxmiddle">Welcome!</div>

    </div>



    <div>

        <div class="alt1">

        <div class="alt1">

            <div>



    

                

            <!-- INFO -->

            

            

                <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>&raquo;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:

Code:

.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!

Quote:

Originally Posted by JakeS (Post 1851526)

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:

HTML Code:

<div>    

    <div class="tcat"><strong>&raquo;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.

Quote:

Originally Posted by JakeS (Post 1851526)

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.

Quote:

Originally Posted by JakeS (Post 1851526)

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?

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.

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:

Code:

<table class="page">

<tr class="toptr">



<td class="td100">



<table class="tmain">

    <tr>

        <td class="tcat">&raquo;CobraOS</td>

    </tr>

    <tr>

        <td class="menuboxmiddle">Welcome!</td>

    </tr>



    <tr>

        <td class="alt1">

        <div class="alt1">

            <div>



    

                

            <!-- INFO -->

            

            

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

                <br /> <br />

               ~snip~

                </div>

            </div>



        </div>

        </td>

    </tr>



</table>

<br />

<td>

<table class="tmenu">

<tr>    

    <td class="tcat"><strong>&raquo;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 :(

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.

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 :)

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (1)bbcode_html_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01381 seconds Memory Usage 1,788KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (1)bbcode_html_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: