Learning About the Cell Tag in Tables
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.
| It is the cell #1 | It is the cell #2 | It 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.
<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.
<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.