Let's say you want to list many of the elements found in the Universe as part of a scientific website. The periodic chart lists at least 118 different elements. You aren't going to cover all of them, but you want to show a good portion of them all on one webpage along with some basic information about each. Using simple page formatting tools simply aren't going to cut it. In this exercise, you can achieve some satisfactory results from using a table.

I will take you through several stages of evolving such a table layout in the following pages. For now, here's the data we'll be working with presented in a list. Notice how far down the page this list goes!

You'll see that displaying this much information in one long list is not the most user-friendly way to present data. Go to page 2 and see how a simple table layout can help.

Alkali Metals:
  * Lithium
  * Sodium
  * Potassium
  * Rubidium
  * Cesium
  * Francium

Noble Gases:
    * Helium
    * Neon
    * Argon
    * Krypton
    * Xenon
    * Radon

 Halogens:
    * Fluorine
    * Chlorine
    * Bromine
    * Iodine
    * Astatine

Rare Earth Elements:
Lanthanide Series            
    * Lanthanum
    * Cerium
    * Praseodymium
    * Neodymium
    * Promethium
    * Samarium
    * Europium
    * Gadolinium
    * Terbium
    * Dysprosium
    * Holmium
    * Erbium
    * Thulium
    * Ytterbium
    * Lutetium
 Actinide Series
    * Actinium
    * Thorium
    * Protactinium
    * Uranium
    * Neptunium
    * Plutonium
    * Americium
    * Curium
    * Berkelium
    * Californium
    * Einsteinium
    * Fermium
    * Mendelevium
    * Nobelium
    * Lawrencium

 Other Metals:
    * Aluminum
    * Gallium
    * Indium
    * Tin
    * Thallium
    * Lead
    * Bismuth

 Transition Metals:

    * Scandium
    * Titanium
    * Vanadium
    * Chromium
    * Manganese
    * Iron
    * Cobalt
    * Nickel
    * Copper
    * Zinc
    * Yttrium
    * Zirconium
    * Niobium
    * Molybdenum
    * Technetium
    * Ruthenium
    * Rhodium
    * Palladium
    * Silver   
    * Cadmium
    * Hafnium
    * Tantalum
    * Tungsten
    * Rhenium
    * Osmium
    * Iridium
    * Platinum
    * Gold
    * Mercury
    * Rutherfordium
    * Dubnium
    * Seaborgium
    * Bohrium
    * Hassium
    * Meitnerium
    * Ununnilium
    * Unununium
    * Ununbium
 
   

You will begin by selecting the Insert Table icon on a blank page. When you do, you'll be presented with a dialog box that should look something like this:

A word of caution: You should really insert your table first thing, instead of trying to superimpose one of pre-existing text. The table will take over and you'll lose the text you had on the page!

For now, stick with the "plain" class and choose 1 row and 2 columns. Do not check the Create Headings box just yet. We'll talk more about what these things mean a little later. Now push the Add Table button to continue. You should see some unremarkable thing like this appear:

Since you don't have any text yet you're looking at an empty table with two table cells. Try clicking within the left cell and start typing some text. You'll see that the table resizes itself based on the text you're inputting. Now click inside the right cell and add some more text. You should see that the table has grown a little bigger:

Please note that the "plain" class is for a table without borders. You only see borders when in EDIT mode for ease of use. We'll discuss table borders later.

Now let's copy and paste our data about the elements into these two cells. With a little playing around, you should get a result like this one:

Alkali Metals:   * Lithium   * Sodium   * Potassium   * Rubidium   * Cesium   * Francium Noble Gases:     *  Helium     * Neon     * Argon     * Krypton     * Xenon     * Radon  Halogens:     * Fluorine     * Chlorine     * Bromine     * Iodine     * Astatine Rare Earth Elements: Lanthanide Series                 * Lanthanum     * Cerium     * Praseodymium     * Neodymium     * Promethium     * Samarium     * Europium     * Gadolinium     * Terbium     * Dysprosium     * Holmium     * Erbium     * Thulium     * Ytterbium     * Lutetium  Actinide Series     * Actinium     * Thorium     * Protactinium     * Uranium     * Neptunium     * Plutonium     * Americium     * Curium     * Berkelium     * Californium     * Einsteinium     * Fermium     * Mendelevium     * Nobelium     * Lawrencium

