Controlling the appearance of table and cell borders
In an HTML table, each cell can have a visible border on any of its four sides, as can the table as a whole. If you do not specify otherwise, most browsers draw cell borders as 1-pixel lines that are dark gray on the top and left sides, and light gray on the bottom and right sides. Similarly, by default, most browsers draw table borders as 1-pixel lines that are light gray on the top and left sides, and dark gray on the bottom and right sides. (The exact colors depend on the browser and the user’s operating system settings.) Most browsers also display, by default, a small amount of white space between cells. While this cell spacing may appear to be part of or related to the cell borders, it is actually separate and independent.
Below is a 3×3 table with default borders and cell spacing, as rendered by Internet Explorer 6 on a typical Windows XP computer:
By zooming in on one cell, we can more easily distinguish its borders from those of neighboring cells, and also see the two different colors that, in combination with the small space between cells, makes the borders appear “raised”, like raised lettering on a book cover.
With Namo WebEditor, you can easily change the style, color, and width of cell and table borders. If you wish, you can specify different border settings independently for each side of a cell. You can also apply a single color (or pair of light and dark colors), style, or width at once to all the borders of a cell, group of cells, or table.
In this section
Applying border presets to an entire table
Specifying one or two border colors for an entire table
Specifying one or two border colors for selected cells
Specifying border style, color, and width for a table or block of cells
Specifying border style, color, and width for individual cells
Managing conflicting cell borders