HTML Tables

HTML can be used to structure tabular data

HTML Tables are used when you need to show 'tabular data', in other words information that is logically presented in rows and columns. NOTE: Do not attempt to use tables to arrange the layout of an entire webpage or website with tables, that is what CSS is for. But more on that later.

Building tables in HTML works in a similar way to lists although at first they may seem more complicated. However if you take it step by step it is actually strictly logical - just like everything else in HTML. Tables use three main elements, <table> for table, <tr> for table row and <td> for table data

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical. 
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical. 
• <th> stands for "table header" and is used within the first table row to set the table headings. Still logical. 
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical. 

See the example below.

<table> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>Info 1</td> <td>Info 2</td> </tr> <tr> <td>Info 3</td> <td>Info 4</td> </tr> </table>

The html code above will create a table like this in the browser,

Heading 1	Heading 2
Cell 1	Cell 2
Cell 3	Cell 4

This is a very basic example, but tables can be made more interesting by using attributes. For now lets focus on two attributes commonly used with tables are border and cellpadding, see the example below.

<table border="1" cellpadding="10" align="center"> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>Info 1</td> <td>Info 2</td> </tr> <tr> <td>Info 3</td> <td>Info 4</td> </tr> </table>

The html code above will create a table in the browser like this...

Heading 1	Heading 2
Cell 1	Cell 2
Info 3	Info 4

Other attributes such as 'height', 'width', 'bgcolor', 'align' and 'valign' can also be used to edit the appearance of your table.

<table border="1" cellpadding="20" align="center" width="280px"> <tr bgcolor="red"> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr bgcolor="yellow"> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr bgcolor="blue"> <td>Info 3</td> <td>Info 4</td> </tr> </table>

The html code above will create a table like this in the browser ...

Heading 1	Heading 2
Cell 1	Cell 2
Info 3	Info 4

Try it yourself and experiment with different attributes to see what kinds of tables you can create using HTML.

Next Up

Once you have mastered the basics of HTML tables the next step is how to create web links using HTML.