The internal fight to work with tables or css for eg 3 column layouts?

I'm kind of having a dilema on this subject. Both tables and CSS give me similar results, though CSS is sometimes all over the place affecting the formatiing when working with non-html elements or elements that involve code not html related. I've googled the debate and there are no straight answers while there are major discussions on browser compatibility. CSS and sytlesheets is pretty straight forward, gives cleaner code but browser issues are a problem. Tables reduce the production time quite easily and also good for data displays. Not sure if many on the list have worked with the asp.net master page concepts but its similar to the old days of frames. So while I had some time this week to get started with my project, I'm now finding myself embroiled in the table/css debate which has no direct answer. For the developes out there who work on code that's not html friendly, how is this issue affecting you? Is the Div tag really worth the headaches? Cheers. :-)

On 12/11/2010 6:05 PM, aki wrote:
I'm kind of having a dilema on this subject. Both tables and CSS give me similar results, though CSS is sometimes all over the place affecting the formatiing when working with non-html elements or elements that involve code not html related. I've googled the debate and there are no straight answers while there are major discussions on browser compatibility. CSS and sytlesheets is pretty straight forward, gives cleaner code but browser issues are a problem. Tables reduce the production time quite easily and also good for data displays. Not sure if many on the list have worked with the asp.net <http://asp.net> master page concepts but its similar to the old days of frames. So while I had some time this week to get started with my project, I'm now finding myself embroiled in the table/css debate which has no direct answer. For the developes out there who work on code that's not html friendly, how is this issue affecting you? Is the Div tag really worth the headaches? Cheers. :-)
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke yes, it is absolutely worth it. Get serious and move on from 1996 tables

@Webmaster, I know this debate about getting serious on the the tables issue but is CSS not purely html? So if you were for eg doing some code in eg php for some function, is the CSS formatting not going to be affected by this? An easier way would be to create the code in a Div tag and place the element. Div tags have very basic properties, how do you control the formatting and correct placement of the elements during run time in a 3 column layout? Applying the Style properties is really not the answer because it does not work, too much time wasted on tweeking where the elements land during runtime. HTML it seems has an uglier side when it come to code outside it scope, yet it cannot offer the same functionality that the code does. So what solution would you recommend for a 3 column layout for code that's not purely html but gets translated to html? On Sat, Dec 11, 2010 at 6:07 PM, Webmaster <webmaster@kenyanlyrics.com>wrote:
yes, it is absolutely worth it. Get serious and move on from 1996 tables

what do you mean by "not purely html"? This article from 2006 is a good read explaining a div/css based three column layout: http://www.alistapart.com/articles/holygrail/ Keep all css rules in an external style sheet, use classes instead of styling elements individually. On 12/11/2010 06:24 PM, aki wrote:
@Webmaster, I know this debate about getting serious on the the tables issue but is CSS not purely html? So if you were for eg doing some code in eg php for some function, is the CSS formatting not going to be affected by this? An easier way would be to create the code in a Div tag and place the element. Div tags have very basic properties, how do you control the formatting and correct placement of the elements during run time in a 3 column layout? Applying the Style properties is really not the answer because it does not work, too much time wasted on tweeking where the elements land during runtime. HTML it seems has an uglier side when it come to code outside it scope, yet it cannot offer the same functionality that the code does. So what solution would you recommend for a 3 column layout for code that's not purely html but gets translated to html?
On Sat, Dec 11, 2010 at 6:07 PM, Webmaster wrote:
yes, it is absolutely worth it. Get serious and move on from 1996 tables

