|
|
|
|
Basic HTML Tables
Instructions on how to make a basic TABLE in HTML for formating your web pages.
<TABLE>
This is the basic tag you will need to start a table, and remember to end the table with this tag: </TABLE>
<TABLE CELLSPACING="3">
This is the amount of space between each cell in pixels. "3" means 3 pixels of space between each cell.
<TABLE CELLPADDING="3">
This is the amount of pads in each cell pixels: "3" means 3 pixels of padding in each cell.
<TABLE WIDTH="200">
The width of your table in pixels. Adjust to fit your site as needed.
<TABLE BORDER="2">
This is the width of the border around your table. "2" mean the thickness in pixels. When using boarders the color will be the same as your hyper link color.
<TABLE ALIGN="Right">
This will aligns the table to the right, left or center of your page depending on what you put in your tag.
<p align="center">
<font color="#FFFFFF">
This is your text alignment and color of the text. In this case the text will be centered in the table with the text being white in color.
<TABLE BGCOLOR="#000000">
Background color of your table. The one above would be a Black background.
<TABLE HEIGHT="100">
The height of your table in pixels. Adjust to fit your site.
<TABLE BACKGROUND="yourimage.gif">
You can use any image as your background.
<TR>
A row in your table.
<INPUT SIZE="5">
The size of your input box in length. Adjust to fit your table.
<TD>
A cell in a row of your table.
You can give each cell the following attributes:
<TD WIDTH="200" BGCOLOR="#000000" ALIGN="Center">
<font color="#FFFFFF">
This is the table</font>
</table>
This would mean the table has a width of 200 pixels with a background color or black and it aligned to the right side of your page.
The above code will make this table:
Lets make a TABLE:
<TABLE WIDTH="200" BGCOLOR="#000000" BORDER="1"
CELLPADDING="3" CELLSPACING="3">
<TR>
<TD WIDTH="125" VALIGN="CENTER">
<p align="center">
<font color="#FFFFFF">
Our!</font>
</p>
</TD>
<TD WIDTH="125" VALIGN="CENTER">
<p align="center">
<font color="#FFFFFF">
Table!</font>
</p>
</TD>
</TR>
</TABLE>
The above code will make this table:
Here is the same code as above with "0" for the "BORDER" and "CELLSPACING" just to show you the difference:
<TABLE WIDTH="200" BGCOLOR="BLACK" BORDER="0"
CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="125" VALIGN="CENTER">
<p align="center">
<font color="#FFFFFF">
Our!</font>
</p>
</TD>
<TD WIDTH="125" VALIGN="CENTER">
<p align="center">
<font color="#FFFFFF">
Table!</font>
</p>
</TD>
</TR>
</TABLE>
The above code will make this table:
We added another row with two cells One being red and the other white:
<table BORDER=1 CELLSPACING=3 CELLPADDING=3 WIDTH="200" BGCOLOR="#3366FF" >
<tr>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="125" BGCOLOR="#FF0000">
<font color="#FFFFFF">
Added</font>
</td>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="125" BGCOLOR="#FFFFFF">
<font color="#000000">
Row</font>
</td>
</tr>
<tr>
<td VALIGN=CENTER WIDTH="125">
<center>
<font color="#FFFFFF">
Our!</font>
</center>
</td>
<td VALIGN=CENTER WIDTH="125">
<center>
<font color="#FFFFFF">
Table!</font>
</center>
</td>
</tr>
</table>
The above code will make this table:
In the following table we will make a cell on top that will span over the three columns with a tag called "COLSPAN":
Here is the code for the below table:
<table BORDER CELLSPACING=3 CELLPADDING=3 WIDTH="200" BGCOLOR="#3366FF" >
<tr>
<td ALIGN=CENTER VALIGN=CENTER COLSPAN="3" WIDTH="375" BGCOLOR="#FF0000">
<font color="#FFFFFF">
Added
Row (spans 3 cells)</font>
</td>
</tr>
<tr>
<td VALIGN=CENTER WIDTH="125">
<center>
<font color="#FFFFFF">
Our!</font>
</center>
</td>
<td VALIGN=CENTER WIDTH="125">
<center>
<font color="#FFFFFF">
NEW</font>
</center>
</td>
<td VALIGN=CENTER WIDTH="125">
<center>
<font color="#FFFFFF">
Table!</font>
</center>
</td>
</tr>
</table>
The above code will make this table:
|
Added Row (spans 3 cells)
|
|
Our!
|
NEW
|
Table!
|
Return to Help Guides
|
|
|
|
|
