Tables

Information presented in tabular format (series of rows and columns) is an integral part of many documents. HTML offers extensive markup options for tables. These options allow us a great deal of flexibility in formatting tabular data for html documents. Following are the most common building blocks of tables.

• <table> - Opening and closing table tags enclose the entire table
• <th> - These tags are used for each cell in an optional header row.
• <tr> - Stands for Table Row and denotes the same in a table.
• <td> - Each of these contain data that go into a single cell of the table.

Let us code a basic HTML table and see how it looks on the browser:

The HTML Markup

<TABLE Border=1>
<TR>
        <TH>Column 1 Header</Th>
        <TH>Column 2 Header</TH>
        <TH>Column 3 Header</TH>
</TR>
<TR>
        <TD>Row 1 Column 1</TD>
        <TD>Row 1 Column 2</TD>
        <TD>Row 1 Column 3</TD>
</TR>
<TR>
        <TD>Row 2 Column 1</TD>
        <TD>Row 2 Column 2</TD>
        <TD>Row 2 Column 3</TD>
</TR>
</TABLE>

The Output

Column 1 Header	Column 2 Header	Column 3 Header
Row 1 Column 1	Row 1 Column 2	Row 1 Column 3
Row 2 Column 1	Row 2 Column 2	Row 2 Column 3

Now, let us look at some important attributes of the table related tags.

Border - This is a table tag attribute. A zero value for this attribute indicates that the table should not have a border. Any other value indicates border thickness in pixels.

Frame - This attribute should be used with the border attribute. It takes values like above, below, lhs (left hand side), rhs (right hand side), hsides (horizontal sides), vsides, box, and border. These values denote the borders that are to be displayed.

Align - This attribute may be used for the tr, td, and th tags. Indicates the horizontal alignment of the content within the element.

Valign - Used for the th, tr, and td tags. Indicates the vertical alignment of content within the element

Cellpadding - Used for the table tag. This attribute indicates the space in pixels between each cell and its contents.

Cellspacing - Used for the table tag. This attribute indicates the space in pixels between the cells in a table.

Colspan - Used for th and td tags. These tags have colspan=1 by default. The cell extends over the number of columns specified in the value of the colspan attribute.

Rowspan - Used for td tags. These tags have rowspan=1 by default. The cell should extend over the number of rows specified in the value of the rowspan attribute.

Width - Used for the table tag. This attribute takes a percentage value that specifies the width of the table proportional to the width of the page.