Tables vs. layers (CSS question)

jacob · November 29th, 2003, 09:10 AM

I have always used tables for designing webpages but some developers think that one should use layers instead.

However I have got problems when I try to do the same layout as I did when using tables. E.g. I make UIs using a table in which all labels are aligned to the right in soem column, and input controls to the left in another column, like this...

Code:

    Some label like 'your name' [__________]
                  Another label [____________________]
        Third label medium size [x]
                                [submit]

Hoewever I am not able to it as accurate as when using tables, which would be something like this...

Code:

<STYLE>

Code:

.left    { text-align:left; }
.right    { text-align:right; }
</STYLE>

...

<TABLE CELLPADDING='4' CELLSPACING='2'>
  <TR><TD CLASS='right'>Some label like 'your name'</TD><TD CLASS='left'><INPUT type='text'></TD></TR>
  <TR><TD CLASS='right'>Another label</TD><TD CLASS='left'><INPUT type='text'></TD></TR>
  <TR><TD CLASS='right'>Third label medium size</TD><TD CLASS='left'><INPUT type='checkbox' CHECKED></TD></TR>
  <TR><TD CLASS='right'></TD><TD CLASS='left'><INPUT TYPE='button' value='submit'></TD></TR>
</TABLE>

I have tried using nested layers (DIV with SPANs) however I cannot get the same result! I do not want to use position:abolute; That is, I want the components aligned up against the same center line.

The problem is... I do not know how to structure layers the best. Do you know any good ressources on this matter or do you know the answer to the above design problem...?! Then please let me know!?

Thanks.

Jacob.

planoie · November 29th, 2003, 10:29 AM

The answer really depends of what your client base is. If you are trying to design something for general usage and you don't know what browser they will be using, what screen size they use, etc, then you should use tables. Using the more advanced tags can cause compatibility issues. I always use the simplest HTML whenever possible. They way you are doing is great.

One of the things I often do is create more context specific CSS classes. You are using a css class that is essentially doing only one thing: aligning the text to the right. You might want to try something like this...

Code:

<STYLE>
TD.label{
  text-align:right;
}
TD.input{
  text-align:left;
}
TABLE#someInputForm TD.label{
  font-weight: bold;
}
</STYLE>
...
<TABLE CELLPADDING='4' CELLSPACING='2' id='someInputForm'>
  <TR>
    <TD CLASS='label'>Some label like 'your name'</TD>
    <TD CLASS='input'><INPUT type='text'></TD>
  </TR>
  <TR>
    <TD CLASS='label'>Another label</TD>
    <TD CLASS='input'><INPUT type='text'></TD>
  </TR>
  <TR>
    <TD CLASS='label'>Third label medium size</TD>
    <TD CLASS='input'><INPUT type='checkbox' CHECKED></TD>
  </TR>
  <TR>
    <TD CLASS='label'></TD>
    <TD CLASS='input'><INPUT TYPE='button' value='submit'></TD>
  </TR>
</TABLE>

By using slightly more generic CLASS names, but adding a context to it (using contextual css selectors) you can add a finer level of detail to your style and layout with less code. The less you put in your HTML the better. You can create a generic style class (TD.label) to define how all label cells should look, then you can add more detail to it for specific occurances of that label. Like in my example above, I set an additional style attribute to the occurances of the label TD within one specific TABLE.

You can put css context onto any tag. So if you wanted one row of your table to be a bit different, but don't want to mess with the TD cell CLASS, you can put a CLASS or ID attribute onto the TR tag and add a css definition to modify the standard classes for more control.

Take a look at the W3C Recommendation for CSS. Particularly the section on contextual selectors, and cascading order. The whole document is a little overwhelming, but those sections are important and helpful to understand.

Peter
------------------------------------------------------
Work smarter, not harder.

jacob · November 29th, 2003, 10:54 AM

Thanks a lot Peter! That was a great answer, you have convinced be that I do not have to follow the trend and use layers by all means ;) I didn't knew all that about contextual selectors... Cool.

However I got a problem when mixing tables with layers. I have developed some pages where I have tried to put a table within a layer, and applying styles to that surrounding layer, and it looks fine in IE, however it seems like Mozilla and Opera does not recognize tables as contents within a layers resulting in some small layer, which is not surrounding the table as was intended.

Do you know some fix for this...!? Thanks.

Jacob.

planoie · November 29th, 2003, 11:28 PM

Well, I don't know about the later versions of the other browsers, but I think you may have compatibility issues with the <layer> tag. I recommend avoiding it. What are you trying to acheive with the table inside a layer tag?

Peter
------------------------------------------------------
Work smarter, not harder.

