HTML Tables

Using Tables To display Information

You can use html tables to layout data in a tabular format. Tables elements are defined with the table tag (<table>). Tables will contain table rows (<tr>) which will contain either table headings (<th>) or table cells (<td>). You can nest tables within table cells if desired.

<table border="1" cellpadding="4" cellspacing="0" width="80%">
	<tr>
		<th>First Name:</th>
		<th>Last Name:</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Smith</td>
	</tr>
	<tr>
		<td>Lazy</td>
		<td>Suzan</td>
	</tr>
	<tr>
		<td>Dirty</td>
		<td>Sanchez</td>
	</tr>
</table>
	

In the above example there are a few attributes in the table tag we should look at.

Border Attribute

The "border" attribute sets the width of the border around the table.

<table border="4" cellspacing="0" >
	<tr>
		<th>First Name:</th>
		<th>Last Name:</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Smith</td>
	</tr>
	<tr>
		<td>Lazy</td>
		<td>Suzan</td>
	</tr>
	<tr>
		<td>Dirty</td>
		<td>Sanchez</td>
	</tr>
</table>
	

Cellspacing

The "cellspacing" attribute sets the width of the border between the cells of the table.

<table border="1" cellspacing="6" >
	<tr>
		<th>First Name:</th>
		<th>Last Name:</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Smith</td>
	</tr>
	<tr>
		<td>Lazy</td>
		<td>Suzan</td>
	</tr>
	<tr>
		<td>Dirty</td>
		<td>Sanchez</td>
	</tr>
</table>
	

Cellpadding

The "cellpadding" attribute sets the distance between the inside cell edge and the content within the cell. This provides a little space so the text isn't squeezed against the cell borders

<table border="1" cellpadding="6" >
	<tr>
		<th>First Name:</th>
		<th>Last Name:</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Smith</td>
	</tr>
	<tr>
		<td>Lazy</td>
		<td>Suzan</td>
	</tr>
	<tr>
		<td>Dirty</td>
		<td>Sanchez</td>
	</tr>
</table>
	

Colspan and Rowspan

You can make a single cell span numerous rows or columns with the "rowspan" and "colspan" attributes.

<table border="1" cellpadding="4" cellspacing="0" >
	<tr>
		<th>Event</th>
		<th>Date</th>
		<th>Time</th>
	</tr>
	<tr>
		<td>Rodeo</td>
		<td colspan="2">Feb. 2, 2012</td>
	</tr>
	<tr>
		<td rowspan="2">End Of World</td>
		<td>Tomorrow</td>
		<td>7:00 pm</td>
	</tr>
	<tr>
		<td>Dec. 12, 2012</td>
		<td>Midnight</td>
	</tr>
</table>
		

Table Background Color

You can set the background color of your table, or individual rows or cells with the "bgcolor" attribute.

<table border="1" cellpadding="4" cellspacing="0" bgcolor="#dde" >
	<tr bgcolor="#fdd">
		<th>Event</th>
		<th>Date</th>
		<th>Time</th>
	</tr>
	<tr>
		<td>Rodeo</td>
		<td colspan="2">Feb. 2, 2012</td>
	</tr>
	<tr>
		<td rowspan="2" bgcolor="#f9f">End Of World</td>
		<td>Tomorrow</td>
		<td>7:00 pm</td>
	</tr>
	<tr>
		<td>Dec. 12, 2012</td>
		<td>Midnight</td>
	</tr>
</table>
		

Text Alignment

You can adjust the alignment of text within cells by using the "align" attribute. You can apply the same alignment to all cells in a rows by using it in the table row tag, or apply it directly to a table cell.

<table border="1" cellpadding="4" cellspacing="0" width="50%" >
	<tr>
		<th>Heading 1</th>
		<th>Heading 2</th>
	</tr>
	<tr align="center">
		<td>Data 1</td>
		<td>Data 2</td>
	</tr>
	<tr>
		<td align="right">Data 3</td>
		<td>Data 4</td>
	</tr>
</table>