Jump to content
xisto Community
Sign in to follow this  
fffanatics

Css Table Layouts How do you create these

Recommended Posts

Hey everyone, the previous topic has inspired me to ask how do you create a good css table layout. I have tried over the years but tend to run into lots of issues since as soon as you start floating divs, things get complex and really hard to give good positioning. Plus, they tend to look different in firefox and IE. Does anyone know of any good tutorials or could write a simple one here to go over how to make a css table layout. Thanks so much in advance.

Share this post


Link to post
Share on other sites

I can write a Table-based layout, but why would I do that when CSS is much cleaner, faster, more Standards Compliant and Tables are out-dated?If you need assistance overcoming IE's crappy rendering of your page, post another Topic and someone will assist in its 'fixing' for IE.

Share this post


Link to post
Share on other sites

Yeah complex layouts can get abit hard to achieve in CSS where as in tables you seem to have somewhat more control. But the one thing I have learned about tables is once stacked I beleive there is a off set unlike divs. I've seen very nice CSS layouts over time and wondered how they did it. Looking at their code it soon went over my head so I'm sure if you stick to buliding with CSS over time you will learn how to build sites around bugs in different broswers.Theres sites out there that at are professional sites but they still break at certain conditions. for example when window is resized small things get crazy and out of order.If your site contains alot of different elements and your planning to make it look the same across all broswers it will take alot of time to identify how to display each element correctly in all brosewrs. This is unpractical as it will take so long to get a website out. It is easier to make your site look consistent over different broswers if it contains few elements. But this is never the case we all know how boring it can be if you dont add more in.

Share this post


Link to post
Share on other sites

Well, whenever I set out to learn something new: I look for an example of it on the internet. Once I find what I like I will read the source code, find out the location of their css docs, and figure out how in the world they pull it off... From there I try to do it my self, twisting it to suit my own needs.

Share this post


Link to post
Share on other sites

jlhaslip:- i always wonder HOW do you find these things? is it just google all the time?karlos

I hang out on other Forums, most of them have to do with html/css/php.
And I am nosey... :o ... with a full set of Bookmarked pages in my Browser.

Share this post


Link to post
Share on other sites

HAHA! well there we go you need lots of accounts a HUGE database of bookmarks
(yoda voice)only then will you be ready for jlhaslip's knowledge
Anyway back to the topic. I've started using css in my designs mainly div layers cause they are Brilliant you can meddle about with EVERYTHING using css love it! you can even use them in javascripts which i didnt know! like this one that one's really cool might even use it in the near future, who know?
Anyways im gonna stop yacking and do some work now so bye bye!

Share this post


Link to post
Share on other sites

Here is a site which offers 40 different CSS based Layouts.
http://forums.xisto.com/no_longer_exists/

Pick one which most closely resembles the basic page and start with that. Add the finishing touches and you are done.



jlhaslip:- i always wonder HOW do you find these things? is it just google all the time?

Yea JL is the man when it comes to finding this stuff. and I feel sure he has a lot more and better ones since the start of this post. I have used the
http://forums.xisto.com/no_longer_exists/ myself. only thing is they all seem the same.

Share this post


Link to post
Share on other sites

Heres one of my tables I use. I'm no virtuoso by any means.What's really difficult is to make tables that have rounded corners and look the same in any browser.TABLE.Table1{ display:block; width: 450px; border-top:solid; border-bottom:solid; border-left:solid; border-right:solid; border-color: #000000; border-width: 2px; background-color:white; }

Share this post


Link to post
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
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.