Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> CSS
Author Message
neralex
The Mouse Is Extension Of Arm


Joined: Aug 22, 2007
Posts: 1329
Location: Germany

PostPosted: Thu Jan 02, 2014 9:20 am Reply with quote

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...
 
View user's profile Send private message
spasticdonkey
RavenNuke(tm) Development Team


Joined: Dec 02, 2006
Posts: 1693
Location: Texas, USA

PostPosted: Thu Jan 02, 2014 11:37 am Reply with quote

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!
 
View user's profile Send private message Visit poster's website
neralex
PostPosted: Thu Jan 02, 2014 2:46 pm Reply with quote

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


Joined: Aug 28, 2003
Posts: 6793
Location: Ha Noi, Viet Nam

PostPosted: Thu Jan 02, 2014 9:20 pm Reply with quote

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.
 
View user's profile Send private message Send e-mail
wHiTeHaT
Life Cycles Becoming CPU Cycles


Joined: Jul 18, 2004
Posts: 577
Location: Netherlands

PostPosted: Fri Jan 03, 2014 2:21 am Reply with quote

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.
 
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
neralex
PostPosted: Fri Jan 03, 2014 6:59 am Reply with quote

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.
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> CSS

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©