HTML5 - table attributes

Site Admin Joined: Aug 22, 2007 Posts: 1772

I have switched for while ago my radio page to HTML5. The validator returns all well-known attributes of tables as error with a suggestion to use CSS instead the outdated attributes.

For example some typical tables with xHTML, where all used attributes are not more allowed in HTML5:

html Code:

<table border="0" cellpadding="0" cellspacing="0" width="100%">


<tr>


<td valign="top">content</td>


</tr>


</table>





<table border="0" cellpadding="2" cellspacing="3" width="600">


<tr>


<td  height="20" width="10" align="center">content</td>


</tr>


</table>





<table border="1" bordercolor="#000" cellpadding="4" cellspacing="4" width="800" align="center">


<tr>


<td>content</td>


</tr>


</table>

For my perspective to follow the old logic while typing code i have created some CSS classes with the most used attributes like this:

css Code:

.table_nospace {border:none; border-spacing:0px;}


.table_nospace th, .table_nospace td {padding:0;}


.table_fullwidth {width:100%;}


.table_cellspacing0 {border-spacing:0px;}


.table_cellspacing1 {border-collapse:separate; border-spacing:1px;}


.table_cellspacing2 {border-collapse:separate; border-spacing:2px;}


.table_cellspacing3 {border-collapse:separate; border-spacing:3px;}


.table_cellspacing4 {border-collapse:separate; border-spacing:4px;}


.table_cellpadding0 th, .table_cellpadding0 td {padding:0;}


.table_cellpadding1 th, .table_cellpadding1 td {padding:1px;}


.table_cellpadding2 th, .table_cellpadding2 td {padding:2px;}


.table_cellpadding3 th, .table_cellpadding3 td {padding:3px;}


.table_cellpadding4 th, .table_cellpadding4 td {padding:4px;}


.noborder {border:none;}


.valign_top {vertical-align:top;}


.valign_bottom {vertical-align:bottom;}


.valign_middle {vertical-align:middle;}

With these classes i have builded my tables after changing the doctype:

html Code:

<table class="table_nospace table_fullwidth">


<tr>


<td class="valign_top">content</td>


</tr>


</table>





<table class="noborder table_cellpadding2 table_cellspacing3" style="width:600px;">


<tr>


<td  class="text-center" style="height:20px; width:10px;">content</td>


</tr>


</table>





<table class="table_cellpadding4 table_cellspacing4 centered" style="width:800px; border:1px solid #000;">


<tr>


<td>content</td>


</tr>


</table>

For sure, it works for me. But i want change (prepare) my own modules for HTML5 and my question is which experience have you with building tables in HTML5 and exists maybe an easier way...

Posted: Thu Jan 02, 2014 11:37 am

Looks like a solid plan....

We have been using Bootstrap v3 to assist in our html5 table cleanup which has made it relatively easy. Minimal markup with no additional classes for td, th, etc.. Their approach styles out a few different table styles and you apply the class to the table only*. [ Only registered users can see links on this board! Get registered or login! ]

* there are contextual classes (such as success/danger) to color table rows or individual cells

Most of their CSS uses sibling, adjacent sibling, and pseudo class selectors to style various elements of the table(s)

css Code:

.table > caption + thead > tr:first-child > th,


.table > colgroup + thead > tr:first-child > th,


.table > thead:first-child > tr:first-child > th,


.table > caption + thead > tr:first-child > td,


.table > colgroup + thead > tr:first-child > td,


.table > thead:first-child > tr:first-child > td {


  border-top: 0;


}

Tables also can be responsive theme breakers. While Bootstrap added a responsive table option (using scrollbars)... We are using a JavaScript/CSS approach for tables that hold alot of data which hides columns at various display sizes (no scrollbars). A menu is used to toggle columns on/off so all data can be viewed as needed; on any device. [ Only registered users can see links on this board! Get registered or login! ] (our version is slightly modified to use Bootstrap markup)
forked from [ Only registered users can see links on this board! Get registered or login! ]

Posted: Thu Jan 02, 2014 2:46 pm

Thanks for your reply and it sounds very cool. I think I'll love bootstrap. The media tables are amazing stuff, too!

Posted: Thu Jan 02, 2014 9:20 pm

I absolutely love Bootstrap and we are hoping it will provide a more consistent appearance throughout RavenCMS(tm), which is why are using it.
HMTL Kickstart is another nice piece of kit [ Only registered users can see links on this board! Get registered or login! ] though it didn't have everything we were looking for at the time.

The only thing that worries me with the type of CSS classes you are proposing is you may well end up with a long string of classes in your markup, which although you have given them common sense names like "table_cellpadding1", you might end up with something overly complicated.
My personal preference (and it isn't everyone's personal preference) is that, if you are going to use "style", you might as well just write it all long handed.

Code:

<table class="noborder table_cellpadding2 table_cellspacing3" style="width:600px;">

then becomes something like;

Code:

<table style="border:0px; padding:2px; border-spacing:3px; width:600px;">

Both would give you HTML5 validation, though the second code snippet clearly doesn't give you the ability to alter appearance via CSS.

If I were doing it myself, I'd probably just 'borrow' the CSS styles from Bootstrap for tables and it's sub elements like th, tr, td etc as this would be better for future integration into RavenCMS and might save some work later on.

Posted: Fri Jan 03, 2014 2:21 am

An almost 100% html5 validated (but it was when i finished it) bootstrapped RN 2.5 [ Only registered users can see links on this board! Get registered or login! ]
I did not added that faulty image or the ampersand.

Posted: Fri Jan 03, 2014 6:59 am

Guardian2003, for sure its a long string in this case but in my current RN25x page with HTML5 are the count of tables with different attributes for cellspacing and cellpadding very small. In the most cases i have it all on zero with a own CSS class. I don't want switch with RN25x to bootstrap. So i think its really better to wait on the 3.0 release and then i will start with the changes for my public modules.