MIS 114

Web Page Essentials

Project 6: Creating Tables

Lesson 1: Creating a Simple Table

HTML to produce a table without a BORDER:


<TABLE>

<TR>

<TD>Column A, Row 1 __</TD>

<TD>Column B, Row 1 __</TD>

<TD>Column C, Row 1 __</TD>

</TR>

<TR>

<TD>Column A, Row 2 __</TD>

<TD>Column B, Row 2 __</TD>

<TD>Column C, Row 2 __</TD>

</TR>

</TABLE>

is displayed by a browser like this:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

and with a BORDER:


<TABLE BORDER>

...

</TABLE>

appears:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

with a BORDER="6":


<TABLE BORDER="6">

...

</TABLE>

appears:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

with a BORDER="12" WIDTH="90%":


<TABLE BORDER="12" WIDTH="90%">

...

</TABLE>

appears:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

Lesson 2: Applying Cell Spacing and Padding

with ... CELLSPACING="20":

HTML to produce a table


<TABLE BORDER="9" WIDTH="85%" CELLSPACING="20">

...

</TABLE>

appears:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

With CELLSPACING you may control the amount of space between cells in a table.

with ... CELLPADDING="20":


<TABLE BORDER="9" WIDTH="85%" CELLPADDING="20">

...

</TABLE>

appears:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

With CELLPADDING you control the amount of space between the border of a cell and its contents.

and with both ... CELLSPACING="20" CELLPADDING="20":


<TABLE BORDER="9" WIDTH="85%" CELLSPACING="20" CELLPADDING="20">

...

</TABLE>

appears:

Column A, Row 1 __	Column B, Row 1 __	Column C, Row 1 __
Column A, Row 2 __	Column B, Row 2 __	Column C, Row 2 __

Lesson 3: Aligning Cell Data

with <TD ALIGN=...>

HTML to produce a table

<TABLE BORDER WIDTH="60%"> <TR> <TD ALIGN="LEFT">Cell A1</TD> <TD ALIGN="CENTER">Cell B1</TD> <TD ALIGN="RIGHT">Cell C1</TD> </TR> <TR> <TD>Cell A2</TD> <TD>Cell B2</TD> <TD>Cell C2</TD> </TR> </TABLE>

appears:

Cell A1 Cell B1 Cell C1

Cell A2 Cell B2 Cell C1

With <TD ALIGN=...> you control data alignment "cell by cell" in a table. As illustrated with Row 2, LEFT is the default alignment.

with <TR ALIGN=...>


<TABLE BORDER WIDTH="60%">

<TR>

<TD>Cell A1</TD>

<TD>Cell B1</TD>

</TR>

<TR ALIGN=CENTER>

...

</TR>

<TR ALIGN=RIGHT>

...

</TR>

</TABLE>

appears:

Cell A1 Cell B1

Cell A2 Cell B2

Cell A3 Cell B3

With <TR ALIGN=...> you control cell data alignment "by Row" in a table. Row 1 is aligned LEFT by default.

With <TABLE ALIGN=...> you control the alignment of the entire table with respect to the data immediately following the table on the page.


<TABLE BORDER WIDTH="60%" ALIGN="RIGHT">

<TR>

<TD>Cell A1</TD>

<TD>Cell B1</TD>

</TR>

<TR>

<TD>Cell A2</TD>

<TD>Cell B2</TD>

</TR>

</TABLE>

With <TABLE ALIGN="RIGHT">, the table will be displayed to the RIGHT of whatever is physically placed right below it in the document.

appears:

Cell A1 Cell B1

Cell A2 Cell B2

With <TABLE ALIGN="RIGHT">, the table will be displayed to the RIGHT of whatever is physically placed right below it in the document.

with <TABLE ALIGN="LEFT"> without a BORDER


<TABLE WIDTH="40%" ALIGN="LEFT">

...

</TABLE>

With <TABLE ALIGN="LEFT">, the table will be displayed to the LEFT of whatever is physically placed right below it in the document.

appears:

Cell A1 Cell B1

Cell A2 Cell B2

With <TABLE ALIGN="LEFT">, the table will be displayed to the LEFT of whatever is physically placed right below it in the document.

Lesson 4: Specifying Cell Spanning

