HTML Tables

<!DOCTYPE html>
<html>
<head>
	<title>HTML Tables</title>
	<style type="text/css">
	table {
		border-collapse:collapse;
		}
	td, th { 
		border:1px solid black;
		padding:5px;
	 }
	</style>
</head>
<body>
	<table>
		<tr>
			<th>Header Cell 1</th>
			<th>Header Cell 2</th>			
		</tr>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>		
		</tr>
		<tr>
			<td>Cell 3</td>
			<td>Cell 4</td>		
		</tr>
	</table>
</body>
</html>

Above is an example of an HTML table. The table has had some styles applied (using the <style> element in the document's <head>) element.

How HTML Tables Work

In HTML, you can create a table by using the <table> tag along with the <tr> and <td> tags:


<table>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>		
	</tr>
</table>

Each <tr> element represents a table row. Each <td> element represents a data cell.

There are other table-related elements that you can use with your table, such as <th>, <thead>, <tfoot>, <tbody>, <caption>, and <colgroup>.

Here's an example of a table that uses those elements:


<table>
	<caption>
		Caption here...
	</caption>
	<colgroup span="2" class="first2cols"></colgroup>
	<thead>
		<tr>
			<th>Header Cell 1</th>
			<th>Header Cell 2</th>
			<th>Header Cell 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>	
			<td>Cell 3</td>		
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Footer Cell 1</td>
			<td>Footer Cell 2</td>	
			<td>Footer Cell 3</td>		
		</tr>
	</tfoot>
</table>

As you can see, many of the extra elements allow you to group other elements inside them. For example, the <thead> element is used to group the column headers for the table, the <tfoot> groups the column footers, etc.

The <colgroup> element allows you to group columns together. This can be handy for applying styles to all cells within a column. In the above example, we use span="2" to group the first two columns. We also apply a class to that group of columns. So if we were to apply say, a background color to that class, the background color would be applied to the first two columns only.

Attributes

The <table> element supports the border and the sortable attributes (as well as the global attributes and the ) and the event handler content attributes.

Using the border attribute will typically result in the browser rendering a basic border around the table and its cells. Like this:

<table border="1">
	<tr>
		<th>Header Cell 1</th>
		<th>Header Cell 2</th>			
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>		
	</tr>
	<tr>
		<td>Cell 3</td>
		<td>Cell 4</td>		
	</tr>
</table>

However, the border attribute is losing popularity in favor of CSS. You can do a lot more with CSS. Plus, from HTML5, the border attribute is only intended to convey to the browser that the table is not being used for layout purposes.

The sortable attribute is intended to allow a sorting interface for the table.

Two other attributes you might find useful when working with tables are the colspan and rowspan attributes. These can be used with the <th> and <td> elements. They allow you to specify how many columns or rows the cell should span. Examples below.

Colspan:

In this example, the first header cell spans two columns.

<table border="1">
	<tr>
		<th colspan="2">Header Cell 1</th>
		<th>Header Cell 2</th>			
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>	
		<td>Cell 3</td>		
	</tr>
	<tr>
		<td>Cell 4</td>
		<td>Cell 5</td>		
		<td>Cell 6</td>	
	</tr>
</table>

Rowspan:

Here we apply rowspan="" to the first header cell. This results in the header cell spanning all 3 rows.

<table border="1">
	<tr>
		<th rowspan="3">Header Cell 1</th>
		<th>Header Cell 2</th>	
		<th>Header Cell 3</th>		
	</tr>
	<tr>
		
		<td>Cell 1</td>	
		<td>Cell 2</td>		
	</tr>
	<tr>
		
		<td>Cell 3</td>		
		<td>Cell 4</td>	
	</tr>
</table>

Avoid HTML Tables for Layout

HTML tables are only intended to present tabular data—data with more than one dimension. This data needs rows and columns in order to be presented correctly.

HTML tables are not intended to be used for layout purposes. While it may be tempting to use them to create layouts, this is not recommended. You should use the appropriate HTML elements along with CSS to determine your page layout. More on this next with HTML Layouts.