Formatting HTML Documents

One of the most important HTML elements to understand is the table. This page shows you how to control basic formatting using a table.

Suppose you want a simple two column layout like this:

blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj lkj lasdj blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj fk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lkdsufoieurlkasj fkldsfr lkjr more blah blah blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj fklds blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj fr lkjr

This actually consist of a table of one row and 3 columns. Using Stylesheets it could be done with 2 columns, but that will be discussed later.

The three basic elements that are used here are:

. The TR element specifies a table row. The TD element specifies table data in a given column. These elements have properties to control alignment and color. The HTML for this table is shown below:

column 1 data column 2 data

Notice the width is 100% and each cell is 5 pixels from the adjacent table cell. The middle column contains a background color property and all data is aligned at the top (valign=’top’). A handful of changes and the table can look quite different (ugly, but different).

blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj lkj lasdj blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj fk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lkdsufoieurlkasj fkldsfr lkjr more blah blah blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj fklds blah blah aldkj aldkjfa dkfjalkdjf alkdjfal kdjf alkjdflkajsfd lkajsdfl kjasdlfkjalksdjf lakjdflkja lkjdalfkj. alsdkfja lkj lasdjfk.a f.ajsdfokj laksdjflka sjdf lkashdl lkdsaj lksj fr lkjr

The source for this table is shown below

< width='60%' cellspacing='5px' cellpadding=0 bgcolor='lightyellow' >

column 1 data column 2 data