Lesson 10: Tables

Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.

Is it difficult?

Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.

Example 1:

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

Will look like this in the browser:

What's the difference between <tr> and <td> ?

As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:

3 different elements are used to insert tables:

• 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.
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.

Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:

Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.

In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.

Example 2:

	
	<table>
	  <tr>
	    <td>Cell 1</td>
	    <td>Cell 2</td>
	    <td>Cell 3</td>
	    <td>Cell 4</td>
	  </tr>
	  <tr>
	    <td>Cell 5</td>
	    <td>Cell 6</td>
	    <td>Cell 7</td>
	    <td>Cell 8</td>
	  </tr>
	  <tr>
	    <td>Cell 9</td>
	    <td>Cell 10</td>
	    <td>Cell 11</td>
	    <td>Cell 12</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify that you want a border around your table:

Example 3:

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

Will look like this in the browser:

You can also add column headings:

Example 4:

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

This example will be displayed in the browser as a table with two column headings. Try it yourself.

What can I insert in my tables?

Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.

In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.

Once you have mastered tables, nothing in HTML can faze you. So go practice making tables from scratch — some with headings, some without — that should keep you busy for hours.

+ Post a new topic

<< Lesson 9: Images

Lesson 11: More about tables >>