Basic Web Page Writing Step 20

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

Basic Web Page Writing Step 20
Creating Tables

This is the last step of this guide. It will take you through the process of creating simple tables for your page. After this step you will have enough background to create the web page you always wanted.

Tables are a way of presenting information in a format that consists of rows and columns similar to how a spreadsheet displays informaiton. Amost anything can be included in a table, from data to hyperlinks.

NOTE: Some web browsers cannot display tables, so if you use them be aware that they may not appear to others as they appear on your browser.

Tags Use To Create Tables

There are several tags that are used to create tables. Below is a brief listing of each and what each is used for.

<TABLE>-----defines the start of the table
</TABLE>-----defines the end of the table
<CAPTION>...</CAPTION>-----caption for table start and end tag. The align=bottom option may be used if the caption is to be placed on the bottom of the table. The default is align=top
<TR>...</TR>-----specifies the table row within the table. The align=left, right or center may be used as well.
<TH>...</TH>-----defines a table cell header
<TD>...</TD>-----defines a table data cell

Options That Can Be Used Within Table (<TABLE>...</TABLE> Tags

Align (left, center, right)----------------Horizontal alignment tablel
Border=n------------------------------Draw a border around table and specifies the size.
Cellpadding=n-------------------------How much empty space between items in the cells and the walls of the cells
Cellspacing=n--------------------------How much width between the inner lines that divide the cells

Options That Can Be Used Within The <TD>...</TD>, <TH>...</TH> and <TR>...</TR> Tags

Almost any option may be used within the <TD>...</TD>, <TH>...</TH> and <TR>...</TR>for defining the cell data such as color, bold and font size plus some additional ones shown below. Be aware that options used in the <TH>...</TH> and <TD>...</TD> override the options set in the <TR>...</TR> tags.

Align (left, center, right)----------------Horizontal alignment of a cell
Valign (top, middle, bottom)-----------Vertical alignment of a cell
Colspan=n-----------------------------Number of columns a cell spans
Rowspan=n----------------------------Number of rows a cell spans
Nowrap--------------------------------Turn off word wrapping within a cell

Table Layout

A simple table would look like this:

<TABLE BORDER=2>
<CAPTION>My First Table</CAPTION>
<TR>
<TH>FIRST CELL ROW 1 HEADER</TH>
<TH>SECOND CELL ROW 1 HEADER</TH>
</TR>
(This would create a header for each cell using the first row of the table)
<TR>
<TD>FIRST DATA CELL ROW 2</TD>
<TD>SECOND DATA CELL ROW 2</TD>
</TR>
(This would create the first row with two cells for your data)
<TR>
<TD>FIRST DATA CELL ROW 3</TD>
<TD>SECOND DATA CELL ROW 3</TD>
(This would create the second row with two cells for your data)
</TR>
</TABLE>

This would produce the following table:

My First Table
FIRST CELL ROW 1 HEADER	SECOND CELL ROW 1 HEADER
FIRST DATA CELL ROW 2	SECOND DATA CELL ROW 2
FIRST DATA CELL ROW 3	SECOND DATA CELL ROW 3

Study the above example and see if you can determine what each line of code accomplished. Then the following example will show you how some of the options can change the appearance of your table.

<CENTER> <TABLE BORDER=10 CELLPADDING=4 CELLSPACING=10>
<CAPTION>My Second Table</CAPTION>
<TR>
<TH COLSPAN=3>Header Spanning Three Columns </FONT> </TH>
</TR>
(This would create a single header using the first row of the table)
<TR ALIGN=CENTER>
<TD>This would be the first cell in row 2 </TD>
<TD>This is the second cell in row 2</TD>
<TD>This is the third row in cell 2 notice how all three are centered within the cells.</TD>
</TR>
(This would create the first row with three cells with your data centered)
<TR>
<TD>First Cell in Row 3</TD>
<TD>Second Cell in Row 3 </TD>
<TD ROWSPAN=2 ALIGN=RIGHT>Third cell in row 3 spanning 2 rows, aligned to the right side of the column </TD>
(This would create the second row with cell three spanning 2 rows and aligned right)
</TR>
<TR align=center>
<TD colspan=2>One Cell in Row 4 spanning 2 columns .</TD>
</TR>
(This would create a third row spanning 2 columns with one cell centered)
</TABLE> </CENTER>

My Second Table
Header Spanning Three Columns
This would be the first cell in row 2	This is the second cell in row 2	This is the third row in cell 2 notice how all three are centered within the cells.
First Cell in Row 3	Second Cell in Row 3	Third cell in row 3 spanning 2 rows, aligned to the right side of the column
One Cell in Row 4 spanning 2 columns.

If you study the second example, you should start to see just how you can configure a table to suit your needs. Try each of the above and modify some options to see what kind of a table you can create. Just remember that the <table>...</table> tags must surround the entire table. The Caption and Table Header tags are optional, and each row should have a <TR>...</TR> surrounding them. You can then place the <TD>....</TD> around each cell within each row.

There is much more you can do with tables, so as you get familiar with simple tables, you may want to check out one of the references listed in the next page for more information on creating more complex tables.

Links To Software Used In This Guide

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

created by Larry Curreri,

last modified: January 14, 2002

This page hosted by Get your own Free Home Page

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page