Lesson 7: Tables!

Navigation

C++ Tutorial

CSS Tutorial

HTML Tutorial

JavaScript Tutorial

Ajax Tutorial

Supplemental

Tables. The hardest thing to learn in HTML. But don't worry - to say something is difficult with respect to everything else in HTML isn't saying much. So lets begin...The tag for a table is <table> and </table>. Inside of the table tags goes <tr> and </tr>, or the table row. Finally, inside of the row goes <td> and </td>. Those are the individual table cells, and they are the only tags that accept content. If you put content outside of the td tag, you'll muck everything up. Putting all of these tags together gives you this (in order for you to see it, I had to set it's border to 1):

<table border=1>
  <tr>
    <td>
      R1C1
</table>

Notice that you never have to include the closing tr and td tags. The opening of the next one implies the closing of the current one. Also notice that I didn't use quotes with border=1. If the modifier value has no spaces in it, than it is safe to do it without quotes, but it is considered good practice to put everything in quotes. I do it about half of the time, as you'll see in the coming examples.

Add in another table cell (td) to the row, and you get this:

<table border=1>
  <tr>
    <td>
      R1C1
    <td>
      R1C2
</table>

Add in another row to get this - notice that there isn't much there yet:

<table border=1>
  <tr>
    <td>
      R1C1
    <td>
      R1C2
  <tr>
</table>

<table border=1>
  <tr>
    <td>
      R1C1
    <td>
      R1C2
  <tr>
    <td>
      R2C1
</table>

<table border=1>
  <tr>
    <td>
      R1C1
    <td>
      R1C2
  <tr>
    <td>
      R2C1
    <td>
      R2C2
</table>

So each additional table cell adds a cell to the current row, from left to right. And each additional row adds another row of cells to the bottom of the table. See how simple that is? Welp, time to complicate things.

Modifiers for the table are width and height, both of which can be set to percents or pixels(px). Align is also a modifier for it - left, center, and right work for it. I bet you can guess how they function. Finally, there is border, which defaults at 0 - I had to set each of the above tables' borders to 1 so you could see them.

There are no modifiers for tr, but td has got a few. The first one is colspan. It merges the given number of cells, like so:

<table border=1>
  <tr>
    <td colspan=2>
      R1C1
  <tr>
    <td>
      R2C1
    <td>
      R2C2
</table>

The top cell has had colspan=2 applied to it. Next is rowspan. It does the same thing as colspan, except it does it vertically. Like so:

<table border=1>
  <tr>
    <td rowspan=2>
      R1C1
    <td>
      R1C2
  <tr>
    <td>
      R2C2
</table>

The first cell had rowspan=2 applied to it - and in order for it to work properly I had to insert a second row, and I had to put one cell in it, which is placed to the right of the rowspan=2 cell. It technically works without the second row and cell, but you just can't see the results.

Other modifiers that only work in the table tag are cellpadding, which "pads" each cell with whitespace. Like so:

<table border=1 cellpadding=10>
  <tr>
    <td>
      Padded Cell
</table>

Finally, there is cellspacing. It puts the whitespace between the cell and the table border, rather than in the cell itself. Got it? Cellpadding pads the cell with whitespace, and cellspacing puts space between the cell and the table. Cellpadding = padded cell. Cellspacing = cell's space. Crude, but that's probably their reasoning behind the names.

<table border=1 cellspacing=10>
  <tr>
    <td>
      Spaced Cell
</table>

And don't forget those height, width, and align properties I mentioned earlier! Here's an application of all of 'em at once...

<table border=1 width="180px" height="180px" align=center>
  <tr>
    <td align=center valign="middle">
      R1C1
    <td align=center valign="bottom">
      R1C2
    <td align=bottom valign="top">
      R1C3
  <tr>
    <td align=right valign=bottom>
      R2C1
    <td rowspan=2 colspan=2 align=center valign=top>
      R2C2
  <tr>
    <td valign=top>
      R3C1
</table>

I had some fun with this table. This table is set to have height and width of 180px, and an align of center. The first row is normal, but the second row has rowspan=2 and colspan=2 applied to it's second cell. The remaining cell in the second row is removed by the colspan=2, and the third row only requires the first cell to be created - rowspan and colspan fill what would be the final two cells. Also notice that it has all manner of alignment values. You are acquainted with the align modifier for the td tag, which is responsible for the left, center, and right alignments, but why are some at the top of the cell and others in the middle and still others at the bottom? valign. It is also for the td tag, and it takes the values top, middle, and bottom, and it handles the verticle alignment. Default align=left, and default valign=middle, just so you know.

That's it for tables! Now to learn forms...