Table Element

Tables are used to organize sets of data that are most conveniently displayed in a grid-like format.

The <table> tags define a new table within the HTML document.

Within the <table> tags, one or more rows can be defined by each set of <tr> (table row) tags.

Each row can have one or more cells which are defined using the <td> (table cell) tags or <th> (table heading) tags. Content inside <th> tags is bold and a center aligned by default.

Attributes

Attribute	Value
border	Applied to the <table> tag. A number which specifies the thickness of the tables borders. A value of 0 will prevent the borders from displaying.
colspan	Applied to the <td> or <th> tags. A number which specifies how many table columns the cell will span across.
rowspan	Applied to the <td> or <th> tags. A number which specifies how many table rows the cell will span.

Example

Code:

<html>
	...
	<body>
	<table border="1">
		<tr>
			<th colspan="3" style="background-color: orange;">Grocery List</th>
		</tr>
		<tr>
			<td rowspan="3" style="background-color: green;"> </td>
			<th>Item</th>
			<th>Cost</th>
		</tr>
		<tr>
			<td>Tomato Sauce</td>
			<td>4.00</td>
		</tr>
		<tr>
			<td>Pack of Spaghetti</td>
			<td>$3.00</td>
		</tr>
		<tr>
			<th>Total:</th>
			<td>2 Items</td>
			<td>$7.00</td>
		</tr>
	</table>
	</body>
</html>

Screen Output:

Grocery List
	Item	Cost
	Tomato Sauce	$4.00
	Pack of Spaghetti	$3.00
Total:	2 Items	$7.00

A colspan of 3 has been applied to the orange cell.

A rowspan of 3 has been applied to the green cell.

Previous Topic

HTML Quick Quiz