Advanced Tables
APPLYING PREVIOUSLY LEARNED CODE:
Many of the tag attributes that you have applied to the table as a whole can also be applied to individual rows or cells. For example:
Background Colors:
Many of the tag attributes that you have applied to the table as a whole can also be applied to individual rows or cells. For example:
Background Colors:
would produce
Align:
would produce
NEW CODE:
Tables can also be adjusted in the following ways:
Cell Padding:
Cell padding is the distance in pixels between cell contents and the cell's edges. The default is set to 1 pixel which would look like this:
Tables can also be adjusted in the following ways:
Cell Padding:
Cell padding is the distance in pixels between cell contents and the cell's edges. The default is set to 1 pixel which would look like this:
If the code is changed such that the cellpadding attribute is 15:
the table will look like this:
Cell Spacing:
Cell Spacing is the distance in pixels between each of the cells. The default value is 2 pixels. If the code is changed to identify the cell spacing as 15:
Cell Spacing is the distance in pixels between each of the cells. The default value is 2 pixels. If the code is changed to identify the cell spacing as 15:
the table will look like this:
Column Span:
A cell can occupy the distance of more than one column through the use of the column span attribute. For example, this code:
A cell can occupy the distance of more than one column through the use of the column span attribute. For example, this code:
would produce this table:
Row Span:
Similar to the column span is Row Span, which allows a row to occupy more than one column. Here's the example code and table:
Similar to the column span is Row Span, which allows a row to occupy more than one column. Here's the example code and table:
Vertical Alignment:
The above code can be changed such that the text, "This spans two rows" is aligned to the top of its cell. This attribute would be changed within the cell's <td> tag like this:
The above code can be changed such that the text, "This spans two rows" is aligned to the top of its cell. This attribute would be changed within the cell's <td> tag like this:
and it would result in the table looking like this:
Height:
Cell height can also be changed within the <td> tag. If you do this, all the cells in the same row will change accordingly to match. Use the following attribute code:
<td height="?">
where ? is set as a number of pixels.
For example, the code we've been looking at could be changed to this:
Cell height can also be changed within the <td> tag. If you do this, all the cells in the same row will change accordingly to match. Use the following attribute code:
<td height="?">
where ? is set as a number of pixels.
For example, the code we've been looking at could be changed to this:
which would produce the table below:
Nested Tables:
Keep in mind that tables can be nested within another table. For example, this code:
Keep in mind that tables can be nested within another table. For example, this code:
would produce this table: