HTML Lesson 11: More about tables

Lesson 11: More about tables

The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.
Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:
Example 1:

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

Will look like this in the browser:

Cell 1
Cell 2	Cell 3	Cell 4

By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.
Example 2:

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

Will look like this in the browser:

Cell 1		Cell 2
Cell 3	Cell 4	Cell 5

What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over:
Example 3:

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

Will look like this in the browser:

Cell 1	Cell 2
	Cell 3
	Cell 4

In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.
Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own.