1. 1 Chapter 04: Working with Table By Tharith Sriv

2. What is a Table? N Name (kh) Name (En)Tel:EmailOther 1Sok012238482ad@ra.org.kh 2Sao097238483sao@dka.com 3Dina023238480dina@hotmail.com 4Dara015238481dara@yahoo.com 5Theary016238484theary@gmail.com 6Rachana013238443rachana@ymail.com 7On011238423on02@hotmail.com 8Huy012233233huy@jgsee.kmutt.ac.th 9Seang012238422seang@everyday.com.kh 10Reth012238432reth@hotmail.com Table 1: Name of Cambodian Students (sample)

3. 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.

4. 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):

5. What is a Table (cont.)?

6. 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.

7. 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.

8. 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.

9. 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:

10. 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:

11. 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:

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

13. … & … 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:

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

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

16. Table Attributes Firefox will display the following:

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