
visiblesoul auction template tutorial #9
table rows and cells
< previous tutorial | tutorials home | next tutorial >
|
This is a table with 2 rows.
This is the top row.
Here is the html that I used to create this table:
<table align="center" width="100%" cellspacing="5" cellpadding="10" border="3" bgcolor="#E6ECF5">
<tr>
<td>
<p>Text goes here.</p>
</td>
</tr>
<tr>
<td>
<p>Text goes here.</p>
</td>
</tr>
</table>
|
|
This is the bottom row.
You can use as many rows as you need to build your auction template.
<tr> attributes
align: The "align" attribute will align the contents of your row horizontally. You may align a table row <tr> left, right, or center by using this form: <tr align="right">. Default alignment is left.
valign: The "valign" (vertical align) attribute will align the contents of your row vertically. You may valign a table row <tr> top, bottom, middle, or baseline by using this form: <tr valign="bottom">. Default alignment is top.
bgcolor: Sets background color for the table row. Use this form: <tr bgcolor="red">.
background: Sets tiling background image for the table row. Use this form: <tr background="URL_of_image">.
|
|
This is a table with 1 row and 2 <td> cells.
This is the left <td> cell.
Here is the html that I used to create this table:
<table align="center" width="100%" cellspacing="5" cellpadding="10" border="3" bgcolor="#E6ECF5">
<tr valign="top">
<td width="50%">
<p>Left cell text goes here.</p>
</td>
<td width="50%">
<p>Right cell text goes here.</p>
</td>
</tr>
</table>
|
This is the right <td> cell.
<td> attributes
width: Sets the width of a cell. Use percentage or pixil width.
valign: The "valign" (vertical align) attribute will align the contents of your cell vertically. You may valign a table cell <td> top, bottom, middle, or baseline by using this form: <td valign="bottom">. Default alignment is top.
bgcolor: Sets background color for the cell. Use this form: <td bgcolor="red">.
background: Sets tiling background image for the cell. Use this form: <td background="URL_of_image">.
colspan: Specifies the number of columns a cell should span.
rowspan: Specifies the number of rows a cell should span.
|
|
Now this is where you start to see an auction template really start to take shape. By using the "colspan" attribute in the <td> tag we can make a table with 1 long cell on top and 2 cells under it. So, for instance, you could have your auction description in the top cell and your shipping and payment information in 2 separate cells below it.
Here is the html that I used to create this table:
<table align="center" width="100%" cellspacing="5" cellpadding="10" border="3" bgcolor="#E6ECF5">
<tr valign="top">
<td colspan="2">
<p>Top cell text goes here.</p>
</td>
</tr>
<tr valign="top">
<td width="50%">
<p>Bottom left cell text goes here.</p>
</td>
<td width="50%">
<p>Bottom right cell text goes here.</p>
</td>
</tr>
</table>
|
|
Bottom left cell.
|
Bottom right cell.
|
Have a question? Post it on my forum!
Next tutorial: ?
< previous tutorial | tutorials home | next tutorial >