[thaigerl]

Not sure if this is the correct forum to request this but anyway, I know there are a lot of talented web designers on soompi who are more than likely familiar with creating table layout designs for websites. I haven't found a decent helpful tutorial that explains how to go about it, at least none with some visual aid as guide to each step. I was trying to create a layout like this

http://www.daydreamgraphics.com/g/view/7195

But I somehow don't know how to go about starting it. I know HTML and CSS and know how to create div and iframe layouts but tables, I don't. I'd be very grateful if someone was kind enough to illustrate and explain a simple tables tutorial that is similar to the one above. Or point me in the direction where I can find a decent tutorial. I've already read the oens at ddg, celestial-star.net and komettails.net so those aren't exactly helping me much.

Any help or advice, I'd appreciate. Thanks!

[psquare6806]

Table Layouts are kind of hard when all you have is NotePad. DIVS are much easier.

But when I design table layouts, I go into photoshop, design the layout and stuff, use the slice tool and draw boxes and then go into Image Ready and Save it Optimized. Maybe if you wait a few days I think I can write a tutorial making a table layout using PHOTOSHOP. If not, I'll help you using HTML.

Sound good?

[mace]

Tables are extremely easy (for me anyway) - though I NEVER use them unless absolutely necessary. The reason is it's obsolete, and in terms of web design, generally bad.... it's not accessible or as compatible. And it's not fluid or really that expandable. I would heavily suggest a pure-DIVs + CSS layout over tables.

But if you're still wanting to learn how to use tables, see this: http://www.w3schools.com/html/html_tables.asp

Basically imagine a grid, say, 4x4. You split everything into rows, so you now have four horizontal rows, with 4 boxes in them. Each of these boxes are a 'cell'. That's more or less how the code goes, you have the table tags (<table>), inside that you would have four 'row' tags (<tr>) (going by the above example), and inside these four row tags, you would have another 4 'cell' tags (<td>).

That's the very basics, there's more you can do like spanning a cell across multiple rows and or columns.

Now in terms of a table-based website layout, you would have perhaps one cell on the first row spanned across three columns (containing the header bit), then a second row with three cells (menu/left column, center column/content, right column), finished off with a third row with one cell spanned across three columns (containing the footer).