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

[Ingolme]

Table should never be used for design. It should be used for data.

 

This article in Wikipedia pretty much explains when it's OK to use tables:

https://en.wikipedia.org/wiki/Wikipedia%3aManual_of_Style/Tables#When_tables_are_appropriate

[Notretsam]

thanks Ingolme, useful link

 

seems to suggest that in project am updating, my players rankings would be a appropriate place to use tables and semi suggests forms as well.

 

however, going try and do full site without tables, which based on first few pages I done, seems possible now to do.

Edited February 26, 2016 by Notretsam

[dsonesuk]

 

my players rankings would be a appropriate place to use tables and semi suggests forms as well.

 

For forms, this was probably true for desktop, but to responsively scale for smaller mobile devices no!.

 

Take the form just created for example, when you said, you would normally place text in one column the text field in another column. Now if the browser window shrinks below the combined widths of these column what happens? the forms table columns extend beyond and behind the right browser window edge! Or text break into several lines, does not line up with text field, spacing is al over the place. What happens with my html/css version, the text stacks above the text field, and both are centred in middle of page evenly spaced.

[Notretsam]

I realize some people are going disagree with me here but this is my opinion, and I stand by it, but do have to remember I been using tables for around 15 years now , so hard to break a habit

 

more am trying things out last few days, the more am thinking, that in certain situations, tables are the better choice still I feel.

 

The CSS Multiple column is a nice start but until you can specifically dictate what data goes in what column, its not good for every situation, where as tables are.

 

I realize divs can be used, but reason why I hate using divs is because to position them, you have to pretty much spend ages adjusting all kinds of things, an nothing should be that difficult. I always have issues with div content over lapping other content, divs is just a real pain to work with I find.

 

I recognize the points made and some really good ones here on regards to using tables, but I just don't see the use of tables ever dying out , which appears HTML 5 is trying to go in that direction.

 

People should certainly use Header, Nav, Section, Footer tags and other such HTML 5 layout tags, there excellent.

People should also limit there use of tables as much as possible, but there always going be some situations where tables is the better choice.

 

CSS Multiple Column has great potential and sometimes it will do what you want for you, but until you can specifically dictate what data goes in each column with it, then its just not good enough, but hopefully that will change through time.

 

end of day, I agree with points made on tables being slightly slower to load and obviously visually impaired screen readers is a main issue as well, but until there is better options for multiple columns, then there still a need for tables for certain things I feel.

 

 

Edited February 26, 2016 by Notretsam

[Notretsam]

more of a post for others viewing here and wondering same as myself

 

useful link on using divs for multiple columns.

 

http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm

 

 

a variety of options available at top as well.

 

In screenshot below I used the coding provided on the 3 forms, can see screenshot below.

 

 

notice the title above the form, no matter what I tried I can't get the text to align (vertical) in center, and the post new shout is column 1 but displays in middle for some reason

 

however, maybe it be useful for someone else that views this thread , and think the coding more for a site design, than what I was trying to use it for.

Edited February 26, 2016 by Notretsam

[dsonesuk]

To vertically align use line-height: and if the title box has height set the value of line-height to match.

 

The swapping is usually a floating issue, can't really tell with image only.

Edited February 26, 2016 by dsonesuk

[Notretsam]

yup line-height works, thanks

 

After getting dinner and getting distracted by Big Bang Theory (awesome show), went back to it.

 

So far I got coding with div working but certainly not perfect for all devices though.

 

My thinking was the percentages on col1 widths would auto resize for screen res, like I would use on td tags before but nope, scroll bar at bottom appears when you reduce window size.

.container {
  padding:5px;
  margin-bottom:20px;
  clear:both;
  display:table;
  text-align:center;
  width:750;
  }
  

.col1 { width:60%; display:table-cell; padding:5px;}
.col2 { width:20%; display:table-cell; padding:5px;}
.col3 { width:20%; display:table-cell; padding:5px;}

<div id="container">
<div class="col1">  FORM 1 CODE</div>
<div class="col2">  FORM 2 CODE</div>
<div class="col3">  FORM 3 CODE</div>
</div>

Edited February 26, 2016 by Notretsam

[dsonesuk]

The min device width is 320px, real small but still exists, so you have to allow for this.

 

Your container is 750 which should be 750px, they give different results which could be part of your problem, so 750px is more than double the size of 320px so scrollbars WILL APPEAR when width shrinks below 750px.

 

You should look into media queries, so depending on screen size you can adjust type block element to inline-block, 60% width to 100%/block element, hide containers used for advertising for desktop, which you don't require for mobile to save bandwidth.

[Notretsam]

I changed the 750 to a % and added position:relative , but still did same thing

 

