Jump to content

why is HTML 5 so anti use of tables it appears?


Notretsam
 Share

Recommended Posts

So looking into changing a website coded with HTML 4.01 Transitional to HTML 5

 

From what I seen so far, its very anti use of tables, which I find baffling.

 

I noticed on http://www.w3schools.com/html/html_layout.asp , it says a bottom that it not recommended to use tables for layout, some google searching I did led me to a few web pages saying the same. I realize since am self taught designer, that maybe am missing something, so why am here asking.

 

my question is why?

 

Far as I care , tables have always been great for laying out a page and always been better than using DIV, as DIV can be very awkward to get content positioned where you want it, I always found tables easier and quicker to use.

 

Below is example of how I structure

<body>
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" class="innerframe">
  <tr>
  <td align="center"><?php include("surrond/header.php"); ?></td>
  </tr>
  </table>
  <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
  <td> </td>
  </tr>
    <tr>
  <td> </td>
  </tr>
  </table>
  <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
    <td>
<?php include("surrond/nav.php"); ?>
	</td>
  </tr>
  </table>
  <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" class="innerframe">
  <tr>
  <td> </td>
<td> </td>
</tr>
  <tr>
  <td width="1%"> </td>
<td class="navbar" width="20%"> </td>
<td width="78%" align="center"><h3 class="row"><?php echo "$corpname"; ?> - Add Show Image</h3></td>
<td width="1%"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" class="innerframe">
<tr>
<td width="2%"> </td>
<td> </td>
<td width="2%"> </td>
</tr>
    <tr>
  <td width="2%"> </td>
  <td>
  <?php 
  include("account/company/shows/addshowimage.php");
 ?>
	</td>
  <td width="2%"> </td>
  </tr>
      <tr class="footer">
  <td width="2%"> </td>
  <td align="center">
<?php include("surrond/footer.php"); ?>
  </td>
  <td width="2%"> </td>
  </tr>
  </table>
</body>

This to me is perfect, I can include header, navigation and footer into the page, which means I only got one page to edit/update when I make a change.

 

An then I have the main content page which is also included, all the pages included are within folders which are organizied in a way I can easily locate what I need.

 

I have a main table on this page which I use percentages for widths, so it auto resizes to a visitors screen resolution,

 

I do use tables on pages that are included which the table width is 100%.

 

The validator.w3 states that width and align tags for tables is now obsolete which completely baffles me on why, but I have found that I can use CSS to assign the widths instead.

 

Center alignment is a whole other story and seems impossible, but certainly much more tricky than align="center" was.

 

so can someone explain to me why HTML 5 is so much better when it seems to be anti use of tables?

 

On surface HTML 5 with header, nav, section and footer tags looks great, but I find it baffling that table tags like align and width are now obsolete in HTML 5.

Edited by Notretsam
Link to comment
Share on other sites

Table CANNOT easily change layout (require changing colspan, rowspan only achievable through js) from a desktop layout to tablet/moble layout wether in portrait or landscape veiw. While using other none restricted html elements you can change layout for instance desktop 3 column layout, to 3 row layout of same content to ideally fit a moble device without js, which also can be disabled.

 

These are usually achieved using percentage width, and media queries to adjust width depending on device widths.

Link to comment
Share on other sites

Table CAN easily change a layout

 

I have never used colspan or rowspan , so can't speak to that

 

an my designs based on what I showed above have ALWAYS worked well on mobile phones

 

 

I have been playing around today with HTML 5 using header, nav, section and footer.

 

Getting parts of section area to align in center is a right pain, but with a table and align="center" tag, it easy and simple, but suddenly this isn't good enough in HTML 5, which makes no sense to me why.

Link to comment
Share on other sites

Change two td cell row into one single td that fill the whole row then! Your design is very basic, so why use tables?

 

Tables are used for showing tabular data only, they load differently than other elements as each table and content is looped through twice before it and content is fully loaded, they cause bloat because of tr, nested table elements.

 

Styling using align="center" is obsolete because it been superceded by css text-align: center;.

 

The alignment of section can achieved using css text-align or margin: 0 auto; depending on element used or styling applied to it such as display: block/inline/inline-block, so you just need to LEARN the proper method to properly align elements.

Link to comment
Share on other sites

CSS text-align center doesn't work very well it appears.

 

http://wrestlestarz.com/index.php

 

am looking for the login form and logo + bulleted list to be aligned in center but text at bottom to be aligned to the left.

 

text-align only seems to work with text, doesn't seem to align anything else in center, like a table.

 

I have tried display, the header uses display:table-cell;, I do agree I need to learn how to align elements with CSS , but still say align="center" tag seems much easier and quicker to use.

 

 

