Tables

There are two ways to use tables in HTML. You can use tables to organize the layout of your Web page, and you can use tables to organize data.

Tables used in the layout of a Web page:
example 1a . example 1b
example 2a . example 2b

Table used to display data:
example 1 . example 2

Tables are used to hold together and position the images and content of your site and to align data side by side.

There are several tags that you use together to specify a table.

Some things to know about tables:

• Tables always involve a series of tags, not just one tag. Each of the following also require closing tags. These are:
  
  
  • Table <table>
    
    
  • Table Row (always come before table data) <tr>
    
    
  • Table Data (your text or images go inside the table data, not inside the table row) <td>
    
    
• The content of tables is displayed horizontally, each <td> adding a new column. The <tr> tag will add another row to the table. You need at least one row and one column to make a table.
  
  
• Tables can have attributes which assign the following:
  
  
  • The width of a table; the width of each column (the table data) inside the table
    
    
  • Whether the table has a border (use when using a table to display data) or does not have a border (use when using a table to design the layout of a page)
    
    
  • The background color, or background image of a table, row or column
    
    
  • Whether you want the table to merge several rows or columns together
    
    
  • How much extra spacing or padding in each table data

See this code for a simple table and how this can be used to lay out a Web page

Here is the code for another table:

<table width="400" border="1">
       <tr>
              <td>First column</td>
               <td> Second column</td>
       </tr>
       <tr>
              <td>First column in the second row</td>
              <td>Second column in the second row</td>
       </tr>
</table>

The above code produces the following table:

To add more columns to your table, include more <td> tags in the first row

<table bgcolor="#CCFF00" width="100%" border="3">
<tr>
<td>Marcia</td>
<td>Carol</td>
<td>Greg</td>
</tr>
</table>

To complete the Brady table, you need to add more rows:

<table bgcolor="#CCFF00" width="100%" border="3">
<tr>
<td>Marcia</td>
<td>Carol</td>
<td>Greg</td>
</tr>
<tr>
<td>Jan</td>
<td>Alice</td>
<td>Peter</td>
</tr>
<td>Cindy</td>
<td>Mike</td>
<td>Bobby</td>
</tr>
</table>

Notice how the content of the table reads horizontally. We list Marcia, Carol and Greg in the first row; Jan, Alice and Peter in the second, and Cindy, Mike and Bobby in the third.

What happens if you specify 3 columns in the first row, but less than 3 in successive rows?

<table bgcolor="#CCFF00" width="100%" border="3">
<tr>
<td>Marcia</td>
<td>Carol</td>
<td>Greg</td>
</tr>
<tr>
<td>Jan</td>
<td>Alice</td>
</tr>
<tr>
<td>Cindy</td>
</tr>
</table>

The table makes gaps in the absent spaces.

Merging Rows and Columns

Sometimes you might want to merge cells within a table. Look at the following code that demonstrates how you might use this to lay out the content of a page:

See the code for this table below

	Venus is a 4 year old shelter special, who barks when the newspaper is delivered and enjoys chasing squirrels. Other interests include walking, eating, and sleeping.

The above example merges 2 columns together in the first row. You can also merge rows together.

See the code for this table below

Nesting Tables

Sometimes it's easier to conceptualize tables by embedding new tables inside of a table data cell. I find that you have more control when precisely setting up your layout by designing tables this way.

See the code for this table below

Next: Using tables to create a design layout.