A Table Icon HTML does not have a tag for Tabs. However, Tables allow you to present data in columns and rows. Although cascading stylesheets are primarily used today for page layout, tables are very convenient for presenting pure row and column format. They can be convenient for a Contact page, where the text labels are typically presented in the left column and the corresponding textboxes for data entry are contained in the right column, and where each label and each associated textbox must be neatly lined up horizontally and vertically.

Below is a simple example of a two row by two column table:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

The main three tags used to create tables are:

You can see these three tags in the code below.

<table style="width:400px">
  <tr>
    <td
>Row 1 Column 1</td> <!-- Note: the TDs are nested in the TRs -->
    <td>
Row 1 Column 2</td>
  </tr>
  <tr>
    <td>
Row 2 Column 1</td>
    <td>
Row 2 Column 2</td>
  </tr>
</table>

Every row in a table must have the same number of columns. If you add a td element (a column) for the first row, you must add a corresponding td element for the other rows. Likewise, if you delete a column for one row, you must delete the corresponding columns for the other rows.

Copy the table code above and paste it inside the opening and closing <body> tags of a practice Web page. Modify the table width. Add to the content within the <td> tags. You can add one or more extra rows by copying the code from an existing set of opening <tr> and closing </tr> tags, and then pasting the code after your last row. Experiment with it.

Notice how the <td> tags are consistently nested in the <tr> tags. Once the table structure is built you can put text, images or hyperlinks in any cellCELL

A cell is the area inside <td> tags. Cells contain the table data.
. For example:
<td><a href="http://www.W3C.org">www.W3C.org</a></td>

You can add styles to <table>, <tr>, and <td> tags to set the font size, font color, background color, or alignment of the table, row, or cell contents. For instance, the following will set the cell text color to blue and center the cell contents:
<td style="color:blue; text-align:center">Text</td>

Below is an example of a five row by two column table with a border. The column width is set through a style. If you set the column width for one cell, all of the other cells in that column will assume the same width; this reduces the amount of code needed, and makes it easier to reset the width for an entire column.

The top two column cells are merged with the colspan attribute. It is important to note that every row still has the same number of columns. There are two merged columns in row one, and two columns in each of the rows that follow.

Contact Me
Last Name
First Name
Email
Send Info

You can see these tags in the code below which you can copy and paste to build the short "Contact Me" form above:

<table style="width:300px; border:2px solid blue" cellpadding="6px" rules="all">
  <tr>
    <td style="text-align:center; color:blue" colspan="2">
Contact Me
    </td>
  </tr>
  <tr>
    <td style="width:120px">
Last Name
    </td>
    <td><input type="text" name="LastName" id="LastName">
    </td>
  </tr>
  <tr>
    <td>
First Name
    </td>
    <td><input type="text" name="FirstName" id="FirstName">
    </td>
  </tr>
  <tr>
    <td>
Email</td>
    <td><input type="email" name="Email" id="Email">
    </td>
  </tr>
  <tr>
    <td>
Send Info
    </td>
    <td><input type="checkbox" name="SendInfo" value="" checked>
    </td>
  </tr>
</table>

The cellpadding attribute, shown in the <table> tag above in the first line of code, adds space or padding between the cell contents (in this case the actual text) and the cell borders. Notice how there is a little space (6px) between the text "Last Name" and the left cell border. There is also a cellspacing attribute, which sets the amount of space between the cell borders of a table.

In HTML5 use padding: 0; in your style to remove to cell padding.
In HTML5 use border-collapse: collapse; in your style to remove to cell spacing. This will also remove gridlines that will appear when there is a background color.

The rules="all" attribute displays the row and column gridline; rules="none" will hide the inner table gridlines.

Copy and paste the table code above into a practice Web page, and experiment with it. Change the width and padding properties. You can add one or more extra rows by copying the code from an existing set of opening <tr> and closing </tr> tags, and then pasting the code after your last row.

You can add a table background color by following the pattern below:
<table style="border:2px solid blue; background-color:#FF9">

You can add a table background image by following the pattern below:
<table style="background-image:url(images/picName.gif)">

The code below creates a table with a background-color of yellow. It also uses the rowspan attribute to merge cells from two contiguous rows.

<table style="border:2px solid blue; background-color:#FF0" rules="all">
<tr>
  <td style="width:250px">Column 1</td>
  <td rowspan="2" style="width:250px">
These 2 row cells are merged</td>
</tr>
<tr>
  <td>
Column 1</td>
</tr>
<tr>
  <td>
Column 1 No cellpadding</td>
  <td>
Column 2</td>
</tr>
</table>

The code above produces the output below. Notice that without the cellpadding attribute, the text content is immediately next to the cell borders.

Column 1 These 2 row cells are merged
Column 1
Column 1 No cellpadding Column 2

Click here to see this sample web page live  (then right-click > View Source for code)

One final note: Sometimes it is necessary to override the default or defined cell widths, especially when you need the text in a cell to stay on one line. In this case, the nowrap attribute is very handy. This attribute specifies that the content inside the cell should not wrap.
To accomplish this you would use: <td nowrap="nowrap">

Web page design software, such as Dreamweaver and Expression Web can quickly build tables. However, if a <td> tag in a table somehow goes missing - which definitely happens - it is essential that the webweaver understand tables and be able to troubleshoot the problem in pure code view.

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...
 your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top