Basic table example

This example illustrates the caption, thead, tfoot, and tbody elements. The text styling is the browser's default.

Notice that the caption and footer are at the bottom, even though that is not the order in which they appear in the source code. The caption position is controlled by CSS. The footer will always be at the bottom.

Table Caption [Optional]
Table head cell column 1	Table head cell column 2
Table foot cell column 1	Table foot cell column 2
First body row	Table body cell
Second body row	Table body cell
Third body row	Table body cell

The CSS

The outlines are created with added border style rules. The padding for cells is inside the cell border.

        table {
            border: solid red
            }
        th, td {
            padding: .5em;
            border: solid thin black;
            }
        caption {
            caption-side: bottom;
            } 
        thead {
            background: yellow;
            }
        tfoot {
            background: #ddd;
            }