HTML & CSS: Tables 1


Table Structure

Tables are a widely-used way of organizing and presenting tabular information on the Web. Let's use a table to present common elements for setting up tables:

tableSets up a table
trDeclares a row
thDeclares a header cell in a row
tdDefines a cell in a row


Table Components

A table has three main components, thead, tbody and tfoot:

theadHolds one or more rows together into a header
tbodyHolds the main rows
tfootHolds the rows in the footer


Table Formatting

A table has several CSS formatting properties:

border-collapseDetermines whether there is space between adjacent cells. Options are 'collapse' (no space) and 'separate' (space).
border-spacingIndicates the space between adjacent cells (when the border is not collapsed)
borderA 'shorthand' CSS property that can set several border properties in 1 line. (Note how it is used in the example below.)
paddingSpace between a cell's contents and its border
text-alignAlign horizontally
vertical-alignAlign vertically


An Example