When a table is defined by a <table> tag with no styles specified, a borderless table as wide as its enclosed data is displayed.

From this simple beginning you can structure and style a table to take on virtually any display characteristics you can imagine.

Table Border Styles

Any of the border styles that were introduced earlier can be applied to the outer border of a table. Below are example border styles coded in the general fashion,

where the border style is identified below for each of the tables. The style sheet uses the general format {border:style size color} for all border stylings.

All of the above tables have a outer border of 5 pixels to make then visually obvious. Different effects can be achieved with different border sizes.

Individual Border Styles. In the above examples borders appear around all four sides of the table. You can, however, specify individual styling for the separate sides. Use the properties border-top, border-bottom, border-left, and border-right to selectively apply borders around the table. The accompanying table, for example, displays only top and bottom borders with the following style sheet.

Collapsed Borders. Borders surrounding the cells in a table are normally displayed separately from each other. That is, the default border setting for the table is border-collapse:separate, framing each cell separately and giving a "double border" look to the cells. By specifying border-collapse:collapse for the table, cells share "single borders" between them. This effect is illustrated in the following tables styled as above but with collapsed borders.

When table borders are collapsed, cell border styles are ignored, collapsed to a single-line style. Therefore, border:solid is the only recognized cell border style.

Cell Border Styles

Borders around table cells are styled independently from the outer border. The same set of border styles can be applied. In the following examples the outer border is 1 pixel in width and cell borders are 3 pixels in width to emphasize their styling. Note that table borders cannot be collapsed to view cell borders.

Selective Border Styles. Borders surrounding cells can be selectively applied with border-top, border-bottom, border-left, and border-right styles. These styles are normally used to display top-and-bottom or left-and-right borders to emphasize the rows or columns of the table. The following two tables are displayed with the style sheets:

In order to extend row and column borders across the entire table, borders must be collapsed. Otherwise, breaks in the lines appear between the separate cells. As meantioned above, collapsed borders also means that the various cell border styles do not display. Therefore, a solid border style is the only one that need be used for the cells.

Individual Border Styles. Cell borders can be styled independently. If needed, each cell can have a different border style. Usually, though, only selected cells are given emphatic borders to highlight their contents. Of course, in order to view cell borders the table border cannot be collapsed.

The following table displays different cell borders along its bottom row. This output can be achieved by applying in-line style sheets to the selected cells. However, this is the type of situation especially made for the use of ID selectors and contextual selectors. Complete table and style sheet coding is shown below.

The table itself is assigned an id in order to uniquely identify it among other tables on the page. Also, the final row of the table is given an id to uniquely identify it among the other rows of the table. This is the row in which special border styling is applied to its cells.

Within the style sheet the table is given an outer border style through the ID selector table#TAB1, selecting the <table> tag with id="TAB1" for application of the border style. The contextual selector table#TAB1 td applies a 1-pixel inset border to all cells of this table -- i.e., where a <td> tag is contained within a <table> tag for a table with id="TAB1".

A contextual selector is also used for styling the last row of the table. A 3-pixel outset border is applied with the selector table#TAB1 tr#ROW3 td -- i.e., where a <td> tag is contained within a <tr> tag with id="ROW3", which is contained within a <table> tag with id="TAB1".

If only a single cell has its borders styled, then that cell can be given an id, say, id="CELL9". Then the selector for styling that cell would be

table#TAB1 td#CELL9 {border:outset 3px}

Apply the border where a <td> tag with id="CELL9" is contained with a <table> tag with id="TAB1". It would not be necessary in this case to identify the table row.

Borders are displayed around the table and between table cells with the border="n" attribute of the <table> tag, where n is the width of the outer border in pixels. The following table has 1-pixel borders:

Changing the width of the outer border does not effect the size of cell borders. The default style of the outer border is "outset"; the default style of inner borders is "inset":

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

---

---