visible soul web design corpus christi logo

visible soulweb design

serving corpus christi, texas & the world

 

VPS Web Hosting

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 >