tables

A Basic Table

A table in HTML consists of rows, and each row consists of rectangular boxes or cells. An HTML table definition is contained between the <table> and </table> tags. You define each row in the table separately using the <tr> and </tr> element (table row), and then each cell within the row using the <td> and </td> element (table data).

This code:

<table border="1" cellspacing="0" cellpadding="0" frame="border" rules="all">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Produces this:

If your table needs headings the first row should look like this:

<table border="1" cellspacing="0" cellpadding="0" frame="border" rules="all">
	<tr>
		<th>heading1</th>
		<th>heading2</th>
		<th>heading3</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

heading1	heading2	heading3
data	data	data

You can also add a caption:

<table border="1" cellspacing="0" cellpadding="0" frame="border" rules="all">
	<caption>My Table</caption>
	<tr>
		<th>heading1</th>
		<th>heading2</th>
		<th>heading3</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

My Table
heading1	heading2	heading3
data	data	data

You can merge cells and columns:

<table border="1" cellspacing="0" cellpadding="0" frame="border" rules="all">
	<tr>
		<th>heading1</th>
		<th>heading2</th>
		<th>heading3</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td colspan="3" style="background-color:lime;">data</td>
	</tr>
	<tr>
		<td rowspan="2" style="background-color:cyan;">data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

heading1	heading2	heading3
data	data	data
data
data	data	data
data	data	data

Tables