Building a Table with simple tags. |
The Explanation |
The HTML Code |
| The table is the most important element in a HTML document; the table is what holds the content together and permits artistic design by the web page designer. In the right column are the required table tags to begin, hold content, and end the table. Additional pages will go into detail on the internal table tags holding page content. |
<Table>
<TR>
<TD>This is a Cell.</TD>
</TR>
</Table>
|
| All Table element tags will have an opening tag, and must have a closing tag. The closing tags must be in the reverse order of the opening tags. |
Failure to follow these rules will create unpredictable results in all browsers, Internet Explorer is the only browser that will try to compensate for code errors. |
|
Inside the Table Tag you can add attributes to control how the table will render in a browser.
- These attributes are:
- Align="..." Places the Table on the left, center, or right.
- Background="URL" Inserts a background image.
- Bgcolor="#FFFFFF" Colors the table background.
- Border="n" Sets the table border size (px).
- Cellpadding ="n" Sets the space between the table cell and it's content (px).
- Cellspacing="n" Sets the space between the borders of the table (px).
- Cols="n" Sets the number of columns in the table (whole number).
- Width="n" Sets the table size in width (%, or px).
|
A Sample Table Tag
<table align="center" bgcolor="#FFFFFF" border="1" cellpadding="1" cellspacing="1" cols="2" width="80%">
A Table with the above tags.
|
| The Table is made up of more than just the <Table> Tag, it also includes the <TR>, and <TD> tags. In the right column we will identify these tags graphically with a table. In later pages we will move more deeply into how these tags perform and the attributes that can be used with them. These tags can be found on the navigation panel. |
| <TR> This is Row #1 with 1 Cell |
| Row #2 <TD>Cell #1</TD> |
<TD>Cell #2</TD> |
|
|
| After you have created the <Table> Tag and it's attributes you begin building your table Row by Row. The Row opens with a <TR> (Table Row) Tag and must have a closing </TR> Tag. Between the opening and closing TR Tags you insert the Row Tags that make up the individual table cells. |
| <Table> This opens the Table |
| <TR> This opens the Row |
| <TD>Cell #1</TD> |
<TD>Cell #2</TD> |
| </TR> This is closes the Row |
| </Table> This closes the Table |
|
|
| The TD Tag (Table Data), also called the Cell, contains all of the visible content for the Table. The Cell opens with <TD> and must have a closing tag </TD>. The closing tag for the TD is critical in it's placement in the code, it must be placed on the same line as the last display element. If we use the following text string, "The closing tag for the TD", as our display element we can demonstrate the correct and incorrect placement of the closing tag </TD> |
The correct placement of the closing tag.
<TD>"The closing tag for the TD"</TD>
The incorrect placement of the closing tag
<TD>"The closing tag for the TD"
</TD>
In the example above the </TD> is on a "New Line" below the Cell content. |
| To understand the value of the Table we need to know more about the construction of the Table. As stated earlier a Table consists of Rows, and Cells; in identifying where we are working in the table we must also have Columns. Columns are an attribute used in the <Table> tag to tell the browser how may columns to expect in the Table. Reference to Columns will also appear in the section under the <TD> tag. |
| Column 1, 4 Rows |
Column 2, 2 Rows |
Column 3, 2 Rows |
| Cell |
Cell |
Cell |
| Cell |
| Cell |
|
| One more example of the versatility of the table, a table within a table. Here we place the second table inside a Cell of the first table. |
|
|
Here is the code that created the above tables.
Copy the code and paste into a new text document and print for reference.
Enter the code into your working document and test with your browser.
The Code
|
Your web page should look like the pop up page in the link below.
The Code
|
|
