Cafe LaTe Home
Contents
Background
Getting Started
Images
Links
Tables
Lists
Resources
Tag Index
Basic HTML Tables

Section 5: HTML Tables
   Lesson 5-1: Basic HTML Tables


   Hello, are you all ready to work on your first table? Roll up your sleeves, and let's get started.

   In this lesson you will learn all of the tags necessary to make a table. In the next two lessons you will learn how to fine-tune your tables to make them look a lot better.

   The basic table container element is, you guessed it:

table.../table

   Table row tags are placed inside this container:

table tr.../tr /table

   Table data cell tags are placed inside the table row tags:

table tr td ... /td /tr /table

   A table can have any number of rows and columns. You just need to add the data one row at a time. For most tables, you will probably want a header row at the top to label each column. Text in header cells is displayed in bold type. The tag for a table header cell is:

th.../th

   Finally, a centered title can be added to a table using the CAPTION tag:

caption.../caption

Caption tags can be placed anywhere inside the TABLE container, but are usually put right after the opening TABLE tag.




Need the
   source file?

If you have not done the previous lessons, and are just starting here, use this button to pop up a copy of the file containing all material covered up to this lesson. Then, just save the file to a floppy disk.

Copy source file


Practice:

   All right, it's time to add a table to your practice file. Open your file in Notepad and let's add the following table:

International Tourist Arrivals in Okinawa
Country: Taiwan South Korea Philippines U.S.A. Other Total
1995 100,327 3,688 1,575 9,006 4,099 118,695
1996 110,227 4,725 1,295 6,126 2,856 125,229
1997 142,376 5,393 1,512 6,294 4,077 159,652
1998 103,720 2,450 1,658 8,790 3,749 120,367
Source: OPG, Kankô Yôran, 1999

   Your practice file should now be getting fairly long, so let's not show the entire source file here. Just open your source file, and add a few blank lines somewhere near the bottom of your page. Then, add the following HTML code:


table cellspacing="2" cellpadding="2" border="1"
captionInternational Tourist Arrivals in Okinawa/caption
tr
thCountry:/th
thTaiwan/th
thSouth Korea/th
thPhilippines/th
thU.S.A./th
thOther/th
thTotal/th
/tr
tr
td1995/td
td100,327/td
td3,688/td
td1,575/td
td9,006/td
td4,099/td
td118,695/td
/tr
tr
td1996/td
td110,227/td
td4,725/td
td1,295/td
td6,126/td
td2,856/td
td125,229/td
/tr
tr
td1997/td
td142,376/td
td5,393/td
td1,512/td
td6,294/td
td4,077/td
td159,652/td
/tr
tr
td1998/td
td103,720/td
td2,450/td
td1,658/td
td8,790/td
td3,749/td
td120,367/td
/tr
/table

   When finished, save your file and check it in your browser. Your table should look like the table shown above this box of red code.

coffee break    After typing and checking all that HTML code, you deserve a break. Go ahead and relax a little before going on to the next lesson...

Review:

  • The TABLE element tag is: table.../table
  • Table CAPTION tags caption.../caption are placed just after the opening TABLE tag. Caption text/data is centered left to right.
  • Table Row tags tr.../tr are placed inside a TABLE container.
  • Table Data cell tags td ... /td are placed inside Table Row containers.
  • Table Header cell tags th.../th are also placed inside Table Row containers. Text in header cells is displayed in bold type.
 

Previous Lesson Next Lesson
 

[Cafe LaTe Home] [Chat Lounge] [Community Center] [Newspaper] [HTML Tutor]


Last revision: 2002/03/04, Copyright © The Three Cities Workshop