I think what aki means by "not purely html" is a situation where you have to generate html code from a server-side language .. something like `echo "<div class='left-pane'>content</div>"`. The simple answer is that you dont actually have to and that in fact you should never ever (eeever!). The long answer is to use an mvc pattern or framework. You see an MVC pattern will allow you to write your html layouts/templates kando and then write php or asp or .net logic code without having to even care about a tag. This translates to being able to create different "views" for different browsers or clients while leveraging on the same server side code. Whereas it takes a bit of learning, if you are in this for good then its worth it: both for your street cred, speed of dev and for maintenance balaaz. My advise : if you are in webdev for the long haul then relax - get to fall in love with XHTML and CSS and maybe mvc if you like. They may seem uptight and unyielding at first but in the end you will be glad you made their acquaintance ;-). If you were just "passing-by" - as in you just want sort out some specific problem and move on to other non-web stuff - then by all means, scratch your itch. In Kao we say that you kill a snake with the closest weapon, not the best one. On 11/12/2010, Jonas | Lamu Software <jonas@lamusoftware.com> wrote:
what do you mean by "not purely html"?
This article from 2006 is a good read explaining a div/css based three column layout: http://www.alistapart.com/articles/holygrail/
Keep all css rules in an external style sheet, use classes instead of styling elements individually.
On 12/11/2010 06:24 PM, aki wrote:
@Webmaster, I know this debate about getting serious on the the tables issue but is CSS not purely html? So if you were for eg doing some code in eg php for some function, is the CSS formatting not going to be affected by this? An easier way would be to create the code in a Div tag and place the element. Div tags have very basic properties, how do you control the formatting and correct placement of the elements during run time in a 3 column layout? Applying the Style properties is really not the answer because it does not work, too much time wasted on tweeking where the elements land during runtime. HTML it seems has an uglier side when it come to code outside it scope, yet it cannot offer the same functionality that the code does. So what solution would you recommend for a 3 column layout for code that's not purely html but gets translated to html?
On Sat, Dec 11, 2010 at 6:07 PM, Webmaster wrote:
yes, it is absolutely worth it. Get serious and move on from 1996 tables
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke

@Kyalo, @Jonas. Thnks for the feedback. Here is a simpler one that needs no server side language, however CSS will not treat it correctly. <div id="headertext"><h1> The quick brown fox jumped over the lazy dog</h1></div> In my stylesheet #headertext, the Div tag has a size of say 400px with float:left; margin: auto; So I need the text of the header text to be in the centre of the div tag, without it treating the whitespace as a break or space. If I use a table/cell layout, am done in seconds..... Any suggestions? Rgds. On Sat, Dec 11, 2010 at 8:58 PM, Ndungi Kyalo <ndungi@gmail.com> wrote:
I think what aki means by "not purely html" is a situation where you have to generate html code from a server-side language .. something like `echo "<div class='left-pane'>content</div>"`. The simple answer is that you dont actually have to and that in fact you should never ever (eeever!). The long answer is to use an mvc pattern or framework. You see an MVC pattern will allow you to write your html layouts/templates kando and then write php or asp or .net logic code without having to even care about a tag. This translates to being able to create different "views" for different browsers or clients while leveraging on the same server side code. Whereas it takes a bit of learning, if you are in this for good then its worth it: both for your street cred, speed of dev and for maintenance balaaz.
My advise : if you are in webdev for the long haul then relax - get to fall in love with XHTML and CSS and maybe mvc if you like. They may seem uptight and unyielding at first but in the end you will be glad you made their acquaintance ;-). If you were just "passing-by" - as in you just want sort out some specific problem and move on to other non-web stuff - then by all means, scratch your itch. In Kao we say that you kill a snake with the closest weapon, not the best one.

Aki, problem with tables is mobile devices, tables do not go down well with this

Thnks Dennis, a good tip for the future. Asante. :-) On Sat, Dec 11, 2010 at 9:46 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
Aki, problem with tables is mobile devices, tables do not go down well with this _______________________________________________

Aki, if you need a non breaking space you have to use the stuff, is this what you had in mind? <html> <style type="text/css"> #headertext, #headertext2{ width: 400px; float: left; border: 1px solid; } #headertext h1{ text-align: center; } </style> <body> <div id="headertext"><h1> The quick brown fox jumped over the lazy dog</h1></div> </body> </html> Regards, Ukang'a Dickson On Sat, Dec 11, 2010 at 9:58 PM, aki <aki275@gmail.com> wrote:
Thnks Dennis, a good tip for the future. Asante. :-)
On Sat, Dec 11, 2010 at 9:46 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
Aki, problem with tables is mobile devices, tables do not go down well with this _______________________________________________
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke

text-align:center; in your div css