Other Metals:     * Aluminum     * Gallium     * Indium     * Tin     * Thallium     * Lead     * Bismuth  Transition Metals:     * Scandium     * Titanium     * Vanadium     * Chromium     * Manganese     * Iron     * Cobalt     * Nickel     * Copper     * Zinc     * Yttrium     * Zirconium     * Niobium     * Molybdenum     * Technetium     * Ruthenium     * Rhodium     * Palladium     * Silver        * Cadmium     * Hafnium     * Tantalum     * Tungsten     * Rhenium     * Osmium     * Iridium     * Platinum     * Gold     * Mercury     * Rutherfordium     * Dubnium     * Seaborgium     * Bohrium     * Hassium     * Meitnerium     * Ununnilium     * Unununium     * Ununbium

Ok - So that last table isn't bad. But what if I want to change it now that it's on my website? To begin, go into Edit mode on the page in question and find your table. Try right clicking on the table and you should see a list of options pop-up:

These should all be fairly self-explainatory so I won't waste time describing them here. NOTE: Some browser settings will not allow cut, copy and paste to work, but you can still use keyboard shortcuts.

• Cut
• Copy
• Paste
• Add Row
• Delete Row
• Add Column
• Delete Column
• Delete Table

Great. So let's add a few extra columns so that our table of elements gets wider, and therefore shorter. This should make reading this list even easier. Note: if you're having trouble getting each column to line up at the top, you just need to add some line breaks (by pushing the enter key) at the bottom of each column of content. It may take a little fussing, but you'll get there.

Take a look at this handy work:

Alkali Metals:   * Lithium   * Sodium   * Potassium   * Rubidium   * Cesium   * Francium Noble Gases:     * Helium     * Neon     * Argon     * Krypton     * Xenon     * Radon  Halogens:     * Fluorine     * Chlorine     * Bromine     * Iodine     * Astatine Other Metals:     * Aluminum     * Gallium     * Indium     * Tin     * Thallium     * Lead     * Bismuth

Rare Earth Elements:  Lanthanide Series                 * Lanthanum     * Cerium     * Praseodymium     * Neodymium     * Promethium     * Samarium     * Europium     * Gadolinium     * Terbium     * Dysprosium     * Holmium     * Erbium     * Thulium     * Ytterbium     * Lutetium

Actinide Series     * Actinium     * Thorium     * Protactinium     * Uranium     * Neptunium     * Plutonium     * Americium     * Curium     * Berkelium     * Californium     * Einsteinium     * Fermium     * Mendelevium     * Nobelium     * Lawrencium

Transition Metals:     * Scandium     * Titanium     * Vanadium     * Chromium     * Manganese     * Iron     * Cobalt     * Nickel     * Copper     * Zinc     * Yttrium     * Zirconium     * Niobium     * Molybdenum     * Technetium     * Ruthenium     * Rhodium

* Palladium     * Silver        * Cadmium     * Hafnium     * Tantalum     * Tungsten     * Rhenium     * Osmium     * Iridium     * Platinum     * Gold     * Mercury     * Rutherfordium     * Dubnium     * Seaborgium     * Bohrium     * Hassium     * Meitnerium     * Ununnilium     * Unununium     * Ununbium

Below is an example of the table we've been working with using the "listing" class. Notice that you get borders, a colored table header and a different font that with the "plain" class. There are other classes available like "vertical listing" and "unsorted listing" that are very similar to the basic "listing" class. Try them out if you wish, but they are only subtly different.

Alkali Metals:	Noble Gases:	Halogens:	Other Metals:	Rare Earth Elements lanthanide series:	rare earth elements Actinide Series:	Transition Metals:
Lithium Sodium Potassium Rubidium Cesium Francium	Helium Neon Argon Krypton Xenon Radon	Fluorine Chlorine Bromine Iodine Astatine	Aluminum Gallium Indium Tin Thallium Lead Bismuth	Lanthanum Cerium Praseodymium Neodymium Promethium Samarium Europium Gadolinium Terbium Dysprosium Holmium Erbium Thulium Ytterbium Lutetium	Actinium Thorium Protactinium Uranium Neptunium Plutonium Americium Curium Berkelium Californium Einsteinium Fermium Mendelevium Nobelium Lawrencium	Scandium Titanium Vanadium Chromium Manganese Iron Cobalt Nickel Copper Zinc Yttrium Zirconium Niobium Molybdenum Technetium Ruthenium Rhodium Palladium

Go to the next page to learn about some other uses for tables . . .

You can build a simple arrangement of images by using a table. Take a look at this example to get ideas about how this might look: I'm using the vertical listing class with 2 rows and 4 columns

Some information  about gorrilas	Some goat knowledge	Lizard content	Additional lizard content

In all the examples you've seen in the tutorial, you should be able to copy and paste one of the tables from this page into a Plone page you are working on. That way you can manipulate a pre-existing table for practice. If you're feeling really brave you can also view the HTML that makes up a table!