Tables are used for setting up information in a tabular form. They allow for information to be displayed in rows and columns. Tables can contain text as well as HTML elements such as images and select lists. Here are some examples:
Monday
Tuesday
Notre Dame
Princess
7:00 - 9:00
7:00 - 9:00
Picture
Your Answer
This is a:
The tags used for building tables are:
<table> .. </table> - starts and stops the TABLE - contains the table row and table data/head tags which follow below
<tr> .. </tr> - identifies the start and end of a TABLE ROW - contains the table data/head tags
<td> .. </td> - identifies the start and end of a TABLE CELL - contains the information (text and other html elements) in the cell
<th> .. </th> - identifies the start and end of the TABLE CELL - same as <td> except it bolds and centers any text within.
Here is an example of a basic table and the HTML to construct it:
<table id="firstexample">
<tr>
<th>First Heading</th>
<th>Second Heading</th>
</tr>
<tr>
<td>Data in first cell</td>
<td>Data in second cell</td>
</tr>
</table>
Cellpadding and Cellspacing
description
example
what it does
cellpadding
cellpadding="5"
an equal amount of space within the cell in pixels
cellspacing
cellspacing="10"
the amount of space between the cells themselves in pixels
Here is an example an earlier table with cellpadding and cellspacing both set to 10.
First Heading
Second Heading
Data in first cell
Data in second cell
Note that if a value for cellpadding or cellspacing is not entered a default value of 2 will be applied.
Colspan and Rowspan
The last thing we need to discuss with tables is COLSPAN and ROWSPAN, which are additonal attributes for the table data tag.
COLSPAN
Suppose you had 2 columns, but you only wanted 1 header for the columns, you could use the COLSPAN attribute within the TABLE DATA tag.
Table Width and Height
By default tables and cells will expand as needed to contain whatever it is you put within them. You can set the width and height and the browser will honor the setting as long as you don't place an HTML element within it that is wider or taller than what you have provided for. Although you will often want to control the width of a table or other block level HTML element to ensure the user never has to horizontally scroll to see the full web page, seldom will you need to control the height as you will just let the cell or table expand to accomodate whatever is within it. You can set the width and height as:
width: value (value can = absolute amount of pixels or a relative %)
height: value (value can = absolute amount of pixels or a relative % although relative heights are not supported across all browsers.)
First Heading
Second Heading
Data in first cell
Data in second cell
Here is the HTML source for the example above (styles indicated in the bold typeface):
<table id="widthexample" style="width:300px; height: 140px;">
<tr>
<th>First Heading</th>
<th>Second Heading</th>
</tr>
<tr>
<td>Data in first cell</td>
<td>Data in second cell</td>
</tr>
</table>
Horizontally and Vertically Aligning Cell Content
By default content placed within a cell with be horizontally aligned to the left and vertically aligned to the middle. You can change this with the following styles:
text-align: value (value can = left, right, center, justify)
vertical-align: value (value can = top, middle, bottom)
First Heading
Second Heading
Data in first cell
Data in second cell
Here is the HTML source for the example above (styles indicated in the bold typeface):
<table id="alignexample">
<tr>
<th>First Heading</th>
<th>Second Heading</th>
</tr>
<tr>
<td style="text-align:center; vertical-align:top;">Data in first cell</td>
<td style="text-align:right; vertical-align:bottom;">Data in second cell</td>
</tr>
</table>
Borders and Tables
Often you will want to have borders appear around tables and either around the table rows and the table data cells. Visual formatting of tables is best done through an internal or external set of style rules. Note that the border properties shown below can be applied to most HTML elements and are not specific to tables.
Consider the following options when defining borders for your tables:
Property
Description
Values
border
For setting all of the properties of the four borders in one declaration
example:
table {border: 2px solid #0000ff;}
border-width
border-style
border-color
border-top
border-bottom
border-left
border-right
For setting all of the properties of one border in one declaration
example:
table {border-bottom: 2px solid #0000ff;}
border-bottom-width
border-style
border-color
border-width
For setting all of the properties of the four borders in one declaration, can have from one to four values
thin
medium
thick width in pixels
border-style
Sets the style of the four borders, can have from one to four styles
Sets the color of the four borders, can have from one to four colors
color - name or hex value
Backgrounds and Tables
Often you will want to have backgrounds (colors ususally) appear behind tables and behind table rows and the table data cells. Visual formatting of tables is best done through an internal or external set of style rules. Note that the background properties shown below can be applied to most HTML elements and are not specific to tables.
Consider the following options when defining backgrounds for your tables:
Property
Description
Values
background
A shorthand property for setting all background properties in one declaration
