What are the table tags and definitions?
- Table: The table tag is this <table></table> All of your information will go between these two tags to make up the table.
- Table row: A row that contains at least one data cell. The tag looks like this <tr> </tr>
- Table data: An indiviual cell in a row. This tag looks like <td></td>
A complete table tag looks like this <table><tr><td></td></tr></table>
There are different attributes you can assign to your tables. I'll list the following attributes for you.
- border: This attributes will tell your table to have a border or not. You can change the width of the border by using a higher number. A typical border uses a 1 or 2 pixel border. This tag looks like this <table border="1">
- bgcolor: You can use this tag to change the background color of your entire table or single cells. This tag looks like this
<table bgcolor="09734c"> for the entire table or
<td bgcolor="09734c"> for a single cell
- Align: This aligns your text in the table, row or cell. If you don't state where you want it aligned it will be automatically aligned to the left.
This tag looks like this
<table align="center">
- Valign: This tag aligns your table vertically. If you don't change it to 'top' or 'bottom' your text will be aligned in the centre.
This tag looks like this
<table valign="top">
- Cellpadding: This tag sets the margins inside your table cells.
This tag looks like
<table cellpadding="1">
- Cellspacing: This tag sets the spacing between your table cells.
This tag looks like
<table cellspacing="1">
- Rowspan: Adding this creates a column that spans your rows vertically. You can set it to span all or some of your rows.
Here is an example of a table using rows
| Row 1 |
rows
1-3 |
Row 1 |
| row 2 |
rows
2-3 |
| row 3 |
- Colspan: Adding this creates a data cell that will stretch over two or more columns.
Here is an example of a table using columns
| PowerPets Mania! |
| cell 1 |
cell 2 |
cell 3 |
| cell 4 |
cell 5 |
cell 6 |
What's a basic table like? These are some basic tables that you are free to use on your profile.
|
|
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table> |
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
|
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
|
How do I add a border to my table? You can use any number for your table border (I even tested it to 990...it still works!...though highly inadvisable since it stretches the page :P)
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
|
<table border="5">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table> |
How can I add color to my tables?
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
|
<table border="5">
<tr>
<td bgcolor="#4682B4">Cell 1<</td>
<td bgcolor="#AFEEEE">Cell 2</td>
</tr>
<tr>
<td bgcolor="#3CB371">Cell 3</td>
<td bgcolor="#BC8F8F">Cell 4</td>
</tr>
</table> |
How do you use an image for the background?
This code is slightly different from the others, but still very easy.
|
|
<table style="background-image:url(image url here)" border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr></table> |
You can also put an image as a background into a single cell. Just us this code instead of the regular <td> code
<td style="background-image:url(yourfilename.gif)">
And it will look something like this...
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
I hope you found my guide on tables useful, if you have any questions on tables (remember, this is just a very basic guide there is a lot more that you can do with tables) or html/css in general please don't hesitate in pmailing Lady_Penrhyn with your question,
if she's doesn't know it, she will google it until she does. :) |
