Table Examples

Now that you’ve completed the sessions on using tables, we’ll show a few of the many ways that tables are used on websites.

Captions.

Author Yakov Travis wanted a caption below his picture. He created a table so he could enter text below his picture. This is what the page looks like on his website.

And here’s what the page editor page looks like.

You can see where Yakov inserted his table. He created a table with one column and two rows. He inserted his picture in the top cell and used the bottom cell for his caption. The table doesn’t show up on the website because his border width is set to zero.

Columns.

Next we’ll look at formatting a full-width page. If you choose a layout with a left hand menu like Yakovtravis.com, the text width is fairly natural for eye movements and reading the text lines. If you have a full width page, it might be a good idea to create a column to shorten your text lines. Here’s the homepage of MidRun Press without using tables.

And here’s a remake of the homepage after using tables.

Here’s a look at the Page Editor, so you can see how the table is used.

We set the width of the table to 550 pixels. The cells autoadjust to the width of the contents. We aligned the table in the center, and we set cell padding to 10 pixels. With the table editing options it’s possible to precisely control the layout of text and pictures on the midrunpress page.

Order and Data Tables.

Now let’s take a look at an order Table. The first two examples show how hidden tables can help you with your page layout. Another common use of tables is to present data. Here’s an ordering table that gives the pricing and shipping discounts for quantity purchases.

This author chose to use a border on her table to make the cells stand out. These three examples are a brief introduction to how tables are used.

Now that you've learned from these Table Instructional Sessions, you'll be able to use tables in your website. Keep your eyes open now as you visit websites, and you’ll see that tables are a very common layout tool for positioning elements on a website page.