designing with tables.

Question

hey, i have been designing websites table-less for a while now. the problem is that it can take a hella long time to finish the site. people who design using tables can finish much faster. whats a good tutorial or of related to do such a thing?

i know this is wrong lol, but ive noticed alot of clients dont really care and they want their site asap. doing it the div way, depending on the site can take forever.

thanks

ps: ive tried designing the site in say like photoshop or illustrator then exported the design as a webpage, but when it comes to modifying the design, i cant wrap my head around getting the site to show correctly.. and usually i get pissed of and start hand coding it. i find hand coding alot easier then anything else. i think its a bad habit or can be. i take longer doing it by hand thought.

Answer 1

W3Schools has a pretty good tutorial here:

http://www.w3schools.com/html/html_tables.asp

You might want to take the time to study up on using DIV's, CSS, etc., as exporting a website from Photoshop and Illustrator will only give you headaches when you need to make small tweaks. (Along with numerous other scenarios.)

Answer 2

If you use tables, you'll have a lot more headaches if you're trying to do any fancy DHTML. Table elements are not block elements, they're not box elements, they're tables.

If you have just a static HTML site with no javascript, then your issues aren't as severe, however one point of table less design is to separate design and structure. Which is worth the trouble it takes to learn css.

For example, forget just the benefits and lack of headaches having to hunt down table layout design when you want to make adjustments later, putting all design rules into a css file reduces subsequent downloads for clients, as your css will be cached even if your markup pages are generated dynamically via PHP. This makes your site load faster.

And anyhow many developers can create css table-less layouts as quick other people create some ugly table + spacer.gif sites.

Answer 3

Isn't the question where a tutorial is for div layout? I've just been reading a book about web accessibility which states the preference for div layout in pretty strong terms.

Answer 4

There are plenty of tutorials available on the web but I'm going to take a different tack with my answer.

Are you creating these pages to do things the right way or are you creating them for a business purpose?

If the former, by all means learn as much about the CSS-type solutions as you can. You should be doing that anyway but don't let it get in the way of delivery.

If the latter, I doubt the customer cares how 'pure' the code is behind it, as long as it looks okay. Their primary concern will be speed of delivery and nice rendering on all the major browsers.

That's the reason why I still use tables for layout on the stuff I deliver to customers. I also only test it on three browsers (I won't say which) since that's all my customers care about. They really don't care whether Opera on the iPhone (for example) renders correctly since that's not their target market.

Answer 5

Maybe I'm a Luddite, but I don't see anything wrong with using a table for page layout. It works everywhere and as you said, users rightfully don't much care. Note that I said a table; multiple nested table sites are a nightmare to maintain. And just because you're using a table for the wireframe doesn't mean that you shouldn't be using CSS extensively to style it and the rest of your site.

Answer 6

Your argument is valid, coding a site with tables is much faster off the line. The problem with tables is that they're significantly harder to maintain in the long run. By using divs you'll have a much simpler time when adjusting style or layout changes in the future.

If the site you're creating will require (very) little to no future maintenance then tables would be arguably better/faster. However, if you are planing on making changes to the sites design/layout in the future (even just an average amount of changes/fixes), a div-centric design will be much more rewarding.

Answer 7

Table-based layout is extremely simple, at least conceptually. A table starts with <table> and ends with </table>. Inside you have zero or more rows (<tr>...</tr>), inside of which you have zero or more columns (<td>...</td>). There are a few other tags (thead/tbody/tfoot, th for header cells), but that's really all you need to know about tables - no tutorial needed.

The main advantages to a table are:

1. The size of a table adjusts based on the size of the content
2. Columns always line up, making it easy to line content up vertically
3. Simple to code - a few lines of HTML are all that's needed for basic structure
4. Universally supported - the table will look and act properly in old/weird browsers (I'm looking at you, IE!)

The downsides to tables include an "it's complicated" relationship status with div and CSS, not to mention the scorn of your peers. Tables aren't a complete replacement for div and CSS, but don't let anyone tell you that div and CSS are complete replacements for tables either.

When attempting to style a table, there are a few things that you can play with to make it look the way you want:

1. border - this defines a border around and between the cells of the table
2. padding - this is the amount of padding between the content and the edges of the cell
3. text-align - horizontal alignment of content within the cell
4. vertical-align - vertical alignment of content within the cell (useful for vertical centering!)
5. border-collapse - you can collapse the border to remove any spacing between cells

Answer 8

You can get the best of both worlds by using correct HTML markup, and then, in CSS, using the various different table-related values of the display property.

As for using tables in HTML, this is what W3C says (see Tables in HTML documents):

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Steve

Answer 9

If you like tables, know tables and they don't do you wrong then stick with it, but 'going div' can be pretty liberating. You do need though to understand positioning and I've not found a better tutorial than the following to teach you how to position divs

http://www.barelyfitz.com/screencast/html-training/css/positioning

Answer 10

the best tutorial site I know is htmldog which, despite the name, is mostly about css.

Also two invaluable sites for replicating table like designs using divs are:

1. Faux columns (for making divs equal height
2. This site, which will generate the basic cross-browser page layout html and css for you: http://fu2k.org/alex/css/onetruelayout/example/interactive

Stick with divs - as you get used to it it'll become second nature, maybe even quicker than tables