jacob · November 30th, 2003, 07:51 AM

It was for an old version (ASP) of a small content management system I have done. In this I wanted to have borders around the entire table, and be able to position them manually. However I have just figured out that you can actually do that on the table directly.

On thing that I benefit from an extra container around the table is the ability to have padding on the outside layer; putting space between the border and the table. Well, I guess that you can simply make another table around the inner table, in order to have this padding.

I am glad that you have convinced me that it is not layers on all costs.

Thanks a lot Peter. I didn't know that you were 'geekdork.com'. Nice!

Jacob.

planoie · December 1st, 2003, 12:26 AM

If it's a little padding around the table you are looking for, try the "margin" CSS attribute for the table tag. That will give you space around it. I also thing there is an attribute on tables for "hspace" and "vspace" to add space around the table, but I might be wrong.

Peter
------------------------------------------------------
Work smarter, not harder.

jacob · December 1st, 2003, 06:21 AM

It's really a detail, so do not waste time on it unless you think it is interesting or funny. If so, try copy this code and view it in Opera, Mozilla and IE, if possible (no question is made in this posting)...

Code:

<HTML>
<HEAD>
<STYLE>
/* Overall styles. */
BODY { 
    background-color:#FFFFFF; 
    font-family:verdana; 
}
TABLE { 
    background-color:#DDDDDD; 
    border-style:solid; 
    border-width:1px; 
}
TD {
    border-style:solid; 
    border-width:0px; 
    border-color:#000000; 
}
INPUT {
    border-style:solid;
    border-width:1px;
    border-color:#666666;
    background-color:#EEEEEE;
    font:bold; 
}
TD.label {
    text-align:right; 
    white-space:nowrap; 
}
TD.control {
    text-align:left; 
}
.back {
    text-align:right; 
}
.next {
    text-align:left; 
}

/* For the first example where a single-cell-table 
is used to surround the inner table. */
#contain {
    padding:25px; 
}
#container {
    border-style:solid; 
    border-width:1px;
    border-color:#444444; 
}

/* For the layer example, where the table holding 
the controls are surrounded by a layer */
#holder { 
    padding:25px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#444444; 
    background-color:#DDDDDD; 
    width:1%; 
}
</STYLE>

</HEAD>
<BODY>

<CENTER>
<TABLE ID='container' BORDER='0'>
    <TR>
    <TD ID='contain'>
        <TABLE ID='page01' BORDER='0' >
        <TR>
            <TD CLASS='label'>your name</TD>
            <TD CLASS='control'><INPUT type='text'></TD>
        </TR>
        <TR>
            <TD CLASS='label'>your age</TD>
            <TD CLASS='control'><INPUT type='text'></TD>
        </TR>
        <TR>
            <TD CLASS='back'></TD>
            <TD CLASS='next'><INPUT TYPE='button' value='next'></TD>
        </TR>
        </TABLE>
    </TD>
    </TR>
</TABLE>
</CENTER>

<BR>

<CENTER>
<DIV ID='holder'>
    <TABLE ID='page01' BORDER='0' >
    <TR>
        <TD CLASS='label'>your name</TD>
        <TD CLASS='control'><INPUT type='text'></TD>
    </TR>
    <TR>
        <TD CLASS='label'>your age</TD>
        <TD CLASS='control'><INPUT type='text'></TD>
    </TR>
    <TR>
        <TD CLASS='back'></TD>
        <TD CLASS='next'><INPUT TYPE='button' value='next'></TD>
    </TR>
    </TABLE>
</DIV>
</CENTER>

</BODY>
</HTML>

The example illustrates what I wanted to do; that is, to have some spacing between an outer border and some UI inside, where the controls are still close together (not using CELLPADDING or CELLSPACING). I have made a line around the inner UI so that the spacing is clear.

example 1 A one-cell-table surrounds the inner table holding the UI. Padding is set on the one-cell, and the border on the containing table. This will do the trick, and works fine in all the above browsers, however seem like a lot of tables; that is, doing a hole table structure for the sake of doing padding around another table.

example 2 A layer sourround the inner table holding the UI. All the styles related to this issue is applied to this layer. This construction however introduces new problems such as width of the layer (cannot simply have it to minimize around the inner table), wrapping of the labels (nowrap used in the example) and browser compapility.

Conclusion... I think that layers introduces a lot of trouble, even though it seems to be more simple to implement in the HTML code. I have to do the table structure with one cell in order to do what I want. The layer construction should be more flexible, or it could be that I simply do not know the right properties. It seems like a hassel to get layers to work properly and as expected.

Jacob.