Table Examples

Table Deconstruction:

This table started out as 3 columns and 3 rows. The third column spans 3 rows and the second row spans 2 columns. The border is 1 pixel thick and the cell padding and spacing are 0. After you load this document into Dreamweaver click on the table and change these values to see what happens.

Here come the elephants! They are on their way to the watering hole. Luckily, there is water in it because a lot of them have dried up.

Internal CSS for this table:

body,td,th {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 14px;
}
td {
  background-color: #000;
  color: #F90;
}
td {
  padding: 10px;
}
.noBgColor {
  color: #000;
  background-color: #FFF;
}

Inline styles that Dreamweaver creates (notice the deprecated code):

Column 1: Selected the column and chose horizontal alignment to be center. This is the code Dreamweaver generated:

<td width="316" align="center">

Column 3: Spanning 3 rows and selected vertical alignment to be top. This is the code that Dreamweaver generated:

<td width="331" rowspan="3" valign="top" class="noBgColor">

The Table inline style:

<table width="1000" border="1" cellspacing="0" cellpadding="0">

Spanned 2 Columns

The zebras must have heard the elephants coming to the water hole!

Borderless Table:

The border, cell_padding and cell_spacing of the table are set to 0.

cell 1	cell 2
cell 3	cell 4

Internal CSS for this table:

#noCellWalls {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-align: center;
  color: #f90;
  border: medium solid #f90;
}