HTML Tables

Some kinds of data just need to be shown in a rows and columns fashion - which is why Excel spreadsheets (and to some extent, Access databases) are so popular in the business world. HTML has a similar capacity in the form of tables - which allow you to set up column headers and footers, along with many rows of data in the body of the table.

The overarching tag that surrounds the entire table is, not surprisingly, <table>. Each instance of a table requires this tag to be placed in the desired location. Under the table tag, there are three components that make up a table: <thead> is where the table headers are, <tbody> is the bulk of the table’s contents (the data), and <tfoot> is an optional table footer. In any of these sections, a table row is designated by the <tr> tag. Here’s an example of a table without any data, just table rows:

                    	
<table>
	<thead>
		<tr></tr>
	</thead>
	<tbody>
		<tr></tr>
		<tr></tr>
		<tr></tr>
	</tbody>
	<tfoot>
		<tr></tr>
	</tfoot>
</table>
						
                    

You can see the basic structure of a table in this example. However, for a table to have meaning, it needs headers and data - which we’ll add now:

                    	
<table>
	<thead>
		<tr>
	<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
	</thead>
	<tbody>
		<tr>
			<td>Value A1</td>
<td>Value B1</td>
<td>Value C1</td>
</tr>
		<tr>
			<td colspan=”3”>Value A2 three rows</td>
</tr>
		<tr>
			<td>Value A3</td>
			<td colspan=”2’>Value B3 two rows</td>
</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan=”3”>Author: Jeremy</td>
</tr>
	</tfoot>
</table>

					
				

Cells in table headers are <th> tags; all other cells are <td> cells. The other important tidbit to extract from this example is the <th> and <td> cells can have two special attribtues: “colspan” stretches a cell over multiple columns, and “rowspan” stretches a cell over multiple rows. These two attributes allow for flexible table designs that fit your formatting needs.