How can I make just one cell in an HTML table bordered, or just one side of a cell bordered?

For HTML tables, you can use the border attribute to suggest the width of a border around the table and each cell. There are other methods defined in HTML 4 to suggest cell borders (or "rules", as they are called there) as separate from the overall border for the entire table. Such methods don't work e.g. on Netscape 4 for example, though, and moreover they cannot be used to suggest that borders should appear around a single cell only, or even on one side or some sides of a cell only. This document briefly discusses some HTML hacks like nested tables that might be used, and then the more reasonable style sheet (CSS) approach.

HTML hacking: nested tables

For simplicity, let us consider a trivial table with three cells:

<table border="1" cellspacing="0" cellpadding="4">
<tr> <td>one</td> <td>two</td> <td>three</td> </tr>
</table>

This is how it looks like on your browser:

The cellspacing and cellpadding attributes are note relevant to our discussion. But note that using style sheets you could suggest padding properties for an individual cell if you like. So you could e.g. set cellpadding to zero and use the CSS padding properties to suggest the paddings you like, with the implication that in non-CSS browsing situations there would be no padding.

Now let's first assume that we would like to remove the borders except for those surrounding the second cell. There is no direct way to do that in HTML. But one possible approach is to set border="0" and construct a border for the second cell by making the cell content a single-cell table, with a border of its own:

This is how it looks like on your browser:

Using style sheets for cell borders

Date of last update: 2000-09-22