Aki, THAT IS NOT AN EXCUSE!! Anyways, it all depends on what you want to do, and your level of expertise. As said before, if this is a one time issue, by all means do the tables. However, if its long time dev, you are better off learning the code. On to your question, all html space is treated as single white space, unless you put it in the <pre> tag. Even your space solution would use table cell boundaries. In good html practice use the pre tag, or in css #headertext{ .................. left:30px; ................. } You left push your text as far as you want within the div On Sat, Dec 11, 2010 at 10:23 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
text-align:center;
in your div css
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- www.golavish.com - The travel and leisure www.raccuddasys.com - code Development issues

@Frankline, @Dennis and @Dickson. Thnks for the tips, I definately want to avoid wasting to much time on perfecting CSS because it is not the heart of my projects but also wanted to ensure the my project site is within a certain format. Taking thread further, how does CSS work with your Mysql tables such displays of data? Do you guys create CSS tables and populate or use html tables to populate the data? Rgds.

I think using too many breaks with IE ignoring most of them. We create HTML tables, but modify the way they look using CSS, ie the colour of the tables, the borders and the spacing AKi, this may be a bit useful as a well organised reference for what you are doing http://www.w3schools.com/css/

Thanks @Dennis, I had a look at that and other links too, somehow Í'm still come away with the understanding that CSS is not worth the efforts. Its a " bloody waste " of precious development time and just for the sake of cosmetics in my understanding so far. However, am keeping my options open and will continue to research more. Me amatuer thots, on the side of html. :-) On Sun, Dec 12, 2010 at 2:51 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
I think using too many breaks with IE ignoring most of them. We create HTML tables, but modify the way they look using CSS, ie the colour of the tables, the borders and the spacing
AKi, this may be a bit useful as a well organised reference for what you are doing http://www.w3schools.com/css/

Remember that an unusable application is useless, no matter how good the logic is

@Dennis, sawa will keep that in mind. Happy Independence day, over and out. :-) On Sun, Dec 12, 2010 at 4:03 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
Remember that an unusable application is useless, no matter how good the logic is

On your question about centering content, you could also try applying css padding. About CSS being a "bloody waste of development time", well .. thats like saying writing code is a bloody waste of development time :-). You will discover it yourself in due time; write your current app with tables, nested tables, 's, spacer gif's and the works. Naturally, you will want to sort out a few bugs, make a few modifications add a few enhancements na kadhalika, it is then that you will begin to realise that what little convenience tables gave with the right hand they quickly took away with the left. The decision to never (note: not "not") use tables is mostly arrived at by the programmer himself/herself after having been through a maintenance hell - mostly of his very own code! On 12/12/2010, aki <aki275@gmail.com> wrote:
Thanks @Dennis, I had a look at that and other links too, somehow Í'm still come away with the understanding that CSS is not worth the efforts. Its a " bloody waste " of precious development time and just for the sake of cosmetics in my understanding so far. However, am keeping my options open and will continue to research more. Me amatuer thots, on the side of html. :-)
On Sun, Dec 12, 2010 at 2:51 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
I think using too many breaks with IE ignoring most of them. We create HTML tables, but modify the way they look using CSS, ie the colour of the tables, the borders and the spacing
AKi, this may be a bit useful as a well organised reference for what you are doing http://www.w3schools.com/css/

@aki. Happy independence day to you! and all Skunks alike. I'd like to give my two cents from my experience with the HTML development platform regarding tables and CSS. At first reluctance was a very strong factor for me too. My research had similar outlooks to yours but there's a number of ways to look at your dillema. Let's look at working with for example PHP. Definitions within your CSS file will allow for quicker workflows within a PHP Framework which brings you more layout options. Directly related to tables however because that's what you initially asked : Seeing as how you're looking at working on a fixed layout, i suggest getting a CSS Framework that does just that. I have been battling with what would be similar to Tables in CSS and the Div tag works beautifully if implemented correctly. In most cases, it's even more powerful and better placed than a table. I know that may seem rather odd to say but it has been my personal opinion for a while. i work with an elastic framework that is the 52 framework it's beautiful. It allows full flexibility. it's based on the new HTML 5 and CSS3 layout options but can be used as a simple barebone for CSS. check it out here: *52framework*.com/ Hope this helped. * the Green Watchman.* On Sun, Dec 12, 2010 at 4:47 PM, Ndungi Kyalo <ndungi@gmail.com> wrote:
On your question about centering content, you could also try applying css padding. About CSS being a "bloody waste of development time", well .. thats like saying writing code is a bloody waste of development time :-). You will discover it yourself in due time; write your current app with tables, nested tables, 's, spacer gif's and the works. Naturally, you will want to sort out a few bugs, make a few modifications add a few enhancements na kadhalika, it is then that you will begin to realise that what little convenience tables gave with the right hand they quickly took away with the left.
The decision to never (note: not "not") use tables is mostly arrived at by the programmer himself/herself after having been through a maintenance hell - mostly of his very own code!
On 12/12/2010, aki <aki275@gmail.com> wrote:
Thanks @Dennis, I had a look at that and other links too, somehow Í'm still come away with the understanding that CSS is not worth the efforts. Its a " bloody waste " of precious development time and just for the sake of cosmetics in my understanding so far. However, am keeping my options open and will continue to research more. Me amatuer thots, on the side of html. :-)
On Sun, Dec 12, 2010 at 2:51 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
I think using too many breaks with IE ignoring most of them. We create HTML tables, but modify the way they look using CSS, ie the colour of the tables, the borders and the spacing
AKi, this may be a bit useful as a well organised reference for what you are doing http://www.w3schools.com/css/
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- ...and I shall shed my light over dark evil. For the dark things cannot stand the light.

