A TABLE element starts with the <table> tag and ends with </table>. It is divided into rows and each row is divided into data cells. The table rows are defined by the TR element, and the table data are given in the TD element. In the following example, feel free to change or remove style properties and click on "View" to see the results.:
Bread
$2.50
Milk
$1.40
It is important to note that the default value for "border-style" is "none". Therefore, without specifying border-style, you will not see the border even if you have set border-width to a big value.
Both TABLE and TD elements have their own borders. By default, the value for "border-collapse" is "separate". Therefore, you will see two borders if this property is not set. The value "collapse" condenses two borders into one.
Headings and Caption
The TABLE element may contain two optional elements: TH and CAPTION. The TH element is used for the headings of table columns. Its text is normally bold and centered. The CAPTION element is useful for describing the content of the table. Example:
Food on Sale
Food
Price
Bread
$1.99
Milk
$0.99
Notice that a shorthand has been used for the border property, "border: 3px solid green", which is equivalent to "border-width: 3px; border-style: solid; border-color: green". This example also use the shorthand for padding, which can have one to four values. If only one value is given, it represents the padding for all four sides. If two values are given, the first represents top and bottom paddings while the second specifies right and left paddings. Three values set (1) top, (2) right and left and (3) bottom, respectively. Four values set the paddings in this order: (1) top, (2) right, (3) bottom, and (4) left.
Centering a Block of Text
As pointed out in Chapter 9, DIV is not an ideal solution for centering a block of text because its width is required. By using TABLE, width is no longer necessary. All you need is "margin-left:auto; margin-right:auto".
It was many and many a year ago,
In a kingdom by the sea,
That a maiden there lived whom you may know
By the name of Annabel Lee;
And this maiden she lived with no other thought
Than to love and be loved by me.
