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:

ElementDescription
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:

ElementDescription
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:

PropertyDescription
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

 

 

 

Exercise