- home |
- workshops |
- tutorials |
- e-portfolio |
- LIS
Module 3: Tables
Creating a Simple Table
HTML tables allow you to display tabular data, that is data in rows and columns. In this tutorial you'll learn how to create a simple table in no time.
To create a simple table, you will need to start with the <TABLE> tag and then add rows, or <TR> tags, and then individual cells,
or <TD> tags. First, begin your HTML document with the required <HTML>, <HEAD>, AND <BODY> tags:
<HTML>
<HEAD>
<TITLE>My First Table</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">
</BODY>
</HTML>
Step One.
After the <BODY> tag, type in:
<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE>
</TABLE>
</BODY>
Step Two.
Type <TR> to create a Row:
<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE>
<TR>
</TR>
</TABLE>
</BODY>
Step Three.
Type <TD> to create a Cell:
<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
</BODY>
Step Four.
Type the contents of the first cell. In this example, type a capital letter A
between the opening <TD> and closing </TD> tags:
<TABLE>
<TR>
<TD>A</TD>
</TR>
</TABLE>
Step Five.
We are going to create two more cells, B and C by repeating Steps Three and Four:
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
We just created a row <TR> containing three cells <TD>:
cell A,B,C.
Save your work and preview your HTML file in your web browser. Your table should
look like this:
| A | B | C |
Step Six.
Now lets add two more rows to the table and add three cells to each row just like
we did in Steps Two, Three and Four:
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>1A</TD>
<TD>1B</TD>
<TD>1C</TD>
</TR>
<TR>
<TD>2A</TD>
<TD>2B</TD>
<TD>2C</TD>
</TR>
</TABLE>
Follow the HTML code above and your table should look like this:
| A | B | C |
| 1A | 1B | 1C |
| 2A | 2B | 2C |
Table Headers
We can also create table headers. Modifying the above code, we can make A, B, and C into table headers, denoted by a <TH> in place of a <TD> . <TH> should make your table cells look slightly different from the rest.
<TABLE>
<TR>
<TH>A</TH>
<TH>B</TH>
<TH>C</TH>
</TR>
<TR>
<TD>1A</TD>
<TD>1B</TD>
<TD>1C</TD>
</TR>
<TR>
<TD>2A</TD>
<TD>2B</TD>
<TD>2C</TD>
</TR>
</TABLE>
Follow the HTML code above and your table should look like this:
| A | B | C |
|---|---|---|
| 1A | 1B | 1C |
| 2A | 2B | 2C |
Centering Cell Contents
Step Seven.
Now, let's add some formatting like centering the cell's contents. In each <TD> tag, add the attribute align=center:
<TABLE>
<TR>
<TD align=center>A</TD>
<TD align=center>B</TD>
<TD align=center>C</TD>
</TR>
<TR>
<TD align=center>1A</TD>
<TD align=center>1B</TD>
<TD>1C</TD>
</TR>
<TR>
<TD align=center>2A</TD>
<TD align=center>2B</TD>
<TD align=center>2C</TD>
</TR>
</TABLE>
Your table should look like this:
A |
B |
C |
1A |
1B |
1C |
2A |
2B |
2C |
note: you can also align a cell's contents by using either left, center, or right. The default alignment is left as in the example for Step Six.
Spacing between Cells and Cell Content
Step Eight.
Now let's also add some spacing between the cell's contents and the table's border.
We can do this by using one of two <TABLE> attributes cellpadding and cellspacing. Cellpadding adds spacing between the cell's contents
and the table's border. Cellspacing adds spacing between cells. A value of 0 for
either cellpadding or cellspacing will not add any space at all. If you're confused
at this point, simply follow the code below and try to substitute higher or lower
values for both cellspacing and cellpadding.
<TABLE cellpadding=10 cellspacing=0>
<TR>
<TD align=center>A</TD>
<TD align=center>B</TD>
<TD align=center>C</TD>
</TR>
<TR>
<TD align=center>1A</TD>
<TD align=center>1B</TD>
<TD>1C</TD>
</TR>
<TR>
<TD align=center>2A</TD>
<TD align=center>2B</TD>
<TD align=center>2C</TD>
</TR>
</TABLE>
A table with a cellpadding of 10:
A |
B |
C |
1A |
1B |
1C |
2A |
2B |
2C |
note: If you don't put either cellpadding or cellspacing attributes within the <TABLE> tag, the default setting is zero
(0), or no spacing between cells or its contents as in the example for Step Six.
Table Borders
Step Nine.
You can also choose to have no borders around a table, or have the option of increasing
a border's thickness. In either case, you will need to use the border attribute in the <TABLE> tag.
Table with cellpadding=10 cellspacing=0 border=0
A |
B |
C |
1A |
1B |
1C |
2A |
2B |
2C |
Table with cellpadding=10 cellspacing=0 border=5
A |
B |
C |
1A |
1B |
1C |
2A |
2B |
2C |
You can even add color to individual cells and format cell contents:
A |
B |
C |
1A |
1B |
1C |
2A |
2B |
2C |
Specifying the Width of a Table
Step Ten.
You can tell a table how wide it should be by expressing its width in pixels.
To ensure that your web pages print properly through a printer (without any text
getting chopped off because of a table being too wide) and to prevent users from
scrolling horizontally in the browser, it's a good rule of thumb to keep your
table widths to no larger than 600 pixels wide. For example:
This table's width is set to 600 and will display and print fine. No problem:
A |
B |
C |
1A |
1B |
1C |
2A |
2B |
2C |
note: you can specify pixels (absolute) or percentages (relative) as possible table widths. The advantage of using percentages is your table will expand to fit your browser window, depending on the percentage you set. Using pixels, or absolute
Next: Adding an Image to a Table »
top of page