I’ll introduce basic table tags, which you’ll use for your in-class table assignment.

DAY THREE

Includes:

Tables

Introduction to Tables:
Tables allow you to precisely align images, text and other elements in HTML. You can also align tabular data and line up information in a chart format. You can put almost any other HTML tag inside of a Table tag, which gives you some design power. Once you start using tables, things start to get complicated so you’ll want to make sure that you start formatting your HTML so that it’s easy to read on second glance. Someone else may have to edit your page. You’ll find that it’s important to make it easy to edit the HTML.

The simplest data organizes data into rows (horizontal) and columns (vertical).

HTML Table MarkUp:

HTML TAG	Purpose
<TABLE>Text goes here</TABLE> Sets up and closes table	Tag surrounds the table content
<TR> Text goes here </TR> Table row command	Tag defines each row in the table
<TD> Text goes here </TD> Table data command	Defines each cell in each row of data
<caption>Text goes here </caption> Caption tag	Places text above or below a table as a label. Must use after <table> tag and before <tr> or <td> tags.
<TH> Text goes here </TH> Table header tag	Used to create heads in a table by making the content bold and centered

TABLE ATTRIBUTES

Align= left, center, right	Works with various table tags to help you align the elements.
Align used with <TABLE> EXAMPLE: <TABLE ALIGN=CENTER>	Sets the alignment for the table to the rest of the page (default alignment is left)
Align with <CAPTION>	specifies how the caption should be aligned to the table itself (default alignment is center)
Use align with <TR>, <TD> or <TH> tags	Defines how the content within table cells is aligned. When you set an alignment for a <TR> tag, it sets the alignment for all the cells in that row. When you set the alignment for a <TD> tag, then it only affects that table cell. The setting set with the <TD> command will override any setting that you give with <TR>.
Border=number	This will set the border around a table in pixels. If you don’t want a border, the code would be: <table border=0>
Cellpadding=number	This basically helps builds white space between the content in your cells by specifying the amount between the outside of the cell and its content. The default value is 1 pixel.
Cellspacing=number	This adds space between cells. The default is 1 pixel.
Width=(number or percent)	This attribute sets the width of a table in either pixels or as a percentage of a browser’s display area. The width command also works within the <TH></TH> and <TD></TD> tags to assign a certain pixel-width or percentage to a table cell. Most tables are better off being set with percentages so that they scale according to a user’s browser.
Valign	This attribute is used with the <TR>, <TH> or <TD> tags to vertically align the contents of the table to the top, middle or bottom of the cell. The default value for this is middle.
Nowrap	Use the nowrap command when you want the content in a cell to stay in one cell and not wrap to the next line.
Colspan=number	Colspan lets you create a single table cell that spans more than one column. Use with the <TD> or <TH> tag.
Rowspace=number	Rowspan lets you create a single table cell that spans more than one row. Use with the <TD> or <TH> tag.
Bgcolor-color (or number)	Use this with <TD> to fill in the background color of table cells.

TABLE SAMPLE

<CAPTION ALIGN=center>This table is a test of alignment</caption>

<TH align=center>Header: This is the first row, column 1</th>

<TH align=right> Header: This is the first row, column 2</th>

</tr>

<TD color=teal>Cell: Row 2, column 1</TD>

<TD align=left color=blue>Cell: row 2, column 2</TD>

</tr>
</TABLE>

1. Simple table with two columns and three rows. The first columns have the headers. The second column contains the data.

Start with:

<html>

<body>

<table>

<tr> (defines the beginning of the first row.

There will be two elements in the first row – a table head and table data

<th>Creates a bold face tag for the head

<td> is just a regular cell

Press return and tab the rows to distinguish them from one another. Don’t forget to close the tag. You don’t have to, but the code feels more manageable if you do.

<th>San Francisco</th>

</tr>

<tr>

</tr>

<tr>

<th align="left">Beijing</th>

</tr>

</table>

</body>

</html>

The <th> tag automatically centers the text. To change the alignment add the <align="left"> attribute after the tag.

2. Put header cells across the top of the table:

You would define all the headers in the first row:

<html>

<body>

<table>

<th>San Francisco</th>

<th>Beijing</th>

</tr>

<tr>

</table>

</body>

</html>

To align all the headers to the left, use the tr align="left" attribute.

3. PUT HEADERS AT THE TOP AND ON THE LEFT

<html>

<body>

<table>

<tr>

<td><br>CREATE AN EMPTY CELL TO SPACE OVER TO HEAD

<th>San Francisco</th>

<th>Beijing</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

4. ADDING A CAPTION TO YOUR TABLE

Take last html file

Type <caption> outside of any row or cell tags.

align=direction (can be right, bottom, top or left. Top is the default)

<caption><font size="5" face="arial"><b>POPULATION Growth</b></font></caption>

5. ADDING A BORDER

A border help the table be more readable. You can also change the border color. These are attributes of the table tag. (With no bordercolor tags, the browser will usually shade the border based on the background color)

<html>

<body>

<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>

<th>San<br>Francisco</th>

<th>Beijing</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

5. SPANNING A CELL ACROSS TWO OR MORE COLUMNS

Many people use tables to implement a more difficult design in their Web site because it allows precise placement of graphics. You need to use the colspan option to do this, though.

TO SPAN A CELL ACROSS TWO COLUMNS

Once you get to the cell that you need to span across two columns, you add the colspan attribute and then designate the number of cols. You will have one less cell to define in this tr when you span a column.

<html>

<body>

<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>

<th colspan="2">UNITED STATES</th>

</tr>

<th>San<br>Francisco</th>

<th>Beijing</th>

</tr>

<tr>

</tr>

<tr>

DAY THREE: Tables

DAY THREE

Purpose

3. PUT HEADERS AT THE TOP AND ON THE LEFT

4. ADDING A CAPTION TO YOUR TABLE

5. ADDING A BORDER

TO SPAN A CELL ACROSS TWO COLUMNS