Notebook IV: Using Tables On A Webpage

Table

Table Row

Table Data

TD-Table Data cells

Resulting In:

Blue	Yellow
Red	Black

Blue	Yellow
Red	Black

Tables In More Detail

summary

caption

Table Header

T<div align="center"></div>

Resulting In This Table:

Classes at Webversity
Name	Number	Term	Grade
Anfy	173	Sp 04	A
CVNotebook 8	186	Sp 04	A
Playing with 8	187	Sp 04	A

Colspan

"table data"

table heading

Basic Colors
Blue	Yellow
Red	Black

"Basic Colors" is a table heading <th> with a colspan="2"

ROWSPAN

table data

table heading <th> to make a heading or cell that covers
more than one row that extends all the way down the table:

Basic Colors

Blue Yellow

Red Black

Is Coded as follows:
<Table border="5">
<tr>
<td rowspan="3">The Basic Colors</td>
</tr>
<tr>
<td>Blue</td>
<td>Yellow</td>
</tr>
<tr>
<td>Red</td>
<td>Black</td>
</tr>
</table>

When using the rowspan attribute, a "1" must be added to the actual number of desired rows spanned.
the cell itself counts as one row.

The colspan attribute uses the exact number of columns desired.

When the information in a table looks cramped, cellspacing and cellpadding are attributes that can be added
to the opening <table> tag to adjust the size of the table.

CELLSPACING makes the space between the cells larger and the internal borders thicker:

The Basic Colors

Blue Yellow

Red Black

Html Code:
<table border="5" cellspacing="10">
<tr>
<td rowspan="3">The Basic Colors</td>
</tr>
<tr>
<td>Blue</td>
<tdYellow</td> </tr>
<tr>
<td>Red</td>
<td>Black</td>
</tr>
</table>

CELLPADDING can be added to make the space between the items in the cells and the cell walls larger:

The Basic Colors

Blue Yellow

Red Black

HTML Code as follows:
<table border="5" cellpadding="10"&t;
<tr>
<td rowspan="3">The Basic Colors</td>
</tr>
<tr>
<td>Blue</td>
<td>Yellow</td>
</tr>
<tr>
<td>Red</td>
<td>Black</td>
</tr>
</table>

All these attributes can be combined to produce a table like this:

The Basic Colors

Combined To Create Others

Blue Yellow

Red Black

HTML Coding:
<table border="5" cellpadding="10">
<tr>
<td colspan="3">The Basic Colors</td>
</tr>
<tr>
<td rowspan="3"><i>Combined To Create Others</i></td>
</tr>
<tr>
<td>Blue</td>
<td>Yellow</td>
</tr>
<tr>
<td>Red</td>
<td>Black</td>
</tr>
<l;/table>

Continue To Page II

Notebook I

Notebook II

Notebook III

Notebook IV

The Basic Colors
Combined To Create Others
	Blue	Yellow
	Red	Black