Screen Printing

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

Tables in HTML

Page 3 of 6


Table width and height

You can specify the total width and height of your table using the width and height parameters inside our
<table>
tag. As in images, the default dimension unit is pixels, but you can also specify it as a percentage of its container using the % sign after the value number.

Example:

<table border="1" width="90" height="200">
	<tr> <td>A</td> <td>B</td> </tr>
	<tr> <td>C</td> <td>D</td> </tr>
</table>

will produce something like:
A B
C D

and

<table border="1" width="100%" height="80">
	<tr> <td>A</td> <td>B</td> </tr>
	<tr> <td>C</td> <td>D</td> </tr>
</table>

will render:
A B
C D


Note: By default, when you are coding in XHTML you cannot specify a table height in terms of percentage unless you include the following code within the
<head>
section:

<style>
body, html {
	 height: 100%;
 	}
</style>

This is called a CSS style modifier. We will learn the principles of CSS styles in the next tutorial.

  1. Create a new XHTML document, and write in the
    <body>
    section:
    <table border="1" width="200" height="500">
    	<tr> <td>Cell A</td> <td>Cell B</td> </tr>
    	<tr> <td>Cell C</td> <td>Cell D</td> </tr>
    </table>
  2. Test your file in your browser.
  3. Change the width and height values and test it again.

  1. Now include the following code inside the
    <head>
    section.
    <style>
    body, html {
    	height: 100%;
     	}
    </style>
  2. Change your table's width and height values, both to 100%.
  3. Test your file in your browser.
  4. Change the percentage values of width and height and see what happens.

In the next page we will discuss how to control the height of a single row and the width of a single column.

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

Comments & Questions