The cells portion of this tutorial is intended to help you better understand how they work.  This isn’t like the header cell as the tag is different.  The tag that is used for this is <td>.  This tag doesn’t need any attributes needed added to it at all.  Here is the order going with the absolute minimum needed for a table.  Check below and you will have a basic understanding on how it works.

<table border="1"><tr><td>It is the cell #1</td><td>It is the cell #2</td><td>It is the cell #3</td></tr></table>

It is the cell #1It is the cell #2It is the cell #3

Now, what I’m going to do is show you the attributes to it and then show how it works.

  • bgcolor - changes the background color to whatever you wish for it.  Can be done through color value code or the name of the color itself.
  • background - can add a background image but would be recommended not to because the text may or may not be readable and could potentially confuse the viewer as to what you are writing.
  • align - it adjusts the text into a horyzontal position.
  • valign - it adjusts the text into a vertical position.
  • colspan - used to make more than 1 column in width.  Can be used when having a major heading and need to take up some space.  Can be made as long as necessary but would be best to not to have it too many.
  • rowspan - it puts a distance in the cells from the content.
  • bordercolor - changes the border color around cell (works in Internet Explorer only).
  • height - determine a height of cell.
  • width - determine a width of cell.
  • nowrap - forbids words wrap (not recommended because it can make tables too wide).

After seeing these attributes, I’m going to show you an example simply using the <td> tag with formatted text and different cell's backgrounds.

<table border="1">
<tr>
<td bgcolor="#FFFF00" bordercolor="#0000FF" align=center>
It is a big text<br> in table's cell <br>which is <br>horizontally adjusted
</td>
<td bgcolor="#00FFFF" bordercolor="#FF00FF" valign="bottom" align=center nowrap>
It is a small vertical adjusted text
</td>
</tr>
</table>
It is a big text
in table's cell
which is
horizontally adjusted
It is a small vertical adjusted text

That is how it works with that perspective. Now, here is the final piece of the puzzle. It really isn't complex but it can be tough only if you don't understand how it works.

<table border=1>
<tr>
<td rowspan=3>rowspan=3</td>
<td colspan=2>colspan=2</td>
</tr>
<tr>
<td>cell #1</td>
<td>cell #2</td>
</tr>
<tr>
<td>cell #3</td>
<td>cell #4</td>
</tr>
</table>

rowspan=3 colspan=2
cell #1 cell #2
cell #3 cell #4

If you however want to have it apply to all of the <td> tags, then you will need to know Cascading Style Sheets.  Are you confused?  It seems tough at first but once you work with it, you will get the hang of it without fail.

HTML tables menu.