This is our new table tutorial. It does NOT provide a tables layout code. This only teaches you about the meanings of the tables tags. Learning what the tags mean will help you create your own table so you can make your own layout code. This tutorial is not complete but it does offer enough information to help you create your own table. We will update and add new information next time.

Please do not copy this tutorial.
Instead feel free to link this site to your site with one of our buttons. This tutorial was written by Lukia

Table Tutorial

How to Make a Table

First lets begin with what tags are included and what they mean:

<table> - This tag starts the beginning of the table.
</table> - This tag ends the table.
<tr> - This tag starts a row.
</tr> - This tag ends a row.
<td> - This tag starts table data.
</td> - This tag ends table data.

------------------------------------------------------------------------[Back to top]

Here is an example of a simple 2x2 table:

2x2 Code:
<table border="1" cellpadding="10"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Cell 1	Cell 2
Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

border="0" - Adding this tag in between the tables tag allows you to have a border. Changing the number will determine whether or not border is thick or not. The greater the number the thincker the border line. An example code should look like this: <table border="1">
An example table with this should look like this:

Cell 1	Cell 2
Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

bordercolor="#000000" - Adding this tag in between the tables tag allows you to have a colored border. By adding the color code will allow you to change the color of the background. An example code should look like this: <table border="1" colorborder="#FF0000">
An example table with this should look like this:

Cell 1	Cell 2
Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

bgcolor="#000000" - Adding this tag in between the tables tag allows you to have a colored background. By adding the color code will allow you to change the color of the background. An example code should look like this: <table bgcolor="#000000">
An example table with this should look like this:

Cell 1	Cell 2
Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

cellspacing="0" - Adding this tag in between the tables tag allows you to add padding to your cells. Note the thickness of the border. An example code should look like this: <table cellspacing="5">
An example table with this should look like this:

Cell 1	Cell 2
Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

cellpadding="0" - Adding this tag in between the tables tag allows you to add space to your cells. Note the space between the text and border. An example code should look like this: <table cellpadding="10">
An example table with this should look like this:

Cell 1	Cell 2
Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

rowspan="0" - Adding this tag in between the row tags allows you to create a column that spans your rows vertically. It can also span some or all of your rows. An example code should look like this: <td rowspan="1">
An example table with this should look like this:

Cell 1	Cell 2	Cell 4
Cell 1	Cell 3	Cell 5

------------------------------------------------------------------------[Back to top]

colspan="0" - Adding this tag in between the row tags allows you to create and stretch a cell to make a column. An example code should look like this: <td colspan="1">
An example table with this should look like this:

Cell 1
Cell 2	Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

align="left/right/center" - Adding this tag allows you to align your text in the table, cell or row. Unless you specify where you want the text all text are aligned to the left because it is a default. You can use left, right, or center. An example code should look like this: <td align="left">
<td align="right">
<td align="center">
An example table with this should look like this:

Cell 1
Cell 2	Cell 3	Cell 4

------------------------------------------------------------------------[Back to top]

Valign="top/bottom" - Adding this tag will allow you to align your table vertically. You have the option of having it at the "top" or the "bottom" of your table. If you do not change it the default will be the center. An example code should look like this: <td Valign="top">
<td Valign="bottom">
An example table with this should look like this:

Cell 1
Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7

------------------------------------------------------------------------[Back to top]

Here is a example of a table that uses all the above tags:

Table Code:
<table border="1" bordercolor="FF0000" bgcolor="CCCCFF" cellspacing="5" cellpadding="10"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td rowspan="2">Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> </tr> </table>

Cell 1
Cell 2	Cell 3	Cell 5
	Cell 4	Cell 6

This tutorial was written by Lukia
This tutorial has been tested

Terms and Conditions

Please do not copy this tutorial.
Instead feel free to link this site to your site with one of our button Feel free to comment on the Tag board or send us a message to let us know what you thought about this tutorial. If you are still having trouble with this tutorial feel free to contact me. Note*- All images open in a new page.

Credits

All Anime Images © Respective Owners.
No parts of this site may be reproduced without permission.
Layout and Content © 2007-2008 to Crystallized Anime Dreams.