Tables in HTML

Row height

To change the height of a row in a table you can use the height attribute for the

<tr>

tag.

So the code:

<table border="1">
	<tr height="50"> <th>Name</th> <th>Age</th> </tr>
	<tr> <td>Peter</td> <td>12</td> </tr>
	<tr> <td>Megan</td> <td>14</td> </tr>
</table>

Will render:

Name	Age
Peter	12
Megan	14

You can also set the height as a percentage of the total height of the table, like:

<table border="1" height="200">
	<tr height="25%"> <th>Name</th> <th>Age</th> </tr>
	<tr height="30"> <td>Peter</td> <td>12</td> </tr>
	<tr> <td>Megan</td> <td>14</td> </tr>
</table>

To show:

Name	Age
Peter	12
Megan	14

In this last example the total height of the table is set to 200 pixels, the height of the first row is set to 50% of this total table height (equals 100 pixels), and the height of the second row is set to 30 pixels, leaving the remaining 70 pixels to the third row.

Column width

Just as you can define the height of the rows in a table, you can also define the width of one or more columns of your table. This time we are going to use the width attribute for the

<td>

(or

<th>

) tag of the first row.

Example:

<table border="1">
	<tr height="50"> <th width="150">Name</th> <th width="75">Age</th> </tr>
	<tr> <td>Peter</td> <td>12</td> </tr>
	<tr> <td>Megan</td> <td>14</td> </tr>
</table>

To display:

Name	Age
Peter	12
Megan	14

The example above sets the first row's height to 50 pixels, the first column's width to 150 pixels and the second column's width to 75 pixels.


Here you can also set the columns' width as a percentage of the total table's width. Like:

<table border="1" width="400">
	<tr> <td width="25%">Windows</td> <td>uses Internet explorer</td> </tr>
	<tr> <td>Mac OS</td> <td>uses Safari</td> </tr>
</table>

To display:

Windows	uses Internet explorer
Mac OS	uses Safari

Where the first table has a width defined to 400px, the first column a width of 25% of the table (equals 100px), and the second column a width of the remaining 75% (300px).

Once you feel comfortable with row heights and column widths you can follow through the next pages of this tutorial, where you will find more ways to control the looks of your tables.

More pages of this tutorial → Tables in HTML  <123456>

Comments & Questions