Working With Tables
Posted by Ryan Ross on 16 March 2010 02:25 PM
Have you ever encountered a situation where you wanted to create a photo gallery with multiple columns, and each image lined up with each other? Perhaps you have some text that you want to display in a two column, newspaper style. Tables are HTML structures or set of partitions, that allow you to create rows and columns. In this article we will show you how to create some simple tables, and use those tables to organize pictures, text, and more.
The simplest way to think of a table as it pertains to web design is to think of a table as a picture frame. This picture frame is one that you can adjust to your specifications and needs. Imagine if you had 6 pictures that you wanted to display on an article. You want to display those 6 pictures on 3 rows. Let's use a table to sort the pictures for us.
To create a 3x2 table, we will first start by creating a new article. You can actually do this anywhere the editor is available. To create the new table, go ahead and click the Insert/Edit Table button (seen right). The Table Properties prompt displays, and 3 rows and 2 columns are set by default. Each of the settings are adjustable, which gives you the most flexibility. Let's take a moment to review the attributes:
Rows - The number of rows in the table.
Columns - The number of columns in the table.
Width - The size in pixels or percent that the table will span. Note that you can define the width as a percentage of the space available for that particular section.
Height - The size in pixels that table will span. If you don't have a need for a specific height, leave this blank.
Cell spacing - The number of pixels BETWEEN each cell.
Cell padding - The number of pixels of padding space between the edge of the cell, and the content within the cell.
Border size - The size in pixels of the border around each cell. Set this to zero to have the borders not display.
Alignment - The horizontal alignment of the table itself (not the cells inside). Options are Left, Center, and Right.
When you're done, click OK. You should have returned to the editor, and you can see the empty table. Click your cursor in the cell you would like to edit. From there, you can type, insert Images, Links, as if it were a partition of the article or page.