with <TD COLSPAN="2">:

HTML to produce a table

<TABLE BORDER WIDTH="60%"> <TR> <TD ALIGN="LEFT">First Cell</TD> <TD ALIGN="CENTER" COLSPAN="2">Second Cell</TD> <TD ALIGN="RIGHT">Third Cell</TD> </TR> <TR> <TD>Fourth Cell</TD> <TD>Fifth Cell</TD> <TD>Sixth Cell</TD> </TR> </TABLE>

The Second Cell spans 2 column widths. The Third Cell appears to be positioned above a "non-cell."

First Cell Second Cell Third Cell

Fourth Cell Fifth Cell Sixth Cell

with <TD COLSPAN="2"> and <TD ROWSPAN="2">:

<TABLE BORDER WIDTH="60%"> <TR> <TD ALIGN="LEFT">First Cell</TD> <TD ALIGN="CENTER" COLSPAN="2">Second Cell</TD> <TD ALIGN="RIGHT" ROWSPAN="2">Third Cell</TD> </TR> <TR> ... </TR> </TABLE>

The Second Cell still spans 2 column widths and the Third Cell now spans 2 rows.

First Cell Second Cell Third Cell

Fourth Cell Fifth Cell Sixth Cell

Lesson 5: Creating Headers and Captions

HTML to produce a table with a HEADER:

<TABLE BORDER WIDTH="80%"> <TR> <TH>Header Text</TH> <TD>Cell B1</TD> <TD>Cell C1</TD> </TR> <TR ALIGN="CENTER"> <TD>Cell A2</TD> <TD>Cell B2</TD> <TD>Cell C2</TD> </TR> </TABLE>

Data in the First Cell (A1) is automatically Centered and Bolded since it is within a set of <TH> tags instead of <TD> tags.
The text in the next 2 cells of the first row are left-aligned by default.
In the second row, cell text is centered within each cell by the <TR ALIGN="CENTER"> tag.

Header Text Cell B1 Cell C1

Cell A2 Cell B2 Cell C2

HTML to produce a CAPTIONed table with a Header spanning two columns and a pair of row Headers:

Header Text	Cell B1	Cell C1
Cell A2	Cell B2	Cell C2

<TABLE BORDER WIDTH="70%"> <TR> <TD> </TD> <TH COLSPAN="2">Column Header</TH> </TR> <TR ALIGN="CENTER"> <TH ALIGN="LEFT">  Row 2 Header</TH> <TD>Cell B2</TD> <TD>Cell C2</TD> </TR> <TR ALIGN="CENTER"> <TH ALIGN="LEFT">  Row 3 Header</TH> <TD>Cell B3</TD> <TD>Cell C3</TD> </TR> <CAPTION>Project 6, Lesson 5, Table</CAPTION> </TABLE>

appears as:

Project 6, Lesson 5, Table
	Column Header
Row 2 Header	Cell B2	Cell C2
Row 3 Header	Cell B3	Cell C3

The First Row:
- The first cell (A1) contains a non-breaking space, " ".
- The second cell's text is between a pair of <TH> header tags and is, therefore, Centered and Bolded.
- It also spans the next 2 rows' second and third columns since its Tag Headers used "COLSPAN=2" .
The Second and Third Rows:
- The next 2 rows have <TR ALIGN="CENTER">...</TR> tags, to center their cells' text, unless it is over-ridden by a cell "ALIGN=..." setting.
- They also have 3 cells each, in contrast to the first row's 2 cells.
- The text of first cell of each of those rolls is within a pair of <TH ALIGN="LEFT">...</TH> tags, hence the text is Left-Aligned and Bold.
- A pair of non-breaking spaces gives the row headers a slight indent within their cells.
The table's caption is entered just after the last </TR> tag, before the </TABLE> tag.

Lesson 6: Creating a Table Template

The "Table Assistant" is not available with the shareware version of HTML Assistant Pro that comes with your textbook.

Your instructor, however, will show you how to use MS-Excel to create HTML tables.

Continue to Project 7 or go back to the Table of Contents.

Updated: Nov. 9, 1998; Corrected (by adding quotes around attribute values): Mar. 17, 2003

First Cell	Second Cell		Third Cell
Fourth Cell	Fifth Cell	Sixth Cell