How do i make html tables appear the way i want

Question

like for instance here in yahoo answers, 3 pictures on top, then one the right side one big place to put text or pics, and then right in the center a big space to put something (like the answers in here) and more space on the footer, to put 2 pix, well i guess you get the idea, and ive seen this without using css, but if its needed i dont mind, any links or codes are welcomed! thanks!

NO STUPID ANSWERS PLEASE IF YOU DONT KNOW DONT ANSWER!

Answer 1

the secret is multiple tables or at least the easiest. you still have need some CSS but that is to control you widths and heights.

<table style="width: 650px;">

    <tr>

        <td>

            <table style="width:100%">

                <tr>

                    <td>

                        header cell1

                    </td>

                    <td>

                        header cell2

                    </td>

                    <td>

                        header cell3

                    </td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td>

            <table style="width: 100%">

                <tr>

                    <td style="width: 75%">

                        Body cell1

                    </td>

                    <td style="width: 25%">

                        Body cell2

                    </td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td>

            <table style="width:100%">

                <tr>

                    <td>

                        footer cell1

                    </td>

                    <td>

                        footer cell2

                    </td>

                    <td>

                        footer cell3

                    </td>

                </tr>

            </table>

        </td>

    </tr>

</table>

Answer 2

You can do it with tables (and that used to be the best way to go)  

The colspan attribute gives you some control of table cell width, so if you want to make a table that can handle one, two, or three cells, you need to use least common multiple of 1,2, and 3, or six cells wide:

<table>

<tr>

  <td colspan = "2">first pic</td>  

  <td colspan = "2">second pic</td>

  <td colspan = "2">third pic</td>

</tr>

<tr>

  <td colspan = "6">

    This content takes up the entire table width

  </td>

</tr>

<tr>

  <td colspan = "3">first chunk</td>

  <td colspan = "3">second chunk</td>

</tr>

</table>

CSS is a much better way to go, though.  It's actually easier to work with (once you know how) and a lot more flexible.  You can either use direct positioning to place your elements exactly where you want them (but then lose flexibility when people's browsers cannot do exactly what you expect)  or use a floating technique to provide maximum flexibility. In the floating technique, you just write XHTML or HTML code.  You might add some class or ID identifiers to help specify particular parts of the page:

<h1>My page</h1>

<div class = "top">

  <img src = "pic1.jpg" />  

  <img src = "pic2.jpg" />

  <img src = "pic3.jpg" />

</div>

<p>

  This is the main content

</p>

<div class = "bottom">

<img src = "pic4.jpg" />

<img src = "pic5.jpg" />

</div>

Add the following CSS to the header to make the top and bottom images centered:

<style type = "text/css">

.top, .bottom {

  text-align: center;

}

</style>

Of course you could do much more to specify the exact styles, how images are displayed in the divs, how the content text should be displayed, and so on.

EDIT -

The image-slicing technique mentioned by another poster has some significant drawbacks.  Using this technique means your page is now a series of large images. It cannot be edited without the original software, it is not indexed by search engines, it is not readable by text readers for people with visual impairments, and it is extremely inefficient, making your page inaccessible to people with slower connections.

The CSS technique is far preferred.  See my book for much more about how this is done.

Answer 3

The best way to make tables fit perfectly would be to use a photo editor (such as photoshop or fireworks) to create the layout of your site. And then use the slice tool to make tables.

fireworks:

http://www.fwzone.net/ShowDetail.asp?New...

photoshop:

http://www.entheosweb.com/photoshop/slic...

However, you can also use layering in Dreamweaver:

http://www.informit.com/articles/article...

But, in the end, you can also just edit the source code and change the sizes of each piece of the table to make sure it fits right.

Good Luck!

(and if you need more help with webdesign, email me at [e-mail])