A table is a two dimensional matrix, consisting of rows and columns. Tables are intended for displaying data in columns on a web page. All pages related tags are included between the <TABLE>…</TABLE> tags. Each row of a table is described between the <TR>…</TR> tags. Each column of a table is described between the <TD>…</TD> tags.
Table rows can be of two types:
• Header Rows: A row that spans across columns of a table is called the Header Row. A table header row is defined using <TH>…</TH> tags. Content of a table header row is automatically centered and appears in boldface.
• Data Rows: Individual data cells placed in the horizontal plane creates a data row. There could be a single data cell (i.e. a single column table) or multiple data cells (i.e. a multi column table)
The attributes that can be included in the <TABLE> tag are:
ALIGN Horizontal alignment is controlled by the ALIGN attribute. It can be set to left, right, center, justify or inherit. This attribute should be used in CSS.
VALIGN Controls the vertical alignment of cell contents. It accepts the values TOP, MIDDLE or BOTTOM.
BORDER Controls the border to be placed around the table. The border thickness is specified in pixels.
WIDTH Sets the WIDTH to a specific number of pixels or to a percentage of the available screen width. If width is not specified, the data cell is adjusted based on the cell data value.
CELLPADDING This attribute controls the distance between the data in a cell and the boundaries of the cell.
CELLSPACING Controls the spacing between adjacent cells.
COLSPAN The COLSPAN attribute inside a <TH> or <TD> tag instructs the browser to make the cell defined by the tag to take up more than one column. The COLSPAN attribute can be set equal to the number of columns the cell is to occupy. This attribute is useful when one row of the table needs to be a certain number of columns wide.
ROWSPAN The ROWSPAN attribute works in the same way as the COLSPAN attribute except that it allows a cell to take up more than one row. The attribute can be set by giving a numeric value. For example ROWSPAN = “3”.
The Caption Tag
Often tables need to be given a heading, which gives the reader a context for the information in the tables. Table Headings are called Captions. Captions can be provided to a table by using the <CAPTION>…<CAPTION> tags. This paired tag appears within the <TABLE>…</TABLE> tags. The table caption can be made to appear above or below the table structure with the help of the attribute ALIGN.
css/style caption-side It controls placing of the caption with respect to the table.
Caption-side: bottom will place the caption immediately below the table.
Caption-side: top will place the caption immediately above the table.
Caption-side: right will place the caption immediately right side of the table.
Caption-side: left will place the caption immediately left side of the table.
1 blog comments below
Nice post ! Brief explanation on the table and its attribute !
ankur209 on Sun Jul 03, 2011 1:35 pm