First we’ll need to insert table tags to let the browser know that you are beginning a table.
<body><table> </table></body>
Then we add the row tag to let the browser know you are beginning a row.
<body><table> <tr> </tr></table></body>
Then we need to let the browser know we will be opening a cell.
<body><table> <tr><td> </td> </tr></table></body>
Let’s give the table a border. To do this, simply insert the border attribute into the table tag. The border width can be as wide as 100 pixels.
<body><table border=”1″> <tr><td> </td> </tr></table></body>
Now let’s putsome text in the cell.
<body><table border=”1″> <tr><td>Text1 </td> </tr></table></body>
The table you have just created will look like this:
| Text1 |
Let’s say we wanted another textbox in a new column. All we would have to do is add another cell tag and the text to be inserted, as follows:
<body>
<table border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
Now your table will look like this:
| Text1 | Text2 |
Now what would you do if you wanted to add another column? You guessed it! Add another cell tag, as follows:
| <body> <table border=”1″> <tr> <td>Text1 </td> <td>Text2 </td> <td>Text3 </td> </tr> </table> </body> |
Now your table will look like this:
| Text1 | Text2 | Text3 |
Let’s go back to the first table we have created and let’s say we wanted our table to have three rows instead of three columns. What you need to do is add a new row tag for each new row and insert a cell tag for however many cells there are in the row, as follows:
<body>
<table border=”1″>
<tr><td>Text1 </td></tr>
<tr><td>Text2 </td></tr>
<tr><td>Text3 </td></tr>
</table>
</body>
Now your table will look like this:
| Text1 |
| Text2 |
| Text3 |
Now let’s get a little more daring. Say we wanted a table with three columns and three rows. That would mean we would need three row tags for each of our rows and each row will need three cell tags for each cell in that row. Let’s look at the code below:
<body> <tr> <tr> <tr>
|
Now your table will look like this:
| Text1 | Text2 | Text3 |
| Text4 | Text5 | Text6 |
| Text7 | Text8 | Text9 |
Perhaps you wouldn’t like the table to take up the whole width of the browser window. Say you only wanted to take up 50% of the browser window.
To make things a little less crowed let’s go back to our first table example and let’s add the width attribute.
<body>
<table width=”50%” border=”1″>
<tr>
<td>Text1 </td>
</tr>
</table>
</body>
The result would be:
| Text1 |
As you can see the table has now reduced in half and only takes up half the width of the browser. Keep in mind that by using a percent value the table will take up 50% of the browser window. Therefore it may look very different in
two different browsers.
To make things more exact you can measure the width of the table by using pixels. To do this, simply leave out the
percent sign, like so:
<body>
<table width=”100″ border=”1″>
<tr>
<td>Text1 </td>
</tr>
</table>
</body>
Now the table will look like this:
| Text1 |
You can also set the height of a table, like so:
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td>Text1 </td>
</tr>
</table>
</body>
Now the table will look like this:
| Text1 |
You can align the entire table left, right or center.
<body>
<table align=”right” width=”100″ height=”100″ border=”1″>
<tr>
<td>Text1 </td>
</tr>
</table>
</body>
| Text1 |
You can control where the text within a cell will appear horizontally and vertically.
By default the text in a cell will be aligned left. Meaning, if you do not specify how to align it it will automatically be aligned left, like so:
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td>Text1 </td>
</tr>
</table>
</body>
| Text1 |
To align the text right simply insert the align attribute within the opening cell tag (<td>), like so:
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td align=”right”>Text1 </td>
</tr>
</table>
</body>
| Text1 |
To center the text simply insert align=”center” within the opening cell tag (<td>), like so:
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td align=”center” >Text1 </td>
</tr>
</table>
</body>
Text1 |
To align the text vertically we use a similar attribute.
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td valign=”top” >Text1 </td>
</tr>
</table>
</body>
Text1 |
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td valign=”bottom” >Text1 </td>
</tr>
</table>
</body>
| Text1 |
<body>
<table width=”100″ height=”100″ border=”1″>
<tr>
<td valign=”middle” >Text1 </td>
</tr>
</table>
</body>
Text1 |
By default the text will be vertically aligned in the middle. Meaning, if you insert the attribute valign=”middle” it is the equivalent of inserting nothing.
Lesson 16 – Cellpadding
The cellpadding of a table determines how much space there will be between the cell content and it’s borders. For example:
<body>
<table cellpadding=”10″ border=”1″>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
</body>
The result would be:
Text1 Text2
We can make the space even bigger:
<body>
<table cellpadding=”20″ border=”1″>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
</body>
The result would be:
Text1 Text2
We can also control how much distance there will be between cells.
<body>
<table cellspacing=”10″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
Text1 Text2
We can make that distance even bigger:
<body>
<table cellspacing=”20″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
Text1 Text2
You can also put both the cellpadding and the cellspacing attributes together, like so:
<body>
<table cellspacing=”20″ cellpadding=”20″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
Text1 Text2
By default the cellpadding and the cellspacing will be 2. By setting the values to 0 the borders will appear as simple grey lines as shown below:
<body>
<table cellspacing=”0″ cellpadding=”0″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
Text1 Text2
Lesson 17 – Table border color
You can change the color of a table border by inserting the bordercolor attribute within the opening table tag (<table>).
<table border=”1″ bordercolor=”#0000CC”>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
Text1 Text2
Lesson 18 – Background Color
You can change the background color of a table or cell by inserting the bgcolor attribute. To set the background color of a table insert the attribute into the opening table tag.
<body>
<table border=”1″ bgcolor=”#FF0000″>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
</body>
Lesson 16 – Cellpadding
The cellpadding of a table determines how much space there will be between the cell content and it’s borders. For example:
<body>
<table cellpadding=”10″ border=”1″>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
</body>
The result would be:
| Text1 | Text2 |
We can make the space even bigger:
<body>
<table cellpadding=”20″ border=”1″>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
</body>
The result would be:
| Text1 | Text2 |
We can also control how much distance there will be between cells.
<body>
<table cellspacing=”10″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
| Text1 | Text2 |
We can make that distance even bigger:
<body>
<table cellspacing=”20″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
| Text1 | Text2 |
You can also put both the cellpadding and the cellspacing attributes together, like so:
<body>
<table cellspacing=”20″ cellpadding=”20″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
| Text1 | Text2 |
By default the cellpadding and the cellspacing will be 2. By setting the values to 0 the borders will appear as simple grey lines as shown below:
<body>
<table cellspacing=”0″ cellpadding=”0″ border=”1″>
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table>
</body>
| Text1 | Text2 |
You can change the color of a table border by inserting the bordercolor attribute within the opening table tag (<table>).
<table border=”1″ bordercolor=”#0000CC”>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
| Text1 | Text2 |
You can change the background color of a table or cell by inserting the bgcolor attribute. To set the background color of a table insert the attribute into the opening table tag.
<body>
<table border=”1″ bgcolor=”#FF0000″>
<tr>
<td>Text1</td>
<td>Text2</td>
</tr>
</table>
</body>