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>

</tr>

<tr>

</tr>

</table>

</body>

</html>

5. SPANNING A CELL ACROSS TWO OR MORE ROWS

<html>

<body>

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

<tr> <td rowspan="2">COUNTRIES OF ORIGIN</td>

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

</tr>

<td></td> (MUST DELETE THIS EMPTY CELL BECAUSE THE rowspan TAKES IT UP)

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

<th>Beijing</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

6. CHANGING A TABLE'S WIDTH AND HEIGHT

Use the width and height attributes to resize the whole table or to define the dimensions of particular cells. These are attributes of the table and td tags. Width and height are either absolute values or percentages that indicate how big the table should be with respect to the full window size.

USE 200 and 300

USE 80% and 50%

I use percentage more often because it allows the table to scale to the user’s window size.

<html>

<body>

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

<tr> <td rowspan="2">COUNTRIES<br>OF ORIGIN</td>

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

</tr>

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

<th>Beijing</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

NOTE: You can’t make the table too small for the contents. The browser will just ignore the values you’ve set.

Center the table by adding align="center" in the table tag.

7. CHANGING A CELL'S SIZE

You can change the width and height of a cell, too. Remember that changing a cell's size will effect the size of all the cells in that row or column.

<html>

<body>

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

<tr> <td rowspan="2" width="20">COUNTRIES<br>OF ORIGIN</td>

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

</tr>

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

<th>Beijing</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

8. ALIGNING THE CONTENTS OF CELLS

Using the align and valign attributes

Aligning contents of cells horizontally by using the tr, th or td tag.

align=direction(left, center, right or justify)

<html>

<body>

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

<tr> <td rowspan="2" width="200">COUNTRIES<br>OF ORIGIN</td>

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

</tr>

<th width="200">San<br>Francisco</th>

<th>Beijing</th>

</tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

To Align Vertically to the cell’s edges.

<td valign="direction"> where "direction" equals top, middle, bottom or baseline>

example: <tr valign=bottom>

9. BACKGROUND COLOR AND IMAGE Changing a cell’s color

You can change the color of one or more cell’s to set off important information.

Within the <td> or <th> tag, use the bgcolor="######"

You can change the color as many times as you want within a table.

Explorer supports the bgcolor in the table tag for changing the background of the whole table.

Using a background image

10. SPACING AND PADDING THE CELLS.

Cell spacing adds space between the cells, making the table bigger without changing the size of individual cells.

<table cellspacing="n"> where "n" is the number of pixels desired between each cell

Default for cell spacing is 2 pixels

Cell padding adds space around the contents of the cell, pushing the walls of the cell outward.

<table cellpadding="n"> where "n" is the number of pixels desired between the contents and the walls of the cell.

Default for cell padding is 1 pixel.

11. CONTROLLING LINE BREAKS

The browser will automatically break the text in your columns and rows as it decides on the width of your cells. If you want words to stay on particular lines, though, you can specify nowrap.

Inside the <td> or <th> cell type nowrap.

12. MAPPING OUT A TABLE

Setting up complicated tables or designing your site in tables can be confusing. I would recommend mapping out your table on paper before you begin.

Sketch the table
Divide the table into rows and columns
Mark the cells that will span more than one column or row
Count the number of cells in each row. There should be as many cell definitions (TD) in each row as there are columns.
Once you have the table straight, write the code.

Start by taking the table on the print out and breaking it up.

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

To Align Vertically to the cell’s edges.

9. BACKGROUND COLOR AND IMAGE Changing a cell’s color

12. MAPPING OUT A TABLE