Looked into using view.width (vw) but that not working either.

Edited February 26, 2016 by Notretsam

[dsonesuk]

Position relative won't do anything until you use top, left, right, bottom propeties, and i don't know why you used it anyway.

[Notretsam]

I was more just playing around with position to see what it did , but yeah not much.

[dsonesuk]

You are using class identifier instead of id '#' for container also. :-)

[Notretsam]

#container {
  padding:5px;
  margin-bottom:20px;
  text-align:center;
  display:table;
  width:95%;
  }


.col1 { width:50%; display:table-cell; padding:5px;}
.col2 { width:20%; display:table-cell; padding:5px;}
.col3 { width:20%; display:table-cell; padding:5px;}

yup am no good at using divs, totally foreign to me but to me it should be as simple as above coding, but when reducing window, col2 and col3 won't auto resize.

 

I could understand if I had static number for widths , but with %'s , you would think it auto resize, but it isn't

 

oh well, worth a try I guess.

Edited February 26, 2016 by Notretsam

[dsonesuk]

The problem is you have 100%, great! but padding/margin/ border widths are a addition to this width, so it is greater than 100% and that is why it will stack, the trick is to avoid these properties and use element within these elements to apply margins, padding or borders.

 

All the columns should resize to percentages assign to them, the only thing to prevent them resizing smaller is child element (images, form inputs etc) within them using fixed height/width, paragraphs using white-space nowrap, or a long word longer than usual or sentance where spaces are replaced with   can prevent resizing depending on element used.

[thescientist]

Of course you are entitled to your opinion and you are free to develop in any way that you want, but to say

I recognize the points made and some really good ones here on regards to using tables, but I just don't see the use of tables ever dying out , which appears HTML 5 is trying to go in that direction.

 

Is just not an accurate fact.

 

The intent by the standards team was to provide better ways to express, semantically, what developers were using tables for, with more meaningful alternatives that in and of them selves are better for all the reasons already mentioned. So just be clear that tables do have their use, however just not for the same reasons as 15 years ago, is all. The web changes and evolves and I think on the topic of tables for layout in particular, all here will agree it was for the better.

[Notretsam]

http://webaim.org/techniques/tables/

 

reading this , you can still use tables for layout purposes and screen readers that visually impaired use, can read them, just to have to think on how you do it and be careful not to over do tables.

 

Also there is a table reading mode in screen readers.

 

so like am showing above with the 3 forms.

<table>
<tr>
<td class="form1">form 1</td>
<td class="form2">form 2</td>
<td class="form3">form 3</td>
</tr>
</table>

I believe a screen reader would read the above as

 

FORM 1 info

FORM 2 info

FORM 3 info

 

I also believe the class tag be read as well, which explains why all the table tags are now obsolete as they was being read. I cringe at the thought of the old way I designed now, must have been a right nightmare for screen readers.

 

I do think above is OK to do, as the article linked does state can still use layered tables, but keep them simple.

 

Also information I pull from a database table and display in table rows, would be deemed data tables I believe.

 

Yes I know, some here will say and think I should use DIVS, but I find them overly complicated to use and is why I always used tables.

Edited February 27, 2016 by Notretsam

[Notretsam]

Of course you are entitled to your opinion and you are free to develop in any way that you want, but to say

 

Is just not an accurate fact.

 

The intent by the standards team was to provide better ways to express, semantically, what developers were using tables for, with more meaningful alternatives that in and of them selves are better for all the reasons already mentioned. So just be clear that tables do have their use, however just not for the same reasons as 15 years ago, is all. The web changes and evolves and I think on the topic of tables for layout in particular, all here will agree it was for the better.

 

agreed , my statement of HTML5 trying to go in direction of tables dying out was indeed completely incorrect.

 

I didn't fully understand the reasoning for why the table tags where made obsolete in HTML 5, the article I linked in my last post along with what dsoneuk has said to me in this thread, has helped me realize its not a conspiracy against tables lol

[thescientist]

That said, per the MDN docs, tables are still a good option for email, due to poor CSS support.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

 

So, just a matter of a developer knowing and using the best tools available for the job.

[Notretsam]

Well this is strange , I downloaded a free screen reader called Thunder, one of the top results on google search for a free screen reader. (http://screenreader.net/index.php?pageid=11)

 

I checked my old design that had tables galore, and it read everything fine, was no mention of the table tags. So really don't understand why some think screen readers can't read table layout designs as that free one read the content fine to me.

 

also tested windows 10 narrator and that read old design with tables galore fine.

 

really have no idea why people say screen readers can't read content in tables, it reads mines with no issues.

Edited February 27, 2016 by Notretsam