The <TD>, Where You Place All The Content For Your Table |
The Explanation |
The HTML Code |
The most important element in the Table is the <TD> Tag, which means "Table Data", or more commonly the "Cell". This tag will contain all of the relevant data and control attributes for the data contained within the Cell. The TD Tag must have a closing tag, </TD>.
The types of data contained within the TD Tags are only limited by the ability of the browser to render the contents. The Cell can contain hyperlinks, images, form fields, and be blank. Note: Blank does not mean empty, Netscape will not display attributes inside an empty cell, it must contain a space character or a transparent image. |
The common form of the TD Tag.
<TD>The TD is also called The Cell</TD> |
|
| The following attributes are placed inside the opening TD Tag. |
Examples of the attributes and how they work. |
| "Align=" sets the content aligned to the left (default), center, right, or character. |
<TD align="center">This text is centered</TD>
|
|
| Sometimes you need to format a section of a table differently than evenly spaced rows and columns, sometimes you need a large block of space for special content, and still keep the general format of the table. This special formatting is called "Colspan" and "Rowspan". In this section we will discuss "Colspan". To put this in words, we create a table with several rows and columns, we then instruct a specific cell that it is going to span more than 1 row; that is, it will occupy more than 1 row. This will force the rows below to move down and to the extreme right side of the table. This will cause the table to have unsightly blots in the table. Because the "Rowspan" attribute Spans the specified number of rows we can delete the unwanted rows at the bottom and have a very clean looking table. |
| |
The Cell below spans 3 Rows
|
|
|
| |
 |
|
|
| |
|
|
| |
|
|
| |
|
|
|
The TD attribute looks like this:
<TD ALIGN=CENTER VALIGN=CENTER ROWSPAN="3"><img SRC="Computer.gif" height=64 width=64></TD>
Get The Code
|
| |
|
| Sometime you need to span columns to achieve a long narrow area for content. Colspan performs the same task as Rowspan except we span columns horizontally. Again, like Rowspan, we move cells to the right when we span a number of columns. You must delete the excess cells in the table after spanning the desired number of columns. |
| |
|
|
|
| |
Here we have spanned 2 cells |
|
| |
|
|
|
| |
|
|
|
The attribute code for Colspan:
<TD ALIGN=CENTER VALIGN=CENTER COLSPAN="2"><b>Here we have spanned 2 cells</b></TD>
Get The Code
|
| |
|
| With the inclusion of both Colspan and Rowspan you can develop your tables into attractive and informative containers for your content. In the right column we will show you a table with both Colspan and Rowspan, and a link to copy the table code. |
Table with colspan="2" and Rowspan="2"
Get The Code |
|
