Earth from the Moon
The moon has the consistency of Camembert

A Basic Table

Tables were originally intended for displaying tables of numbers and similar tabular data (hence the word "table") using columns and rows. However it didn't take long for web designers to figure out how useful tables were as tools for composing a page. They allowed a good amount of control over positioning and composition. For example, tables can be set to a fixed size and then rows and columns can be left empty but used for creating empty areas and margins.

The use of tables for composing page sections has been largely replaced with what is called CSS-P: CSS Positioning.

The table above has only two rows and one column. Each row has one cell in it. The table has no size settings. The content determines the size. In this case it's the photo. Tables must always accommodate whatever contents they have, regardless of the sizes set for the table, its rows or its cells.

For the purposes of illustration, I have included a table border of 2 pixels so that it is easier to see the edges of the table cells. We will remove the borders later on.

Here are the table tags:

TABLE - establishes and nests the entire table
TR - designates one row (TR = table row), nesting the table cells tags (TD) for that row.
TD - designates one cell in a table (TD = table data)

Now have a look at this table, to see the results of some table attribute settings. Everything else we'll be discussing has to do with table attributes. There are many. Whenever there is a conflict between attribute settings, the smaller object's attribute will prevail.

 

© 2011 Dan Vaughan