1 Chapter 04: Working with Table By Tharith Sriv

What is a Table? N Name (kh) Name (En)Tel: Other Table 1: Name of Cambodian Students (sample)

What is a Table (cont.)? Table is used to specify a container for a table within your document. Inside these tags you can place,,,, and other tags. Table can be used in HTML for text alignment. Sample : Pine trees naturally grow at higher elevations.

What is a Table (cont.)? With the followings, Internet Explorer will display what is in next slide (if you have a picture “pine.jpg” located in the same folder with your HTML-file):

What is a Table (cont.)?

Table Attributes ALIGN={LEFT, CENTER, RIGHT} Positions the table flush left, flush right, or in the center of the window. BACKGROUND=“URL” Specifies the relative or absolute location of a graphic image file loaded as a background image for the entire table.

Table Attributes BGCOLOR=“#RRGGBB” or “...” Specifies the background color within all table cells in the table. You can substitute color names for the hexadecimal RGB values. BORDER=“n” Specifies the thickness (in pixels) of borders around each table cell. Use a value of 0 to produce a table with no visible borders.

Table Attributes BORDERCOLOR=“#RRGGBB” or “...” Specifies the color of the borders of all the table cells in the table. You can substitute color names for the hexadecimal RGB values. BORDERCOLORDARK=“#RRGGBB” or “...” Specifies the darker color used to draw 3-D borders around the table cells. You can substitute color names for the hexadecimal RGB values.

Table Attributes BORDERCOLORLIGHT=“#RRGGBB” or “...” Specifies the lighter color used to draw 3-D borders around the table cells. You can substitute color names for the hexadecimal RGB values. CELLPADDING=“n” Specifies the space (in pixels) between the edges of table cells and their contents. Sample:

Table Attributes CELLSPACING=“n” Specifies the space (in pixels) between the borders of table cells and the borders of adjacent cells. Sample: COLS=“n” Specifies the number of columns in the table. Sample:

Table Attributes WIDTH=“n” Specifies the width of the table. You can set this value to an absolute number of pixels or to a percentage amount so that the table is proportionally as wide as the available space. Sample: HEIGHT = “n” Specifies the height of the table. Sample:

The Tag Inside the Table Tag Defines the table body within a table. This tag must follow the tag. Sample:

… & … Tags … Table Row … Table Cell /Table Data (goes inside ) There is also what’s called … which is used to make the text in bold and center aligned. When you write:

… & … Tags With what are in previous slide, Netscape displays:

Attributes: COLSPAN and ROWSPAN You can enjoy with COLSPAN and ROWSPAN. The followings are for you to test:

Table Attributes Firefox will display the following:

Assignment! Write a webpage to display the following in your web browser: