datapitstop » Website Help »TablesDirectory
This is a general overview on how to use tables. The main purpose of a table is to arrange or align data in a certain way. The basis of tables is to create rows and columns, somewhat like a spreadsheet. One example would be to align names, phone numbers, and addresses so they are easily read on your page. Without tables this would be difficult. The portion of the table where data is contained (name, phone number ,etc) is called a table cell. Think of a table cell as more of a container, not just a place to put data. Inside the table cell, you can use a majority of the HTML tags you've read about in the help sections. What does this mean? Want to change the font color, font size, background color, or put a picture inside the table cell? No problem. With tables you can easily do this and much more. You can even have a table within a table. These are called "nested" tables. With all this flexibility there is one downfall. Unfortunately, tables are probably one of the more difficult things to learn for HTML beginners. Tables are not really difficult, they are simply more in-depth. This tutorial will reflect that. There are more examples here than in most other sections.

NOTE:
In the past, tables were also used to split up a web page into different parts. Since you can use most HTML tags within a table cell you could arrange the page in a way that would be easier to work with and have distinctive sections. While you can use tables to accomplish this, the trend has been to use Cascading Style Sheets(CSS) instead. CSS lets you do this and more. You can still use tables but I suggest you look at our HTML-CSS tutorial for information on how to do this.

Quick Jump

Syntax

It's best to just jump in and get our feet wet. Here is our first table. This is as basic as it gets. An explanation of the tags will follow after a few examples.

A B C
D E F 
<TABLE BORDER="1">
  <TR> *the first row
    <TD>A</TD> *the first column
    <TD>B</TD> *the second column
    <TD>C</TD> *the third column
  </TR>
  <TR> *the second row
    <TD>D</TD> *the first column
    <TD>E</TD> *the second column
    <TD>F</TD> *the third column
  </TR>
</TABLE>
Think about the above example as a simple spreadsheet. Make note of where each row and column lies so you can visualize how the table will look when you create it. Lets say we wanted to use the format of the above table and put something in it besides the generic "A", "B", etc. We will put a name is the first column, a city in the second column, and a state in the third column. This is how we do it.

John Doe Denver Colorado
Jane Doe Las Vegas Nevada 

<TABLE BORDER="1">
  <TR> *this is the first row
    <TD>John Doe</TD> *this is the first column
    <TD>Denver</TD> *this is the second column
    <TD>Colorado</TD> *this is the third column
  </TR>
  <TR> *this is the second row
    <TD>Jane Doe</TD> *this is the first column
    <TD>Las Vegas</TD> *this is the second column
    <TD>Nevada</TD> *this is the third column
  </TR>
</TABLE>

Brief Explanation
  • <TABLE>:
    In order to create a table you need to use the <TABLE> tag as shown above. This says, "Hey, I want a table at this location." Like most HTML tags, there is a corresponding ending tag which is </TABLE>. You must have this tag or it will not end your table correctly and can wreak havoc on your page.

  • <TR>:
    This is the "table row" tag. Try to remember that TR stands for "table row." If you want another row in your table, this is your tag. Remember to end the <TR> tag with </TR>.

  • <TD>:
    You can think of this tag in 2 ways. It is officially called the "table data" tag however you can think of it as the "table cell or table column" tag. If you need to add another column to your table you can use this tag. You need to end the <TD> tag with </TD>.

    The most important thing to remember is that a <TD> tag has to be within a <TR> tag(or <TH> tag, we'll get to that). You can also "nest" tables or cells but that is out of the scope of this document. The reason I mention that is because it will appear to break these rules.

That wasn't so hard was it? So what happens when you want to add another person to our table above? You guessed it, you add one more row with the <TR> tag.

John Doe Denver Colorado
Jane Doe Las Vegas Nevada
Bob Doe Indianapolis Indiana 

<TABLE BORDER="1">
  <TR> *this is the first row
    <TD>John Doe</TD> *this is the first column
    <TD>Denver</TD> *this is the second column
    <TD>Colorado</TD> *this is the third column
  </TR>
  <TR> *this is the second row
    <TD>Jane Doe</TD> *this is the first column
    <TD>Las Vegas</TD> *this is the second column
    <TD>Nevada</TD> *this is the third column
  </TR>
  <TR> *this is the third row
    <TD>Bob Doe</TD> *this is the first column
    <TD>Indianapolis</TD> *this is the second column
    <TD>Indiana</TD> *this is the third column
  </TR>
</TABLE>
Are you getting the hang of it yet? Here is another variation. Lets say we didn't want the city in the above example. All we have to do is remove the "second column" or second <TD>s of our table.

John Doe Colorado
Jane Doe Nevada
Bob Doe Indiana 

<TABLE BORDER="1">
  <TR> *this is the first row
    <TD>John Doe</TD> *this is the first column
    <TD>Colorado</TD> *this is the second column
  </TR>
  <TR> *this is the second row
    <TD>Jane Doe</TD> *this is the first column
    <TD>Nevada</TD> *this is the second column
  </TR>
  <TR> *this is the third row
    <TD>Bob Doe</TD> *this is the first column
    <TD>Indiana</TD> *this is the second column
  </TR>
</TABLE>

Borders

You've no doubt noticed the <TABLE BORDER="1"> tag in the above examples. The BORDER="1" portion added to the <TABLE> tag is called an attribute. There are many attributes for tables(and HTML tags) but I will only discuss BORDER here. The BORDER attribute is exactly how it sounds. It "shows" the border around the table. What I mean by "shows" is that the border is displayed. You can turn it on or off if you like. You can even make it bigger. The default <TABLE> tag shows no border. You have to turn it on with the BORDER attribute. If you wanted to make the BORDER bigger, you would do something like <TABLE BORDER="2">.

Here is the table above without a border. Notice how we left off BORDER in the table tag. The default is no border:

John Doe Colorado
Jane Doe Nevada
Bob Doe Indiana 

<TABLE> *here is the BORDER attribute removed producing no border
  <TR>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>
Here is the same table with a BORDER of size 3:

John Doe Colorado
Jane Doe Nevada
Bob Doe Indiana 

<TABLE BORDER="3"> *here is our BORDER set to 3
  <TR>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>
Use your own discretion when deciding whether to use a border or not. When you initially start out creating tables it may be a good idea to show the border. As you start to create more complex tables it helps to see what you are creating. The tables shown above are very basic. More complex examples will follow and you will start to see a need for showing the border until you get a feel for the layout.

Table Headers

Table headers give headers for your rows or columns. With the tables above, what type of data is in first column? What about the second column? We need some way of letting the reader know what we are displaying.

The "table header" tag is what we need. The new tag is <TH>. Think of the <TH> tag as a replacement for the <TD> tag. They do the same thing with 1 exception. When you use the <TH> tag, it makes the text within the cell BOLD as well as CENTERED. This is best displayed with an example.

Num Name State
1 John Doe Colorado
2 Jane Doe Nevada
3 Bob Doe Indiana 

<TABLE BORDER="1">
  <TR>
    <TH>Num</TH> *1st column header- <TH> instead of <TD>
    <TH>Name</TH> *<TH> instead of <TD>
    <TH>State</TH> *<TH> instead of <TD>
  </TR>
  <TR>
    <TH>1</TH> *1st row header- <TH> instead of <TD>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TH>2</TH> *2nd row header- <TH> instead of <TD>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TH>3</TH> *3rd row header- <TH> instead of <TD>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>
This example has both row(side) and column(top) headers. Notice the BOLD and centered text? This is what the <TH> tag gives you. You could do it with a standard <TD> tag and make the cell BOLD and CENTERED, but this reduces our code and is less cluttered. You always want to keep it simple if possible. Study this example, it also gives you more more of an idea of how to use simple tables.

ROWSPAN and COLSPAN

This is where tables get more complicated. These tables are great but they don't give us a lot of flexibility. What if we wanted to have a column heading that spanned across 2 columns, or a side heading that spanned across 2 rows. Luckily, there are ROWSPAN and COLSPAN attributes for the <TD> and <TH> tags. Theses stand for "row span" and "column span."

  • ROWSPAN
    ROWSPAN means a cell spans across more than one row. This is best shown with an example.

    A B C
    D E 

    <TABLE BORDER="1">
  <TR>
    <TD ROWSPAN="2">A</TD> *our ROWSPAN of 2
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
  </TR>
</TABLE>
    As you can see in this example, to use ROWSPAN you add the ROWSPAN attribute to the <TD> tag. You also have to tell it how many rows to span. In this case, we wanted to ROWSPAN the cell that contains "A" to 2 rows, so we used the <TD ROWSPAN="2"> tag. Lets take a look at another example but this time combining our examples we used above.

    Num Name State
    1 John Doe Colorado
    Jane Doe Nevada
    2 Bob Doe Indiana 

    <TABLE BORDER="1">
  <TR>
    <TH>Num</TH>
    <TH>Name</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TH ROWSPAN="2">1</TH> *our ROWSPAN of 2
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR> ***
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TH>2</TH>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>
    This one is a little more complicated. It's also difficult to explain. I decided to group John and Jane Doe together. Notice where I placed the *** in the code example? This table row is different than the others. It only has 2 <TD>s(columns) compared to all the others, which have 3. The reason for this is because we ROWSPANed John Doe's first column to 2 rows. The row that is effected by this ROWSPAN is Jane Doe's. Basically, John stole Jane's first column. She is directly below John. For her entry we can only use 2 <TD>(column) entries which are "Jane Doe" and "Nevada". Again, her first column was taken over by John and his ROWSPAN.

  • COLSPAN
    COLSPAN works just like ROWSPAN but it works on columns. It enables us to expand a cell to more than one column.

    A B
    C D E 

    <TABLE BORDER="1">
  <TR>
    <TD COLSPAN="2">A</TD> *our COLSPAN of 2
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
    <TD>E</TD>
  </TR>
</TABLE>
    As you can see, we wanted to have the "A" cell span more than one column. Lets look a more difficult example.

    Group 1 Group 2
    Name State Name State
    John Doe Colorado Bob Doe Indiana
    Jane Doe Las Vegas Rich Doe Washington 

    <TABLE BORDER="1">
  <TR>
    <TH COLSPAN="2">Group 1</TH> *our COLSPAN of 2
    <TH COLSPAN="2">Group 2</TH> *our COLSPAN of 2
  </TR>
  <TR>
    <TH>Name</TH>
    <TH>State</TH>
    <TH>Name</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Las Vegas</TD>
    <TD>Rich Doe</TD>
    <TD>Washington</TD>
  </TR>
</TABLE>
    This example is fairly simple. Our first row has 2 cells(columns) that contain "Group 1" and "Group 2." All the other rows have 4 cells(columns). Both "Group 1" and "Group 2" span across 2 columns so we had COLSPAN set to 2. What if, instead of having just "Name" and "State" for each entry, we had "Name", "City", and "State". How much would you COLSPAN each cell of the first row? If you guessed 3 you are correct. Take a look at the example below which shows how to do this.

    Group 1 Group 2
    Name City State Name City State
    John Doe Denver Colorado Bob Doe Indianapolis Indiana
    Jane Doe Las Vegas Nevada Rich Doe Seattle Washington 

    <TABLE BORDER="1">
  <TR>
    <TH COLSPAN="3">Group 1</TH> *our COLSPAN of 3
    <TH COLSPAN="3">Group 2</TH> *our COLSPAN of 3
  </TR>
  <TR>
    <TH>Name</TH>
    <TH>City</TH>
    <TH>State</TH>
    <TH>Name</TH>
    <TH>City</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TD>John Doe</TD>
    <TD>Denver</TD>
    <TD>Colorado</TD>
    <TD>Bob Doe</TD>
    <TD>Indianapolis</TD>
    <TD>Indiana</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Las Vegas</TD>
    <TD>Nevada</TD>
    <TD>Rich Doe</TD>
    <TD>Seattle</TD>
    <TD>Washington</TD>
 </TR>
</TABLE>
    Simple enough. If you compare this example with the previous one you will notice all that was changed was the COLSPAN="2" to COLSPAN="3". We also added cells for city between name and state.

Table Width and Height

As you may have noticed so far, the size of a table is determined by by its contents. What if we wanted a way to set the size of the table. Luckily, there's a way we can do this. We will be discussing 2 new TABLE attributes, WIDTH and HEIGHT.

Your table WIDTH and HEIGHT can be specified in 2 different ways. The first way is by percentage. The percentage is based upon the window width or height of the browser displaying the web page. The second method lets you be more specific and specify the width or height by the number of pixels. There are 72 pixels to an inch. Lets look at a few examples.

A B C D
E F G H 
<TABLE BORDER="1" WIDTH="100%"> Our WIDTH of 100%
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>
This is an example of how to set the WIDTH using a percentage. This example is not 100% accurate. The thing to note is that the WIDTH is set to 100% and it's taking up 100% of the yellow box. This table is actually inside another table so I can't make it a full 100%. Here is another example using 50%.

A B C D
E F G H 
<TABLE BORDER="1" WIDTH="50%"> Our WIDTH of 50%
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>
Again, the thing to note here is that the WIDTH is at 50% and it's taking up 50% of my yellow box. You can apply the percentage method to HEIGHT as well but you may not get the results you expect. You normally do not want to use a HEIGHT of 100%. Now lets look at a few examples using the pixel method.

A B C D
E F G H 
<TABLE BORDER="1" WIDTH="216"> Our WIDTH 216 pixels
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>
Notice with this example we DO NOT include the percentage symbol. Here is another example this time using both WIDTH and HEIGHT.

A B C D
E F G H 
Our WIDTH and HEIGHT of 216 pixels
<TABLE BORDER="1" WIDTH="216" HEIGHT="216">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>
Feel free to play around with your table sizes. Always remember however that different people use different screen resolutions. If you start setting your tables statically by specifying the WIDTH and HEIGHT by pixel size, the table may run off of the screen under some screen resolutions. You don't want to make your users scroll back and forth.

CELLPADDING and CELLSPACING

The CELLPADDING and CELLSPACING attributes are for your entire table. Much like the BORDER table attribute. CELLPADDING is the amount of space (or padding) between the cell border and the cell contents. CELLSPACING is the amount of space between cells. Examples are the easiest way to explain what they do.

  • CELLPADDING
    To review, CELLPADDING is the amount of space (or padding) between the cell border and the cell contents. Here is a normal table with no CELLPADDING:

    A B C
    D E F 

    <TABLE BORDER="1" CELLPADDING="0"> New CELLPADDING Attribute
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>
    Notice the 2 new table attributes specified above? If you set them to 0, like above, there is no CELLPADDING or CELLSPACING. This is the same as if you left them out completely. Now lets look at the same example with CELLPADDING set to 10.

    A B C
    D E F 

    <TABLE BORDER="1" CELLPADDING="10"> CELLPADDING Set To 10
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>
    Notice anything different? Here's another example but this time we will use a CELLPADDING of a whopping 50.

    A B C
    D E F 

    <TABLE BORDER="1" CELLPADDING="50"> CELLPADDING Set To 50
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>
    • CELLSPACING
    To review, CELLSPACING is amount of space between cells. Here is a normal table with no CELLSPACING:

    A B C
    D E F 

    <TABLE BORDER="1" CELLSPACING="0"> New CELLSPACING Attribute
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>
    Notice, like CELLPADDING, we left the CELLSPACING attribute set to 0. If you were to leave it out of the TABLE tag completely you would get the same thing. Here's an example with a CELLSPACING set to 10:

    A B C
    D E F 

    <TABLE BORDER="1" CELLSPACING="10"> CELLSPACING Set To 10
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>
    Here is another example with a CELLSPACING of a whopping 50:

    A B C
    D E F 

    <TABLE BORDER="1" CELLSPACING="50"> CELLSPACING Set To 50
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>
  • CELLPADDING and CELLSPACING
    To round out our examples on CELLPADDING and CELLSPACING here is the last example with a CELLPADDING of 10 and a CELLSPACING of 10.

    A B C
    D E F 

    CELLPADDING and CELLSPACING Set To 10
<TABLE BORDER="1" CELLPADDING="10" CELLSPACING="10">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Alignment

With tables, you have the ability to tell the table where you want your data. There are 2 attributes that will help you do this. These 2 new attributes are ALIGN and VALIGN. ALIGN and VALIGN work on both the table row(<TR>) and table cell(<TD> and <TH>). If you use ALIGN or VALIGN on a table row(<TR>), it will apply to all table cells(<TD> and <TH>) in that row.

  • ALIGN
    ALIGN stands for alignment. ALIGN accepts 3 different options which are left, right, and center. Here are a few examples.

    A B
    Random Data Random Data
    More Random Data More Random Data 
    <TABLE BORDER="1">
  <TR ALIGN="CENTER"> Our CENTER ALIGN for the entire row
    <TD>A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>Random Data</TD>
    <TD>Random Data</TD>
  </TR>
  <TR>
    <TD>More Random Data</TD>
    <TD>More Random Data</TD>
  </TR>
</TABLE>
    Notice how the entire first row is centered? This is what you get when you use ALIGN="CENTER" on and entire table row(<TR>). Now lets look at the same example but this time we will only use it on one table cell(<TD> or <TH>).

    A B
    Random Data Random Data
    More Random Data More Random Data 
    <TABLE BORDER="1">
  <TR>
    <TD ALIGN="CENTER">A</TD>Only this cell is centered
    <TD>B</TD>
  </TR>
  <TR>
    <TD>Random Data</TD>
    <TD>Random Data</TD>
  </TR>
  <TR>
    <TD>More Random Data</TD>
    <TD>More Random Data</TD>
  </TR>
</TABLE>
    Notice how just the specified table cell is centered? One thing to remember, even if you decide to do a <TR ALIGN="CENTER"> to align all cells in that row, you can always override one of the table cells. Study the following example for a better explanation.

    A B
    Random Data Random Data
    More Random Data More Random Data 
    <TABLE BORDER="1">
  <TR ALIGN="CENTER"> Our entire row is centered
    We choose to override this cell and ALIGN it to the RIGHT
    <TD ALIGN="RIGHT">A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>Random Data</TD>
    <TD>Random Data</TD>
  </TR>
  <TR>
    <TD>More Random Data</TD>
    <TD>More Random Data</TD>
  </TR>
</TABLE>
    There are a few things to remember. You can use CENTER, LEFT, and RIGHT anywhere you choose. Also, as we discussed in the "Table Headers" section, by default the table header(<TH>) tag not only makes your text BOLD, but it also centers it as well. You can override this by using ALIGN on the entire row or each individual table cell.

  • VALIGN
    VALIGN stands for "Vertical Align." As the name suggests, it aligns your data vertically. The options you have for VALIGN are TOP, MIDDLE, and BOTTOM. The rules that applied to ALIGN are the same here. Here is a more in depth example of using VALIGN. Study it carefully, this is the only example here.

    A B C D
    Aligned to the TOP Aligned to the MIDDLE Aligned to the BOTTOM Some
    Random
    Data
    Aligned to the TOP Aligned to the MIDDLE Aligned to the BOTTOM Some
    Random
    Data    		 
    <TABLE BORDER="1">
  <TR>
    <TH>A</TH>
    <TH>B</TH>
    <TH>C</TH>
    <TH>D</TH>
  </TR>
  <TR VALIGN="TOP"> Entire row VALIGNed to TOP
    <TD>Aligned to the TOP</TD>
    Override table row VALIGN
    <TD VALIGN="MIDDLE">Aligned to the MIDDLE</TD>
    Override table row VALIGN
    <TD VALIGN="BOTTOM">Aligned to the BOTTOM</TD>
    <TD>Some<BR>Random<BR>Data</TD>
  </TR>
  <TR>
    <TD VALIGN="TOP">Aligned to the TOP</TD> TOP
    <TD VALIGN="MIDDLE">Aligned to the MIDDLE</TD> MIDDLE
    <TD VALIGN="BOTTOM">Aligned to the BOTTOM</TD> BOTTOM
    <TD>Some<BR>Random<BR>Data</TD>
  </TR>
</TABLE>
One last thing to note about ALIGN and VALIGN. You can use both attributes on a table row(<TR>) or table cell (<TD> or <TH>). This will give you the ability to place the data in your table cells anywhere you need.

This ends our tutorial on tables. There is a lot more on tables that was not covered here. You can place images in table cells, use different text formatting in table cells, give table cells a background color, nest tables (table within a table) and much more. The main thing to remember is that you can use any of the HTML tags within a table cell. This should get you up to the point where you can look into all other attributes and options. Also, don't forget to check out the following complimentary table documentation:

 * Table Tags
 * Tables Quick Reference

Picture