I’ll introduce basic table tags, which you’ll use
for your in-class table assignment.
TOPICS
Tables:
Introduction to Tables
Includes:
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> |
Tag surrounds the table
content |
|
<TR>
Text goes here </TR> |
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> |
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
<TABLE
border=2>
<CAPTION ALIGN=center>This table is
a test of alignment</caption>
<tr align=right>
<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>
<tr align=center>
<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>
<td>800,000</td>
</tr>
<tr>
<th
align="left">New York</th>
<td>9,000,000</td>
</tr>
<tr>
<th
align="left">Beijing</th>
<td>1,000,000,000</td>
</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>
<tr align="left">
<th>San
Francisco</th>
<th>New
York</th>
<th>Beijing</th>
</tr>
<tr>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</table>
</body>
</html>
To align all the headers to the left, use the tr
align="left" attribute.
<html>
<body>
<table>
<tr>
<td><br>CREATE
AN EMPTY CELL TO SPACE OVER TO HEAD
<th>San
Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>
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>
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>
<table border="2"
bordercolor="0000CC">
<caption><font size="5"
face="arial"><B>POPULATION
GROWTH</B></font></caption>
<tr align="left">
<td><br>
<th>San<br>Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</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.
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>
<table border="2"
bordercolor="0000CC">
<caption><font size="5"
face="arial"><B>POPULATION
GROWTH</B></font></caption>
<tr><td></td>
<th
colspan="2">UNITED STATES</th>
</tr>
<tr align="left">
<td><br>
<th>San<br>Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>
5. SPANNING A CELL ACROSS TWO OR MORE ROWS
<html>
<body>
<table border="1" bordercolor="0000CC">
<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>
<tr align="left">
<td></td> (MUST DELETE
THIS EMPTY CELL BECAUSE THE rowspan TAKES IT UP)
<th>San<br>Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988-1989</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</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>
<table border="1"
bordercolor="0000CC" width="200" height="400">
<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>
<tr align="left">
<th>San<br>Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988-1990</th>
<td>500,000-700,000</td>
<td>900,000-1,000,000</td>
<td>8,000,000-9,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</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>
<table border="1"
bordercolor="0000CC" width="80%" height="60%">
<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>
<tr align="left">
<th>San<br>Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988-1990</th>
<td>500,000-700,000</td>
<td>900,000-1,000,000</td>
<td>8,000,000-9,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>
8. ALIGNING THE CONTENTS OF CELLS
Using the align and valign attributes
align=direction(left, center, right or justify)
<html>
<body>
<table border="1"
bordercolor="0000CC" width="80%" height="60%"
align="center">
<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>
<tr align="left">
<th
width="200">San<br>Francisco</th>
<th>
New York</th>
<th>Beijing</th>
</tr>
<tr align="center">
<th>1988-1990</th>
<td>500,000-700,000</td>
<td>900,000-1,000,000</td>
<td>8,000,000-9,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>
<td valign="direction">
where "direction" equals top, middle, bottom or baseline>
example: <tr valign=bottom>
You can change the color of one or more cell’s to
set off important information.
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
<table background="imagename.gif">
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.
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.
Start by taking the table on the print out and breaking it up.