0 views

Tables

Basic Table

<br /> <table> <tr> <td>Text goes here</td> </tr> </table> <p>

Text goes here

Extras for <table> tag
You can place the following codes in the table tag.

bgcolor=COLOR
background=IMAGE URL
border=NUMBER

bordercolor=COLOR
cellpadding=NUMBER
cellspacing=NUMBER

Example:

<br /> <table bgcolor=green border=5 bordercolor=yellow cellpadding=6 cellspacing=3>

<tr> tag
This tag controls the number of rows in your table.

<td> tag
This tag controls how many columns per row. It goes between the rows tags.

<br /> <tr> <td>text goes here</td> </tr> <p>.
Text goes in between the columns tags.
You can also control the color of each column. <td bgcolor=COLOR>TEXT</td> <p>

Row spans

<br /> <table border=2 bordercolor=blue cellspacing=0 cellpadding=3> <tr> <td rowspan=4><center><font color=9966FF>Row span =4 <td><font color=9966FF>Text<br /> <tr> <td><center><font color=9966FF>Text
<br /> <tr> <td><center><font color=9966FF>Text<br /> <tr> <td><center><font color=9966FF>Text</table> <p>
Rowspan is code that determines how many rows to span.

Row span =4
Text
Text

Text
Text

Column spans

<br /> <table border=2 bordercolor=blue cellspacing=0 cellpadding=3> <tr> <td colspan=2><center><font color=9966FF>Colspan=2<br /> <tr> <td><center><font color=9966FF>Text <td><center><font color=9966FF>Text</table> <p>
Colspan is code that determines how many columns to span.

Colspan=2
Text
Text

No Outside Border

<br /> <table border=4 bordercolor=black frame=void> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p><xmp></p> <table border=4 bordercolor=black frame=void> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p><b><u>No Side Borders</u></b></p> <p><xmp><br /> <table border=4 bordercolor=black frame=hsides> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p>

No Top/Bottom Border

<br /> <table border=4 bordercolor=black frame=vsides> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p>

text text
text text

No inside borders

<br /> <table border=4 bordercolor=black rules=none> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p>

text text
text text

Only Column Borders

<br /> <table border=4 bordercolor=black rules=cols> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p>

text text
text text

Only Row Borders

<br /> <table border=4 bordercolor=black rules=rows> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> <p>

text text
text text

Table Examples

</p> <table bgcolor=yellow border=5 bordercolor=aqua cellpadding=6 cellspacing=4> <tr> <td colspan=5> <center>Text Text Text Text Text</center>
</td> </tr> <tr> <td><center>Text</center></td> <td><center>Text</center></td> <td><center>Text</center></td> <td><center>Text</center>
</td> <td><center>Text</center></td> </tr> </table> <p>

Text Text Text Text Text
Text
Text
Text
Text
Text

</p> <table border=5 bordercolor=lime> <tr> <td bgcolor=white> <font color=springgreen>Text</font></td> </tr> <tr> <td bgcolor=red> <font color=white>Text</font></td> </tr> <tr> <td bgcolor=blue> <font color=springgreen>Text</font></td> </tr> </table> <p>

Text
Text
Text

<br /> <table border=5 bordercolor=magenta<br /> cellspacing=0 cellpadding=2<br /> rules=rows><br /> <tr> <td bgcolor=blueviolet> <font color=lime>Text</font></td> <td bgcolor=dodgerblue> <font color=pink>Text</font></td> </tr> <tr> <td bgcolor=springgreen> <font color=blue>Text</font></td> <td bgcolor=blue> <font color=lime>Text</font></td> </tr> </table> <p>

cellspacing=0 cellpadding=2
rules=rows>
Text Text
Text Text

<br /> <table border=6 bordercolor=lime<br /> background=IMAGE URL<br /> height=90><br /> <tr> <td>Example</td> </tr> </table> <p>

background="727r9s8.gif"
height=90>
Example

Table within a table

<TABLE BORDER="3" CELLPADDING="10" CELLSPACING="10"><br /> <TD></p> <p> <TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3"><br /> <TD>2nd Table</TD><br /> <TD>2nd Table</TD><br /> <TR><br /> <TD>2nd Table</TD><br /> <TD>2nd Table</TD><br /> </TR><br /> </TABLE></p> <p> </TD><br /> <TD> The cell next to this one has a smaller table inside of it, a table inside a table.</TD><br /> </TABLE>








2nd Table 2nd Table
2nd Table 2nd Table

The cell next to this one has a smaller table inside of it, a table inside a table.

Table Header

<th></th> <p>
Sets off the table header (a normal cell with bold, centered text)

Table Cell Alignment

<br /> <tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)

<br /> <tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)

Nowrap

<td nowrap>
Prevents the lines within a cell from being broken to fit