and cells (i.e., columns)


HTML Tables

Figure 1

Figure 1

Knowing how to build tables using HTML allows you to structure a page in a many different layouts. However, working with tables can be very confusing. Therefore, before you begin coding a page, you may find it helpful to use paper and pencil to layout the different elements of the page in relation to where you want them to go. Then based on this layout, determine how these elements might be configured into ‘rows and cells’ as they would relate to a table(s). For discussion purposes we have created a page with 2 tables and will refer to ‘cells’ as columns.

The table in Figure 1  (click on image to view larger size) was created with HTML and has a single primary table that includes 1 secondary table. The secondary table resides in the space that is Row 2, Column 2.

Before writing the code for this table, we laid out the format and blocked in the elements for both the primary table and the secondary table as shown in Figure 2 (click on image to view larger size).

Click here to view full size image

Figure 2

When using tables not only can you control the layout and presentation of the page, but also you can change some variables of the table elements for a more striking presentation or to draw attention to certain portions of the page.

Some of the table variables are:

  • Alignment (placement of the table)
  • Background color (change the background color of a row, column or whole table)
  • Background image (use an image for the background of a row, column or whole table)
  • Border (place a border around the table or portion of the table)
  • Border color (choose a color for the border)
  • Border size (choose the line size of the border)
  • Cellspacing (choose the space between the columns)
  • Cellpadding (choose the space between the cell content and the wall of the column)
  • Height (specify a particular height)
  • Width (specify a particular width)

When coding a table, you can also assign variables to the rows

.  Some of those variables are the same as you would use for the table , i.e, alignment, background color or image, height, and width. However, you can also change the ‘column span’ as we did in Figure 1 where Rows 1 and 3 of the primary table, and Row 2 of the secondary table span 3 and 2 columns respectively. This is particularly helpful when you want to have a table with a ‘title’  that is to be in 1 column but has multiple columns of information below it – all in the same table. 

Our sample table is very simple and uses only the ‘border’ and ‘border color’ options to differentiate the 2 tables for viewing. When writing tables it is recommended to use the ‘blind comment’ tag to denote the beginning and ending of the different tables . . . particularly if you have nested tables.

Easily learn how to write HTML tables and have a handy  reference guide for everything  else HTML all in one place  . . . get   Elizabeth Castro’s Quickstart Guides .  They give you everything you need in an easy to understand image format without having to read a long involved explanation.  Her books are available from Amazon and we highly recommend them to anyone – beginner to advanced.

Comments are closed.