Tables are used to put tabular data on a Web site. Tabular data is like a chart which you put a small amount of organized information in. Back when I first started this site, tables were the only way to layout a site. Today, site layout is better accomplished with CSS. You can find out more about laying out a site with css here.


What are the table tags and definitions?

• Table The table tag looks like this: <table></table>. All of your table information goes between these two tags to make up a table. All tables start with the <table> tag and end with the </table> tag.
• Table row An individual row that contains at least one data cell. On this page I've used two data cells. The tag looks like this: <tr></tr>.
• Table data An individual cell in a table row. The tag looks like this: <td></td>. The table, table row, and table data tags always nest like this: <table><tr><td></td></tr></table>
  
  Here is an example of a table with rows and cells:
  
  

  cell   cell         cell

  <--This is a row

  
  
• Border Adding this to your table tag lets you specify whether or not your table has borders. The table I've used for my page has no borders.
• Bgcolor You can add this tag to change the background color of your table, row, or table cells. You can make each row a different color, even the different cells can be different colors.
• Align This tag helps you align your text in the table, row or cell. If you don't add it, your image or text will be aligned to the left (it's the default). You can specify center or left to change the alignment.
• Valign This tag aligns your table vertically. If you don't change it to "top" or "bottom" your information in your table will be aligned vertically in the center.
• Cellpadding This sets the margins inside of your table cells on all four sides of your cell.
• Cellspacing This sets the spacing between your table cells.
• Rowspan Adding this creates a column that spans your rows vertically, it can span all or some of your rows.
  
  

  row 1	rows 1-3	row 1	row 1
  row 2		rows 2-3	row 2
  row 3			row 3

  
  
• Colspan The colspan tag makes the data cell stretch over two or more columns.
  
  

  Lissa Explains it All
  cell 1	cell 2	cell 3	cell 4
  cell 5	cell 6	cell 7	cell 8

I have a little HTML editor that can help you see how any kind of table is formatted into HTML code. The editor is only for those who use the Internet Explorer browser. It shouldn't take the place of you learning how to make your own tables, but it's a fun tool that can help you see how tables work.



How do I make a basic table?   Here are some examples of simple tables. Different browsers don't show tables the same way, even if you use the same codes.

Cell 1 Cell 2

<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>

Cell 1 Cell 2 Cell 3 Cell 4

<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

How do I add a border to my tables?

Cell 1 Cell 2 Cell 3 Cell 4

<table border="8"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

How do I add color to my tables?

Cell 1 Cell 2 Cell 3 Cell 4

<table border="8"> <tr> <td bgcolor="#00CCFF">Cell 1</td> <td bgcolor="#CC00FF">Cell 2</td> </tr> <tr> <td bgcolor="#00FF00">Cell 3</td> <td bgcolor="#FFFF00">Cell 4</td> </tr> </table>

How do I get rid of my border?   Just add the tag border="0" to your table tag:

Cell 1 Cell 2 Cell 3 Cell 4

<table border="0" cellspacing="0"> <tr> <td bgcolor="#00CCFF">Cell 1</td> <td bgcolor="#CC00FF">Cell 2</td> </tr> <tr> <td bgcolor="#00FF00">Cell 3</td> <td bgcolor="#FFFF00">Cell 4</td> </tr> </table>

row 1 rows 1-3 row 1 row 1 row 2 rows 2-3 row 2 row 3 row 3

<table border="0" cellspacing="0"> <tr> <td bgcolor="#00CCFF">row 1</td> <td bgcolor="#FFFF00" rowspan=3>rows 1-3</td> <td bgcolor="#CC00FF">row 1</td> <td bgcolor="#00FF00">row 1</td> </tr> <tr> <td bgcolor="#00FF00">row 2</TD><td bgcolor="#00FF00" rowspan=2>rows 2-3</td> <td bgcolor="#00CCFF">row 2</td> </tr> <tr> <td bgcolor="#ff33cc">row 3</td> <td bgcolor="#ff33cc">row 3</td> </tr> </table>

Lissa Explains it All cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8

<table border="0" cellspacing="0" cellpadding="5"> <tr> <td bgcolor="#FFFF00" colspan=4>Lissa Explains it All</td> </tr> <tr> <td bgcolor="#00CCFF">cell 1</td> <td bgcolor="#CC00FF">cell 2</td> <td bgcolor="#ff33cc">cell 3</td> <td bgcolor="#00FF00">cell 4</td> </tr> <tr> <td bgcolor="#ff33cc">cell 5</td> <td bgcolor="#00FF00">cell 6</td> <td bgcolor="#00CCFF">cell 7</td> <td bgcolor="#CC00FF">cell 8</td> </tr> </table>

How do I set widths for my table?   Just add the width tag with specific widths to your table tag. You can also specify percentages in the tag, for instance <width=30%>. Just make sure the widths and percentages add up to 100%.

Cell 1 Cell 2

<table border="0" cellpadding="5" cellspacing="10" width="200"> <tr> <td bgcolor="#00FF00" width="50" >Cell 1</td> <td bgcolor="#FFFF00" width="150" >Cell 2</td> </tr> </table>

How do I add a background to my table?   It's very simple to add a background to a table. In the table tag (it's the first tag in your table) add style="background-image:url(yourfilename.gif)" like this:

<table style="background-image:url(yourfilename.gif)">

A background will fill your whole table.

Cell 1	Cell 2
Cell 3	Cell 4

Just need a background in one or more cells of your table? Add the background to the individual cell like this:

<td style="background-image:url(yourfilename.gif)">

Cell 1	Cell 2
Cell 3	Cell 4

How do I nest tables?   Nesting tables is simple. You can add any table inside of your existing table as long as it begins and ends in a <td> tag:

<table>
<tr>
<td>
      <table>
      <tr>
      <td>
            <table>
            <tr>
            <td>
            </td>
            </tr>
            </table>
      </td>
      </tr>
      </table>
</td>
</tr>
</table>

lissaexplains.com