Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together.

<table border="1"> <tr> <td>some text</td> <td>some text</td> </tr> <tr> <td>some text</td> <td>some text</td> </tr> </table>

Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible.

Code:

<table border="1" cellspacing="5"> <tr> <td>some text</td> <td>some text</td> </tr><tr> <td>some text</td> <td>some text</td> </tr> </table>

Cellpadding is the pixel space between the cell contents and the cell border. The default for this property is also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on and you want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible, even with the border property turned on. Cellpadding can be handled in a style sheet.

Code:

<table border="1" cellpadding="10"> <tr> <td>some text</td> <td>some text</td> </tr><tr> <td>some text</td> <td>some text</td> </tr> </table>

Table Tags

          Tag                 Description                                                  

                                Defines a table

                                Defines a table header

                                Defines a table row

                                Defines a table cell

                                Defines a table caption

                                Defines groups of table columns

                                Defines the attribute values for one

                                 or more columns in table

Table Size

Table Width

The width attribute can be used to define the width of your table. It can be defined as a fixed width or a relative width. A fixed table width is one where the width of the table is specified in pixels. For example, this code, <table width="550">, will produce a table that is 550 pixels wide. A relative table width is specified as a percentage of the width of the visitor's viewing window. Hence this code, <table width="80%">, will produce a table that occupies 80 percent of the screen.

HTML <caption> Tag

A table with a caption:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Definition and Usage

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

HTML <frame> Tag

Definition and Usage

The <frame> tag is not supported in HTML5.

The <frame> tag defines one particular window (frame) within a <frameset>.

Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

Example

A simple three-framed page:

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>