HTML Table Tutorial

This HTML table tutorial demonstrates how to create tables in HTML. It assumes you know how to create an HTML page. If you're not familiar with HTML try the HTML Tutorial.

Basic table tags

In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.

<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

You'll notice that we added a border attribute to the table tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common attributes you can use with your table tag include width, cellspacing and cellpadding.

You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.

Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Table Headers

Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.

Most browsers display table headers in bold and center-aligned.

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Colspan

You can use the colspan attribute to make a cell span multiple columns.

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Rowspan

Similar to what colspan is for columns, rowspan enables you to make a cell span multiple rows.

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

Adding CSS to tables

You can format your tables using Cascading Style Sheets (CSS). Using CSS, you can specify background colors, border colors, border styles etc. Also, although HTML has a tag for aligning table contents, and another for specifying a background color, these tags are deprecated. You are better off using CSS for these tasks.

<table border="1" cellpadding="5" cellspacing="5" width="100%"
style="background-color:yellow;border:3px dashed black;">
<tr>
<th style="text-align:left">Table header</th>
<th style="text-align:left">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Wrap up

You can achieve some pretty amazing stuff with tables, especially when used in conjunction with CSS. If you'd like to learn more:

• If you are working with large tables, check out the tbody, thead, and tfoot tags.
• If you're working with really large tables and want them to load faster, check out the CSS table-layout property.
• To create multi-column layouts, check out the HTML layout page.
• To learn more CSS properties that you can apply to your HTML tables, see the complete list of CSS properties.