@Aki Have u considered using the 960 grid framework http://960.gs ? On Mon, Dec 13, 2010 at 3:28 AM, Watchman <skunkingrahim@gmail.com> wrote:
@aki.
Happy independence day to you! and all Skunks alike.
I'd like to give my two cents from my experience with the HTML development platform regarding tables and CSS. At first reluctance was a very strong factor for me too.
My research had similar outlooks to yours but there's a number of ways to look at your dillema.
Let's look at working with for example PHP. Definitions within your CSS file will allow for quicker workflows within a PHP Framework which brings you more layout options. Directly related to tables however because that's what you initially asked :
Seeing as how you're looking at working on a fixed layout, i suggest getting a CSS Framework that does just that. I have been battling with what would be similar to Tables in CSS and the Div tag works beautifully if implemented correctly. In most cases, it's even more powerful and better placed than a table. I know that may seem rather odd to say but it has been my personal opinion for a while.
i work with an elastic framework that is the 52 framework it's beautiful. It allows full flexibility. it's based on the new HTML 5 and CSS3 layout options but can be used as a simple barebone for CSS.
check it out here: *52framework*.com/
Hope this helped. * the Green Watchman.*
On Sun, Dec 12, 2010 at 4:47 PM, Ndungi Kyalo <ndungi@gmail.com> wrote:
On your question about centering content, you could also try applying css padding. About CSS being a "bloody waste of development time", well .. thats like saying writing code is a bloody waste of development time :-). You will discover it yourself in due time; write your current app with tables, nested tables, 's, spacer gif's and the works. Naturally, you will want to sort out a few bugs, make a few modifications add a few enhancements na kadhalika, it is then that you will begin to realise that what little convenience tables gave with the right hand they quickly took away with the left.
The decision to never (note: not "not") use tables is mostly arrived at by the programmer himself/herself after having been through a maintenance hell - mostly of his very own code!
On 12/12/2010, aki <aki275@gmail.com> wrote:
Thanks @Dennis, I had a look at that and other links too, somehow Í'm still come away with the understanding that CSS is not worth the efforts. Its a " bloody waste " of precious development time and just for the sake of cosmetics in my understanding so far. However, am keeping my options open and will continue to research more. Me amatuer thots, on the side of html. :-)
On Sun, Dec 12, 2010 at 2:51 PM, Dennis Kioko <dmbuvi@gmail.com> wrote:
I think using too many breaks with IE ignoring most of them. We create HTML tables, but modify the way they look using CSS, ie the colour of the tables, the borders and the spacing
AKi, this may be a bit useful as a well organised reference for what you are doing http://www.w3schools.com/css/
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- ...and I shall shed my light over dark evil. For the dark things cannot stand the light.
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke

@Watchman, @Kiti, thnks for the links. Will have a look. Cheers. :-)
participants (9)
-
aki
-
Dennis Kioko
-
Dickson Ukanga
-
Frankline Chitwa
-
Jonas | Lamu Software
-
Kiti Chigiri
-
Ndungi Kyalo
-
Watchman
-
Webmaster