my design seems very basic? then I guess basic is best way to design then , because I always found way I design to be very efficient and work on all devices.

Edited by Notretsam
Link to comment
Share on other sites

Like i said it depends on element and styling of that element, obviously this is why text-align does not work.

 

Fine! If you wish have a basic boring uncomplicated layout in all pages, that uses tables, which you have been informed that is tbe wrong way to go, and you can't be bothered to learn properly how to style html element for non table layout design, without given up on first hurdle, you stick to it! And stay with tables.

Link to comment
Share on other sites

I have learned the proper way to layout a page that works on all devices , its called using tables.

 

An didn't I say I been playing around with HTML 5 tags, header, nav, section and footer today? That should show you, that I am trying to adapt to HTML 5.

 

Am asking why HTML 5 is so anti-table when "clearly" there is nothing wrong with them, if there was something so wrong with using tables, then W3 validator would flag table as an error. Even w3 school page I linked in first post states creating layout with tables is not wrong, but just not recommended.

 

So far nothing you have said makes me think tables is the wrong choice,

 

I do appreciate the replies, but just because you and others think tables are wrong to use, doesn't mean they are. There is valid reasons for tables, which is why am baffled on table tags width and align being made obsolete, I see no logical reason for that, otherwise am stating I think these tags being made obsolete is wrong.

 

I posted here because am open minded enough to know I could be wrong and missing something, I thought via discussion with members here, maybe that lead to me seeing the issue with tables, so far it hasn't.

Edited by Notretsam
Link to comment
Share on other sites

1) CSS/HTML layout in a MORE complicated layout where several columns are used it is more manageable, easier to read and edit, easier to make responsive to different sized devices compared to using a table layout.

 

2) Tables load differently than other elements as each table and content is looped through twice before it and content is fully loaded, so rendering it slower which can be problem for low band devices, while HTML/CSS render top to bottom once.

 

3) Can be bloated with tr, nested table elements, usually not required using other html elements reducing bandwidth.

 

4) SEO and accessibility problems for visual impaired using screen readers can have issue with tables because they don't necessary follow left to right rule in a more complicated layout, unlike when using HTML5 elements header, section, articles, footer, this is a MAJOR reason to move away from tables in my opinion, unless you are one of these people who don't care about such things.

Edited by dsonesuk
Link to comment
Share on other sites

OK that is some facts I certainly wasn't aware off , especially number 4 and first I ever heard that content is looped through twice, which seems strange to me.

 

 

Are you able to use <section> more than once on same page? I presume you can't

Edited by Notretsam
Link to comment
Share on other sites

