Beginning (X)HTML: Tables

Course/Class Number: 58111/46065
Class Title: 58111 (X)HTML: Beginning



Tables are used for two main purposes
•    data presentation: laying out tabular data, as in a spreadsheet (this is a good use)
•    page layout: dividing your page up with tables for the purpose of layout (this is no longer a good use)

While the role of tables in page layout will decrease with the increasing use of CSS, they are a critical component of many web sites.

Tables require three tags:


Establishes the fundamental structure of the table.  Among others, <table> takes the following attributes:

width: values expressed in pixels or percentages

<table width=”500″>
<table width=”75%”>

cellpadding: defines distance from the inside border of a cell to the content.  Values expressed in pixels

<table cellpadding=”3″ width=”500″>

cellspacing: defines distance between cells in a table.  Values expressed in pixels.

<table cellspacing=”4″ cellpadding=”3″ width=”500″>

border: determines the thickness of the table’s outside border only.  Expressed in pixels.

<table border=”3″ cellspacing=”4″ cellpadding=”3″ width=”500″>


Establishes individual rows in a table.  Typically, not used for much formatting but required for sound table structure.  <tr> is nested inside table:

. . .

<th> and <td>

Establish individual cells in a row.  <th> denotes a header cell; <td> denotes a content cell.
The tags take the same attributes, including the following:

width:  Defines the width of an individual column.  Cumulative cell widths must equal the width of the table.

<td width=”125″>
<td width=”25%”>

height:  Defines the height of an individual row.

<td width=”125″ height=”35″>

align: Defines the alignment of content within the cell.  Values are left/center/right.

<td width=”25%” height=”35″ align=”center”>

valign:  Defines vertical alignment of individual cells.  Important because table cells default to middle vertical alignment.  Values are top/middle/bottom.

<td width=”25%” height=”35″ align=”center” valign=”top”>

Example Table:

<table border=”1″ width=”75%” align=”center” cellspacing=”3″ cellpadding=”2″>

<tr height=”40″>

<th width=”25%”>Date</th>
<th width=”25%”>Input</th>
<th width=”25%”>Outtake</th>
<th width=”25%”>Cost</th>



<td>Saturday, August 5</td>
<td>Rio Embudo Input, Pilar, NM</td>
<td>Horseshoe Outtake</td>




Date Input Outtake Cost
Saturday, August 5 Rio Embudo Input, Pilar, NM Horseshoe Outtake $140