Tables are created using the table tag. Rows and columns are added into a table using <TR> and <TD> tags, respectively. Table cells can be joined using ROWSPAN and COLSPAN attributes.
Widths and heights of the whole table, as well as of rows and columns, are set using the optional WIDTH and HEIGHT attributes within <TABLE>, <TR>, or <TD> tags. They can be specified in absolute number of pixels, or by relative percent If setting table width, the percent value corresponds to the percent of the entire page width; if setting the column width, then the percent value is with respect to the table width. If no width or height are defined, then the table is auto-fitted to the content.
Other table attributes include CELLPADDING=#, CELLSPACING=#, and BORDER=#. CELLPADDING specifies the number of pixels of blank space between cell border and cell contents. CELLSPACING is the number of pixels between each cell. BORDER defines the width of the frame drawn around the table.
Here are a few examples (variations in code are shown in red):
| HTML code | Table generated | ||||||
| <TABLE WIDTH="200" BORDER="1" CELLSPACING="2"
CELLPADDING="2"> <TR> <TD WIDTH="50%">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD >Cell 3</TD> <TD>Cell 4</TD> </TR> <TR> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR> </TABLE> |
| ||||||
| <TABLE WIDTH="200" BORDER="1" CELLSPACING="5"
CELLPADDING="0"> <TR> <TD WIDTH="120">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD COLSPAN=2>Cells 3 and 4</TD> </TR> <TR> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR> </TABLE> |
| ||||||
| <TABLE WIDTH="200" BORDER="5" CELLSPACING="2"
CELLPADDING="0"> <TR HEIGHT=50> <TD WIDTH="50%">Cell 1</TD> <TD >Cell 2</TD> </TR> <TR> <TD>Cell 3</TD> <TD ROWSPAN=2>Cells 4 and 6</TD> </TR> <TR> <TD>Cell 5</TD> </TR> </TABLE> |
| ||||||
Exercise 6
|