Build A Simple Table

Aligning Images on Your Website

Without overcomplicating the HTML coding for your site, you can build a simple table to get images to sit side by side, in a column, or build a graphical table to present material.

You can build your own table or use a table builder, which takes out the room for error that you might make in 'hand-coding'.

Nevertheless, it is helpful to understand the basic parts of a table.

Basic Table Components

The table itself has opening and closing tags. Within the opening tags for the table, you can also specify the table width (by pixels or percent), border size, spacing, padding and background colour. (See the graphics below for details)

• To have a table without borders simply change the numeral from the default of 1 to 0, for a thick border try 8.
• Cell padding refers to the width of the 'inside' borders of the table cell.
• Cell spacing builds space around each cell of your table.

I generally set both at 2 - to giving 'breathing space' around each cell of the table. You can play with these figures to see how they change the appearance of your table.

Each column and row of the table then has its own opening and closing tags-

• tr tags for rows
• td tags for columns (or cells)

and your text or image code needs to fit within these. See below..

Basic 3 Row Table

I will show the coding below for the same table of three graphical images lined up horizontally across a page, but with sizing and alt tags for the images. (ie With 3 rows and 1 column).

To make the table work best, try to have your graphics at the same size, or at least-

• the same height for a horizontal table
• the same width for a vertical table
• Make sure they will fit across the width of your page

to give the table good alignment.

Table with Alt tags and Image sizing

The Actual Table



To add further columns to this table the basic code would look like the graphic below.



This basic table will serve for placing images, but a more complicated table may be required if you need headlines, or other aspects included in your table.

Back to Home from Build a Simple Table

Web Services . More Web Tutorials