Tables going bye -bye: Use DIVS/Span??

[Gregg Bolinger]

Ok, so Tables are going bye bye and appearntly, from what I read, they take more for browsers to render them anyway. So I assume using DIVs and SPANs are the way to go (DHTML/CSS).

Does anyone have any advice/links/resources on moving from tables to layers (DIV/SPAN)? I have been trying to convert a couple of simple pages that have tables to div and span but with some parts of it I am not having much luck. I think with some documentation it would be easier.

Thanks.

[Eric Pascarello]

The rule of thumb is tables for data, divs for layout.

div is a block element and a span is an inline element.

what is the basic layout of the page so I can help you with resources?

header/footer/3column etc.

[Gregg Bolinger]

********************************************************
*               *                                      *
*               ****************************************
*               *                *                     *
*               ****************************************
*               *                *                     *
*               ****************************************
*               *                                      *
********************************************************

That is basically for my login screen. The big area on the left is for an image. The first row in column 2 is for a header. Second row colum 2 is label, 2nd row colum 3 text. Same for row 3 and then row 4 is for my submit button.

I thought a visual would help.

Well, it lines up correctly in the edit window. But when I submit the post, it's not lined up right.

Ok, looks right now. :roll:

Also, I thought posting my HTML Table might help too:

<table align="center" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                        <td>
                                <img src="images/loginlogo.gif" border="0"/>
                        </td>
                        <td>
                                <table border="0" cellpadding="3" cellspacing="0">
                    <tr>
                        <td colspan="2" class="error-label">${requestScope.error}</td>
                    </tr>
                                        <tr>
                                        <td colspan="2" class="header-title">Anykey</td>
                                        </tr>
                                        <tr>
                                        <td><label class="common-label">Enter your username:</label></td>
                                        <td><input tabindex="1" type="text" class="common-textbox" name="id" id="username" value="${requestScope.id}"/></td>
                                        </tr>
                                        <tr>
                                                <td><label class="common-label">Password:</label></td>
                                                <td><input type="password" class="common-textbox" name="password"/></td>
                                        </tr>
                                        <tr>
                                        <td colspan="2" align="right"><input type="submit" value="Login" class="common-button"/></td>
                                        </tr>
                                </table>
                        </td>
                        </tr>
                </table>

[ October 04, 2004: Message edited by: Gregg Bolinger ]

[Eric Pascarello]

That is rather easy to do

what you need to look into is float:left with spans

http://css.maxdesign.com.au/floatutorial/introduction.htm

Eric

[Ernest Friedman-Hill]

Some great stuff on that site, Eric -- thanks for the link!