Table Alignment and Sizing

In this lesson, we'll learn how to make the table on the left, right, or in the center of the screen. First off let's get the table and it's code from the previous lesson.

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

Now let's tackle alignment first. These three tables are simply the above table aligned left, center, and right.

Remember how we aligned images? We just used the align attribute. This is the same way we align a table.

<table border="1" bordercolor="red" align="left">
<tr>
<td>Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

Remember that the value of the align attribute can be left, right, or center.

Let's add a width attribute. You can use pixels or a percentage of the screen width. Pixels are the little individual dots that make up the computer screen. I will use pixels here, but remember that your table will look different to people with different screen resolutions.

<table border="1" bordercolor="red" width="300px">
<tr>
<td>Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

The "px" after the number states that you are using pixels. You can omit the px if you would prefer. If you are using a percentage, you must put the percentage sign (%) after the number. Make sure not to go over 100% or it will get messy and go off of the page. The 300px wide table is shown below.

Now you can do the same thing for the height. With the height, it's very advisable not to use percentages, since if you add anything to the page, it's going to get longer, and that means your table will get longer too! If you are sure you are not going to add anything else, you can use percentages but it's still a good idea to use pixels anywhere you can.

This table has a width and height of 300px. The code looks like this:

<table border="1" bordercolor="red" width="300px" height="300px">
<tr>
<td>Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

That's the end of this lesson. Next we will work on the size and alignment of individual cells.