Tables are extremely difficult to maintain. Let's say you have a website with 50 pages (this is actually below average for many websites). Let's say you decide to change from a three column layout to a two column layout. You'll find yourself going through 50 pages to fix it. With CSS, it's as simple as changing a few rules on one CSS file (unless you're using bootstrap, which puts all the presentation back into the HTML.)

 

This is also the same reason things like bgcolor and align attributes are obsolete: The stylesheet can use a couple of rules to do this on your whole site instead of manually going through 50 pages changing the value of align attributes all over the place.

 

There are also the accessibility problems mentioned before and browser rendering problems, and the fact that tables cannot scale for mobile devices which are more common today than desktop computers are.

 

Both id and class can be used to select elements. id can only be used once on the page to mark a unique element, class is used to give multiple elements the same style.

Link to comment
Share on other sites

got to say am loving header, nav. section and footer tags, so easy to use an adjust.

 

http://wrestlestarz.com/index.php

 

fully coded without tables.

 

sadly had to use div tag in header, as wanted the larger image on the right to auto adjust to the screen res viewer using.

 

I also used css3 multiple columns to get logo and list (with tick images) into two columns, but noticed it doesn't work with IE9 or below. do many people still use IE9? I could google that but sure someone have a rough idea here on that.

 

Link I used to see how that done: http://www.w3schools.com/css/css3_multiple_columns.asp

 

thank you dsonesuk

Link to comment
Share on other sites

Ingolme

 

I see where you coming from but completely disagree about tables being hard to maintain , a site am upgrading to HTML 5 has 642 files (looked at windows properties for folder). Not all files are off course got table usage, but all pages on site was coded with tables, with exception of PHP processing with MySQL pages, was setup in a way for me to easily maintain site.

 

I still think tables are not as bad as people make them out to be, but the HTML 5 layer tags (header,nav, section, footer) are much better for laying out a page, an dsoneuk point on accessibility problems for visual impaired using screen readers was enough to convince me on not using tables now.

Link to comment
Share on other sites

Note: All browsers have different default margins, padding, its best practice is to zero all these, and redefine them to your requirement so ALL browsers will your set margins and padding etc.

 

EXAMPLE: the body even has a margin of 10 to 12px depending on browser.

 

You can find reset css that do this all for you, just google.

 

There is no need to use br tags for spacing? that what margins and padding is used for.

 

I don't know why you used a div in header? I removed it and got identical result using firebug.

 

By the way, there is no reason not to use div tags as outer wrapper container, divider of content if you still wish to allow for IE9 (Chinese hacked windows stiil use IE8/9).

 

block elements will fill the width available to to them, using width: 100%; on these elements has its drawbacks as any margins/padding/borders width is added to 100% width, which results in a scrollbar appearing.

Edited by dsonesuk
Link to comment
Share on other sites

yeah can take out div in header, which am pleased about, don't like using div. no idea why I didn't think of that.

 

just seemed easier to quickly add some <br> tags to push some content down, maybe able to use margins and padding, but <br> does work. Guess that a each to there own thing.

 

see what you mean about not adding width in the header etc tags within CSS, took that out.

 

Pretty much copied the header etc listed on this page, http://www.w3schools.com/html/html_layout.asp , so presumed the width was needed.

Link to comment
Share on other sites

One thing worth noting that I believe applies is SEO / page ranking. A search engine like Google will be more likely to promote a website that uses semantic elements to describe the layout of a page over one that uses something non-semantic like tables. Tags like header, nav, footer, article, h1-h6, p, etc more accurately describe the content of your page. This can also benefit users who may accessibility issues as screen readers will most likely favor content rendered semantically. Tables are, unsurprisingly, for tabular data. In the past they were all we had so we used them. The web has advanced in years to support better definitions of standards and separation of concerns, and now all you really need is some valid and semantic HTML and some well structured CSS and you can easily create a site that is responsive, easy to maintain, and scalable.

Link to comment
Share on other sites

so am curious when do people here think its appropriate to use tables in designs ?

 

http://wrestlestarz.com/signup.php

 

The form on this page, usually I would use a table for the form, have the text in left column and textfield in right column, and center align it.

 

Have tried using the CSS column-count but just isn't sitting right or way I want it.

Edited by Notretsam
Link to comment
Share on other sites

To show data in tabular layout single row read left to right.

 

Destination, price per week, price after 2 weeks, accommodation, catering.

 

Wrap div around label and text field, sent width of label to match width or width+ of longest label text, add margin/padding and they should match and line up.

Link to comment
Share on other sites

Because if it is a single row of data, screen readers won't have a problem reading it, when using a more complicated layout the left to right reading rule is more likely to be fragmented and make less sense when read back.

 

You just have to learn how to manipulate elements types block, inline and use css to get final result you require.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>WrestleStarz - Wrestling Community</title>
        <meta name="description" content="Wrestling community website for those that have grown up watching wrestling.">
        <link href='http://wrestlestarz.com/theme/themes/blue.css' rel='stylesheet' type='text/css'>
        <style>
            body {margin: 0; padding:0;min-width: 320px;}

            body .twocolumn div   {font-size: 12px;}


            #wrapper {

                margin: 0 15px;

            }
            header, nav, section, footer {margin:0; width: auto;}

            nav {
                height: 25px;
                line-height: 25px;
                margin-top: 27px;
                overflow: hidden;

                padding: 0 5px;
            }
            h1 {
                margin: 18px auto;

            }
            section {
                margin-top: -14px;
                overflow: hidden;
            }
            .twocolumn {
                -moz-column-count: 1;
                -moz-column-gap: 0px;
                -webkit-column-count: 1;
                -webkit-column-gap: 0px;
                text-align: left;

            }

            .twocolumn {
                font-size: 0;
                margin: 0 auto;
                max-width: 700px;
                min-width: 260px;
                text-align: center;
                width: auto;
            }
            .twocolumn > div {text-align: left;}

            .twocolumn div {width: 50%; display: inline-block; min-width: 264px; vertical-align: middle;}
            .twocolumn div:first-child img {max-width: 100%; height: auto;}
            .twocolumn div:first-child + div p {overflow: hidden;}
            .twocolumn div:first-child + div p img {float: left;}

            .twocolumn div:first-child + div p img + span {
                display: block;
            }


            .twocolumn div > * {
                margin-left: 20px;
                margin-right: 20px;
            }

            .contentleft {text-align: left;}

            section > * {
                padding: 0 5px;
            }

            #myform > div {margin: 5px;}
            #myform > div  b{width: 200px; display: inline-block; width: 9em; text-align: left;}

            footer {margin: 1em 0;}
            footer b {display: block; margin-top: 1em;}
        </style>

    </head>
    <body>
        <div id="wrapper">
            <header>
                <img src='http://wrestlestarz.com/images/wslogobg.png' height='150' alt='WrestleStarz' class='headerlogo'><img src='http://wrestlestarz.com/images/header3.png' height='150' alt='wrestling community' class='headerflyer'>
            </header>
            <nav>
                <div id="tabshome">
                    <b id='current'><a href='http://wrestlestarz.com/index.php'> Home </a></b> <a'>http://wrestlestarz.com/index.php'> Home </a></b> <a href='http://wrestlestarz.com/signup.php'> Sign Up </a> 
                </div>
            </nav>
            <section>
                <h1>Welcome to Wrestle Starz</h1>
                <form id="myform" action="theme/fasttrack.php?do=fasttra" method="POST">
                    <div>
                        <span class="style1">*</span><b>Wrestler Name:</b>
                        <input type="text" name="fwname" value="" size="35" class="edit" maxlength="30"></div>

                    <div> <span class="style1">*</span><b>Name:</b>
                        <input type="text" name="fnewname" value="" size="35" class="edit" maxlength="25">
                    </div>

                    <div> <span class="style1">*</span><b>Email Address:</b>
                        <input type="text" name="femailAddr" value="" size="35" class="edit" maxlength="40">
                    </div>

                    <div><span class="style1">*</span><b>Password:</b>
                        <input type="password" name="fnewpass" value="" size="35" class="edit" maxlength="15">
                    </div>

                    <div>Please tick here <input name="focon" type="checkbox" value="checked"> if you have read and agreed to our <a href="conditions.php" target="_blank">Terms and Conditions</a> and you are over the age of 18.</div>

                    <input type="Submit" class="button" value="Submit">
                </form>
                <div class="twocolumn">
                    <div>
                        <p><img src="http://wrestlestarz.com/images/wslogo.png" alt="Wrestlestarz wrestling community"></p>
                    </div>
                    <div>
                        <p><strong>Do You Want To....</strong></p>
                        <p><img src="http://wrestlestarz.com/images/tick.png" height="25" width="25" alt="Create a wrestler"><span>Create a Wrestler?</span></p>
                        <p><img src="http://wrestlestarz.com/images/tick.png" height="25" width="25" alt="Act out wrestling storylines?"><span>Act out wrestling storylines?</span></p>
                        <p><img src="http://wrestlestarz.com/images/tick.png" height="25" width="25" alt="Relive moments from you're wrestling heroes?"><span>Relive moments from you're wrestling heroes?</span></p>
                        <p><img src="http://wrestlestarz.com/images/tick.png" height="25" width="25" alt="Live out a fantasty of being a wrestling booker?"><span>Live out a fantasty of being a wrestling booker?</span></p>

                        <strong>Then Wrestlestarz is the place for you</strong>
                    </div>
                </div>
                <div class="contentleft">
                    <p>With a potential boom foreseen in the wrestling industry , Scottish Phantom and his manager have decided now is the time to take wrestling into a new exciting direction.</p>

                    <p>The not always popular Scottish Phantom is known for running wrestling events that create a challenge, this vision fuels Wrestlestarz with the sole purpose of providing a wrestling challenge that will give an opportunity to everyone to achieve greatness.</p>

                    <p>Greatness in wrestling isn't just restricted to the wrestling ring, greatness can be achieved out of the ring by bringing a unique wrestling event to one of the many arenas we are licensed to run wrestling shows in.</p>

                    <p>Wrestlestarz will provide fun while challenging you're skill as a wrestler, or you're creative imagination  in the wrestling events that you run or the wrestling feuds you engage in.</p>

                    <p>Are you brave enough to take on the Wrestlestarz wrestling challenge?</p>
                </div>
            </section>

            <footer>
                | <a href="http://wrestlestarz.com/index.php">Home</a> |
                <a href='http://wrestlestarz.com/signup.php'> Sign Up </a> |     <a href="http://wrestlestarz.com/conditions.php">Terms of Conditions</a> | <a href="http://wrestlestarz.com/privacy.php">Privacy Policy
                </a>

                <b>Copyright © MR BizWeb LTD 2014-2016</b>
            </footer>
        </div>
</html>
Link to comment
Share on other sites

sorry dsone , didn't mean for you to recode the whole index page and take the time to do that, do appreciate it though

 

stupid me didn't even consider adding id on form tag , so code you provided there, helped me get form on signup.php sorted

 

thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...