HTML table columns td with attributes

A HTML Table Row is divided into Columns (or cells) - Each Cell has many attributes they define what the appearance of that cell is.  The following is what our table will look like when we are done:

Let's start by adding the three columns to our example code.

Each column (or cell) is define by the <td> and </td> tags.  Below we have placed these two tags between the table row tags (i.e. <tr> and </tr> tags).  We have placed three sets because we want three columns:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">
     <tr align=center valign=top bgcolor="#800000">
          <td></td>
          <td></td>
          <td></td>
     </tr>
</table>

Now let’s talk about the various attributes that can be set for each Cell.  First you can define a Cell's vertical alignment and horizontal alignment just like a row.   Any attributes defined for a cell will overide the attributes defined for the row the cell resides in.  The Following example shows the vertical alignment and horizontal alignment added in for our table example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">
     <tr align=center valign=top bgcolor="#800000">
          <td valign="middle" align="center"></td>
          <td valign="middle" align="center"></td>
          <td valign="middle" align="center"></td>
     </tr>
</table>

Next we add in the definition to define the overriding background color for the cell. We have defined the cell color to e Silver in the following example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">
     <tr align=center valign=top bgcolor="#800000">
          <td valign="middle" align="center" bgcolor="#FFFFCC"></td>
          <td valign="middle" align="center" bgcolor="#FFFFCC"></td>
          <td valign="middle" align="center" bgcolor="#FFFFCC"></td>
     </tr>
</table>

The "nowrap" attribute forces the browser to keep the text of the cell on a single line without automatically word wrapping the text to the next line.

The following example shows the nowrap as part of the Tags:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">
     <tr align=center valign=top bgcolor="#800000">
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap></td>
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap></td>
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap></td>
     </tr>
</table>

Now let's add our text that will be the contents of each of the three cells.   The text, images, etc. will be placed between the <td> and </td> tags.   See the following example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">
     <tr align=center valign=top bgcolor="#800000">
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 1</td>
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 2</td>
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 3</td>
     </tr>
</table>

Our Table is now complete.  The previous code represents the table at the beginning of this web page.  Just when you thought we were done theres one last item we must discuss.  Table Headings.  Table headings are exactlly what they sound like.  It's a way to define the heading value for a column. The table Headings are defined exactly as the Table Description (cells) except the tag is <th> and </th> instead of <td> and </td>

In the following example, we have added a row above the one we previously define and also defined the table headings for the three columns:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">

     <tr align="center" valign="top" bgcolor="#800000">
          <th valign="top" align="center" bgcolor="#FFFFCC" nowrap>Heading 1</th>
          <th valign="top" align="center" bgcolor="#FFFFCC" nowrap>Heading 2</th>
          <th valign="top" align="center" bgcolor="#FFFFCC" nowrap>Heading 3</th>
     </tr>

     <tr align=center valign=top bgcolor="#800000">
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 1</td>
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 2</td>
          <td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 3</td>
     </tr>

</table>