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

Section 5: HTML Tables
   Lesson 5-2: Editing HTML Tables



   Welcome back, In this lesson let's look at the table you created in the last lesson, and see what we can do to improve it. The table below is the table you created in Lesson 5-1.

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

   Looking at this table, you must admit that it doesn't look very nice. All of the columns have different widths. Numbers are all aligned left, but numbers in a table usually look better when they are aligned right. The years in the left column are actually row headers, but look the same as the rest of the table data. The border lines are a bit too heavy. Also, the title (caption) of the table does not stand out as it should. Let's see what we can do improve the appearance of this table.

Practice:

   OK, open your source file in your text editor and lets make a few changes. Save and view your table after each change in order to see how each setting affects the appearance of the table. First of all, let's make the caption bold. Add a pair of B tags to the caption.

   Next, let's use the ALIGN attribute to make the numbers align to the right edges of the cells. If no ALIGN attribute is set, header cell TH data is centered, but text or numbers in TD cells will be aligned left. We want to keep the header data centered, but want the numbers below aligned right. We could add the align attribute to the TD tag of every cell, but it is easier and faster to apply it to the row tags. Add an align="right" attribute to each row tag except for the header row.

   The columns would look better if they were all the same width. Let's use the WIDTH attribute to standardize column width. Column width can be set either in pixels, or as a percentage of the width of the screen. You can experiment with percentages at another time. For now, let's set each column to the same width in pixels. Again, we could set the width of each cell, but all we really need to do is set the width of each cell in the header row or first row of the table. Add a width="70" attribute to each cell in the header row.

   Next, let's adjust the thicknesses of the table lines. First, let's make the outer border of the table thicker. Change the value of the border attribute of the TABLE tag from "1" to "3". Then, let's make the lines inside the table a bit thinner by changing the value of the cellspacing attribute of the TABLE tag from "2" to "1".

   The space around the text in each cell can be changed by increasing or decreasing the cellpadding value. Cellpadding is the space, in pixels, between the text in each cell and the cell lines. Change the cellpadding value of the table tag from "2" to "4".

   Let's also change the background colors to make the table easier to read. First, set the background color of the entire table to light gray. Add the bgcolor="#f5f5f5" attribute to the table tag. Then, change the color of the header row to teal blue. Add bgcolor="#99cccc" to the first table row tr tag. To finish up, color the cells in the first column a light blue by adding bgcolor="#ccffff" to each of the table data td tags in the first column.

   Finally, let's center the entire table on the page with a DIV align="center" tag. .


div align="center"
table cellspacing="2""1" cellpadding="2""4" border="1""3" bgcolor="#f5f5f5"
captionbInternational Tourist Arrivals in Okinawa/b/caption
tr bgcolor="#99cccc"
th width="70"Country:/th
th width="70"Taiwan/th
th width="70"South Korea/th
th width="70"Philippines/th
th width="70"U.S.A./th
th width="70"Other/th
th width="70"Total/th
/tr
tr align="right"
td bgcolor="#ccffff"1995/td
td100,327/td
td3,688/td
td1,575/td
td9,006/td
td4,099/td
td118,695/td
/tr
tr align="right"
td bgcolor="#ccffff"1996/td
td110,227/td
td4,725/td
td1,295/td
td6,126/td
td2,856/td
td125,229/td
/tr
tr align="right"
td bgcolor="#ccffff"1997/td
td142,376/td
td5,393/td
td1,512/td
td6,294/td
td4,077/td
td159,652/td
/tr
tr align="right"
td bgcolor="#ccffff"1998/td
td103,720/td
td2,450/td
td1,658/td
td8,790/td
td3,749/td
td120,367/td
/tr
/table
/div

   After making all of the above changes, your table should look like the table below:
And, your practice file should look like this.

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

   The table now looks much better than it did at the beginning of this lesson. However, there are still a few more changes to make before we are completely finished. When you are ready, go on to the final lesson on tables.


Review:

  • The thickness in pixels of the outer border of a table is set using the border="n" attribute of the TABLE tag. (BORDER can also be set to "0", resulting in no lines.)
  • The thickness of lines within a table is controlled with the cellspacing="n" attribute of the TABLE tag.
  • The space in pixels between text in a cell and the lines of the cells is set with the cellpadding="n" attribute of the TABLE tag.
  • Cell data can be aligned left, right, or center using align="left/center/right". The align attribute can be used with the TABLE, TR, TD, or TH tags.
  • The width (in pixels or percentages) of cells, columns, or the entire table is set with the width="n" attribute of TABLE, TR, TD, or TH tags. (Cell height can also be set in the same way with height="n").
  • Background colors, likewise, can be set for cells, rows, or the entire table using bgcolor="#hexcode" with the TABLE, TR, TD, or TH tags. (Background graphics can also be used with background="path/filename").
  • All of the standard text formatting tags can be used with caption text.
 

Previous Lesson Next Lesson
 

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


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