Rains' HTML help files

Table Part	HTML
table color the area behind the entire table	<table bgcolor=#1c1156>
row color the area behind a single row	<tr bgcolor=#1c1156>
cell color the area behind a single cell	<td bgcolor=#1c1156>

Tables

Tables start being built from the top left, then across the columns of the first row, then to the second row, across the columns of the second row...
      -->  -->  -->  -->  -->  --> 
      ___________________________|
      |
      -->  -->  -->  -->  -->
We will call each grid in a table a cell.

Basic Table Tags

The HTML for the basic table structure is shown below:

HTML

Result

<table border=1>
  <tr>
  <td>Row 1 col 1</td>
  <td>Row 1 col 2</td>
  <td>Row 1 col 3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td>Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 2</td>
  <td>Row 3 col 3</td>
  </tr>

</table>

Row 1 col 1	Row 1 col 2	Row 1 col 3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 3 col 2	Row 3 col 3

The border=1 attribute in the <table> tag instructs the browser to draw a line around the table with a thickness of 1 pixel. Note how each row is defined by Table Row tags <tr>...</tr> and then cells in each row are defined by Table Data <td>...</td> tags. Each <td>...</td> tag can contain any type of HTML tag we have used in this tutorial -- headers, styled text, hypertext links, inline graphics, etc. Within this tag you can uses several attributes to control the alignment of items in a single cell:

Horizontal Alignment	Vertical Alignment
`<td align=left>` aligns all elements to the left side of the cell (this is the default setting) `<td align=right>` aligns all elements to the right side of the cell `<td align=center>` aligns all elements to center of the cell	`<td valign=top>` aligns all elements to the top of the cell `<td valign=bottom>` aligns all elements to the bottom of the cell `<td valign=middle>` aligns all elements to the middle of the cell (this is the default setting)

  <td align=left valign=bottom>

This HTMLmakes a cell with items justified on the left and bottom of the cell.

Rows and Columns

This one was three rows with three columns. Look what we can do if using the colspan and rowspan attributes in the <td>...</td> tags.

HTML

Result

<table border>
  <tr>
  <td>Row 1 col 1</td>
  <td align=center colspan=2>
   Row 1 col 2-3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td>Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 2</td>
  <td>Row 3 col 3</td>
  </tr>
</table>

NOTE**The second cell of the first row spans 2 columns.

Row 1 col 1	Row 1 col 2-3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 3 col 2	Row 3 col 3

We have had a cell span two columns --why don't we make a cell that spans two rows.

HTML

Result

<table border=1>
  <tr>
  <td>Row 1 col 1</td>
  <td align=center colspan=2>
   Row 1 col 2-3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td valign=top rowspan=2>
  Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 3</td>
  </tr>
</table>

Row 1 col 1	Row 1 col 2-3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 2 col 2	Row 3 col 3

�

� �

Graphics by

Star Graphic by Graphics by Niala

Free JavaScripts provided
by The JavaScript Source

Basic Table Tags

Rows and Columns