HTML Tables

In HTML, the original purpose of tables was to present tabular data. Although they are still used for this purpose today, many web designers tended to use tables for advanced layouts. This is probably due to the restrictions that HTML has on layout capabilities - it wasn't really designed as a layout language.

Anyway, whether you use tables for presenting tabular data, or for page layouts, you will use the same HTML tags.

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.

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

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).

You can also add attributes to other table elements, such as the td tag, as you will see below.

Table Width

Widths can be specified using the CSS width property, 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.

Code	Result
<table border="1" style="width:90%;"> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table cell 1 Table cell 2

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.

Code	Result
<table border="1" style="width:90%;"> <tr> <th>Table header</th><th>Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table header Table cell 1 Table cell 2

Colspan

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

Code	Result
<table border="1" style="width:90%;"> <tr> <th style="text-align:center" colspan="2">Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table cell 1 Table cell 2

Rowspan

Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).

Code	Result
<table border="1" style="width:90%;"> <tr> <th style="text-align:center" rowspan="2">Table header</th> <td>Table cell 1</td> </tr> <tr> <td>Table cell 2</td> </tr> </table>	Table header Table cell 1 Table cell 2

Color

You can apply color to your table using CSS. Actually, you can apply any applicable CSS property to your table - not just colors. For example, you can use CSS to apply width, padding, margin, etc

Code	Result
<table border="1" style="width:90%;background-color:greenyellow;color:green;"> <tr> <th style="text-align:center;color:black;" colspan="2">Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table cell 1 Table cell 2

• << HTML Forms
• Image Maps >>

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/html/tutorial/html_tables.cfm">HTML Tables</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!