Interview Questions

Border around a table?

CSS Interview Questions and Questions


(Continued from previous question...)

88. Border around a table?


Try the following:

.tblboda {
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    }
/*color, thickness and style can be altered*/


You put this style declaration either in 
an external stylesheet, or you can stuff it in 
the <head></head> section, like:

    <style type="text/css">
(here you can place your styles)
    </style>

and apply it to the table as follows:

<div class="tblboda">
    <table yaddayadda>
        <tr>
            <td>Content text and more content</td>
        </tr>
    </table>
</div>

That should give you a grey thin border around this table.

If you want the border to 'shrink wrap' around the table, then you have to use the <span> tag instead the

tag. But that is not quite proper CSS or HTML, because a is for inline elements. A table is not an inline element, therefore the correct tag is a <div>. If you play around with it a bit then you have a good chance to achieve what you want and still have correct HTML/CSS.

The other way would be that you apply the class .tblboda directly to the table (for IE and other contemporary browsers), like <table ... class="tableboda"> and you define another class for each stylesheet: .tblboda2

In the NN4.xx stylesheet, you use the same properties as above, and in the IE and other contemporary browsers you carefully set all those properties to default, like {border-style: none;}

Then you wrap the table in the <div> with the class .tblboda2 (NN4.xx does that) (IE a.o.c.b. don't do anything, because the border-style is set to "none" = no border at all).

This way you have a table that is wrapped in a nice little border: .tblboda2 for NN4.xx, .tblboda for IE and other modern browsers.

(Continued on next question...)

Other Interview Questions