This week I will learn to add tables to my page. Tables allow me to creatively organize, position, and arrange data on my web page. I will learn and practice basic tables.
The following is my first table:
| Gardenias | Lilacs |
| Roses | Jasmine |
| Mums | Carnations |
Now I will add a border to my table.
| Gardenias | Lilacs |
| Roses | Jasmine |
| Mums | Carnations |
Now I will center my table. There are two ways to do it. I will also utilize the summary attribute which will provide a verbal description of the table for those who use non-visual browsers (similar to the alt= attribute). You will also observe that I have named the table using the caption attribute.
| Gardenias | Lilacs |
| Roses | Jasmine |
| Mums | Carnations |
| Name | Type | Sex | Longevity | Special Comments |
|---|---|---|---|---|
| Jezebel | Cat | F | 12 years | Loved her dearly |
| Lady | Dog | F | 11 years | 140 lb. Sweetheart |
| Joshua | Dog | M | 10 years | Adored Josh |
| Taffy | Dog | F | 6 years | Penny's daughter |
| Penny | Dog | F | 10 years | Went everywhere with me |
| Cuddles | Hamster | M | 2 years | No more hamsters |
| Daisy | Goldfish | F | 1 year | A gift. A nuisance. |
| Donald | Goldfish | M | 1 year | Daisy's boyfriend |
| Snowball | Parakeet | M | 5 years | Not much of a talker |
| Cricket | Dog | F | 5 years | She learned tricks |
| Kookie | Dog | F | 1 year | My 1st dog. Lost her too soon |
| Chippy | Parakeet | M | 5 years | 40 word Vocabulary |
| Dusty | Parakeet | F | 1 year | My first pet |
The attribute colspan creates a heading that covers more than one column by merging cells in either the
| Bright Birds | ||
|---|---|---|
| Cardinals | Scarlet Tanagers | |
| Blue Jays | Blue Birds | |
| Hummingbirds | Baltimore Orioles | |
| Bright Birds | |
| Cardinals | Scarlet Tanagers |
| Blue Jays | Blue Birds |
| Hummingbirds | Baltimore Orioles |
Data in tables may appeared "cramped" as if needing more space. I can add space to my table by utilizing the cellspacing and cellpadding attributes in the opening table tag. You should use them even if the values are "0".
Same table with cellspacing. Internal borders are thicker and there is more space between cells.
| Bright Birds | |
| Cardinals | Scarlet Tanagers |
| Blue Jays | Blue Birds |
| Hummingbirds | Baltimore Orioles |
Cellpadding makes the space larger between the cell walls and data. Same table with cellpadding added.
| Bright Birds | |
| Cardinals | Scarlet Tanagers |
| Blue Jays | Blue Birds |
| Hummingbirds | Baltimore Orioles |
The following table utilizes all the attributes described above.
| In the USA | ||
| Cardinals | Scarlet Tanagers | |
| Blue Jays | Blue Birds | |
| Hummingbirds | Baltimore Orioles | |
Width, used in the opening tag, creates an interesting and useful appearance. I can create one column and gain control of the width of a table.In the following example, the column width is 220 pixels.
A person can easily manipulate text in a percentage based table. A table defined by percentage-based width will occupy that percentage of the browser screen despite the viewer's screen size. Images and text will rearrange themselves. A table width of width="100%" will occupy 100% of the screen. Width set in pixels will only have that many pixels despite what resolution the viewer has on his screen. Example: A width of 300 pixels will only occupy half the screen when the resolution is set for 600 pixels.
Both have their uses. Try to incorporate both. If I do not set a width, the table will break naturally to accommodate the various resolutions used by the viewers.
Remember: Oftentimes it is easier to work with a table when it has a border or a frame around it. Use <table border="1">. Also, remember to set cellspacing and cellpadding values. Change the border value back to "0" when satisfied with the table.
Use the non-breaking space character to keep an even number of cells in table rows: <td> </td>.
| Email J-Anna |