HTML: Tables (Part 1)

 

Tables

Tables are a widely-used way of organizing and presenting information on the Web. Begin creating a table with the <TABLE> tag, and conclude the table with </TABLE>. Each row of a table begins with the <TR> tag; the </TR> tag to conclude the row can be optional. Inside each <TR> tag is a <TD> tag that begins each column. Each <TR> tag typically contains several <TD> tags (that is, several columns). (See www.HTMLHelp.com for more information on <TABLE>, <TR>, and <TD>.)

 

<TABLE> Attributes

Different attributes within the <TABLE> tag affect your table. The WIDTH attribute determines how much of the window the table occupies. Examples are: <TABLE WIDTH="50%"> and <TABLE WIDTH=400> where "400" means 400 pixels. (See www.HTMLHelp.com for more information on WIDTH.)

The BORDER attribute determines the width in pixels of the table's border. For example: <TABLE BORDER=5>. (For more information on BORDER.)

The BORDERCOLOR attribute specifies the color of the table's border. The color can be specified with words ("azure") or in hexadecimal ("#F0FFFF"). For example: <TABLE BORDER=5 BORDERCOLOR="azure"> or <TABLE BORDER=5 BORDERCOLOR="#F0FFFF">.

The CELLSPACING attribute specifies the number of pixels between adjacent cells in the table. CELLSPACING and CELLPADDING (see below) can be useful in keeping the presentation in a table from getting crowded. For example: <TABLE CELLSPACING=5>. (For more information on CELLSPACING.)

The CELLPADDING attribute specifies the number of pixels that separates what is inside a cell from the cell border. For example: <TABLE CELLPADDING=3>. (For more information on CELLPADDING.)

 

<TR> and <TD> Attributes

Many attributes can be used within the <TR> and <TD> tags to affect rows or individual cells. An example is the ALIGN attribute, which determines horizontal alignment. Values that ALIGN takes on are: LEFT, RIGHT and CENTER. To affect vertical alignment, use VALIGN, which takes on the values TOP, MIDDLE, BOTTOM and BASELINE. An example would be: <TR ALIGN=CENTER VALIGN=BOTTOM>. (For more information on ALIGN and VALIGN.)

Example

Here is HTML for a table that displays information on some of the special characters:

 

<table width="100%" border=1 bordercolor="dodgerblue" cellspacing=0 cellpadding=2>

<tr align=center>

<td><b>Entity</td>

<td><b>Symbol</td>

<td><b>in HTML</td>

<td><b>Example</b></td>

</tr>

<tr align=center>

<td>copyright symbol</td>

<td>&copy;</td>

<td>&amp;copy;</td>

<td>&copy; 2000 Britney Spears</td>

</tr>

<tr align=center>

<td>quotation mark</td>

<td>&quot;</td>

<td>&amp;quot;</td>

<td>&quot;Hi honey, I'm home!&quot;</td>

</tr>

<tr align=center>

<td>Yen</td>

<td>&yen;</td>

<td>&amp;yen;</td>

<td>1.12 &yen; to the Dollar</td>

</tr>

<tr align=center>

<td>e acute</td>

<td>&eacute;</td>

<td>&amp;eacute;</td>

<td>Touch&eacute;!</td>

</tr>

<tr align=center>

<td>inverted ?</td>

<td>&iquest;</td>

<td>&amp;iquest;</td>

<td>&iquest; Habla Espanol?</td>

</tr>

</table>

 

to see this how this code looks in a window.

 

Other Resources

Try these links on tables:


Page Link
Tables www.w3.org/MarkUp/Guide/Advanced.html
(And scroll almost half the way down the page)

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) eEverything.com. Create a table with at least 3 columns and 4 rows (including a heading row). Put some meaningful content into the table. Use the WIDTH, BORDER, BORDERCOLOR, and ALIGN tags. Use either CELLSPACING or CELLPADDING.

If you work on eEverything.com, your page can convey information on items on sale during the Thanksgiving Day Sale, what the sale price will be, and which colors of the items are available. Shetland wool sweaters will be on sale for $119, available in beige, burgundy and sky blue. Wool scarves will be on sale for $29, available in plaid, striped and solid colors. Men's winter boots will be on sale for $79, available in all sizes from 7 to 12.