Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Tables in HTML

Page 4 of 6


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.
In a new XHTML document, practice creating tables with different row heights, just like the examples above. Play with different values in pixel and percentage units.

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

In a new XHTML document, practice creating tables with different column widths, just like the examples above. Play with different values in pixel and percentage units.

You can also try combining different row heights and column widths.
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