visible soul web design corpus christi logo

visible soulweb design

serving corpus christi, texas & the world

 

VPS Web Hosting

visiblesoul auction template tutorial #7
a simple table

< previous tutorial | tutorials home | next tutorial >

This is a simple table with a background color and a border.

Note that all text, images & other content goes inside the <td> tags.

Here is the html that I used to create this table:

<table align="center" width="100%" cellspacing="0" cellpadding="10" border="3" bgcolor="#E6ECF5">
  <tr>
    <td>
      <p>Content goes here.</p>
    </td>
  </tr>
</table>

<table> = table
<tr> = table row
<td> = table data/cell
<p> = paragraph


attributes for the <table> tag

  • align: The "align" attribute will align your table horizontally on the page. You may align a table left, right, or center.
  • width: Table width may be specified using percentage or pixel number. If you use percentages your table will resize to fit the screen at any monitor resolution. If you set the width using pixels your table will be static and will not resize. There are times when a static table comes in handy but it can also create problems if the table width is wider than a viewer's screen resolution width. To use pixel width just leave the percent sign off of your number.
  • cellspacing: Sets the distance between table "cells" in pixels. This will come in handy in the next tutorial.
  • cellpadding: Sets a "padding" between your text and the table border in pixels.
  • border: Sets the table border in pixels. For no border use "0".
  • bgcolor: To change background color just replace my "bgcolor" number (#E6ECF5) with your own color number or color name. There are many html color charts available. webmonkey's color chart is a nice example. This Color Number Calculator is also a handy tool.
  • background: Sets tiling background image for the table.


This is a simple table with a tiled background image.

Here is the html to use to create this table:


<table align="center" width="100%" cellspacing="0" cellpadding="10" border="3" bgcolor="#E6ECF5" background="URL_of_image">
  <tr>
    <td>
      <p>Content goes here.</p>
    </td>
  </tr>
</table>

Have a question? Post it on my forum!

Next tutorial: "nested" tables.

< previous tutorial | tutorials home | next tutorial >