22C5 - Problem Solving and Computing
Mon Jan 29

Tables

• HTML provides tags to make tables
• Tag placement will determine
  • number of rows
  • number of columns
  • content of cells
  • placement of content
  • the appearance of the table

<TABLE ...></TABLE>

This is the main wrapper for all the other table tags. Other table tags will be ignored if they aren't inside of a TABLE tag.

<TR ...></TR>

This stands for table row. The number of rows in a table is specified by how many TR tags are contained within it. TR can have both the ALIGN and VALIGN attributes, which if specified become the default alignments for all cells in this row.

<TD ...></TD>

This stands for table data, and specifies a standard table data cell. Table data cells must only appear within table rows. Each row need not have the same number of cells specified since short rows will be padded with blank cells on the right. A cell can contain any of the HTML tags normally present in the body of an HTML document. The default alignment of table data is ALIGN=left and VALIGN=middle. These alignments are overridden by any alignments specified in the containing TR tag, and those alignments in turn are overridden by any ALIGN or VALIGN attributes explicitly specified on this cell. By default lines inside of table cells can be broken up to fit within the overall cell width. Specifying the NOWRAP attribute for a TD prevents line breaking for that cell.

<TH ...></TH>

This stands for table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold FONT, and have a default ALIGN=center.

<CAPTION ...></CAPTION>

This represents the caption for a table. CAPTION tags should appear inside the TABLE but not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top but can be explicitly set to ALIGN=bottom. Like table cells, any "body" HTML tag can appear in a caption. Captions are always horizontally centered with respect to the table, and they may have their lines broken to fit within the width of the table.

BORDER

This attribute appears in the TABLE tag. If present, borders are drawn around all table cells. If absent, there are no borders, but by default space is left for borders, so the same table with and without the BORDER attribute will have the same width.

ALIGN

If appearing inside a CAPTION it controls whether the caption appears above or below the table, and can have the values top or bottom, defaulting to top.

If appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the left side of the cell, the right side of the cell, or centered within the cell. Values are left, center, and right.

VALIGN

Appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the top of the cell, the bottom of the cell, or vertically centered within the cell. Values are top, middle, and bottom.

NOWRAP

If this attribute appears in any table cell (TH or TD) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.

COLSPAN

This attribute can appear in any table cell (TH or TD) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

ROWSPAN

This attribute can appear in any table cell (TH or TD) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a TR will be truncated.

BORDER=<value>

The BORDER attribute can also take a value. This allows you to emphasize some tables with respect to others. Also, by explicitly setting border to zero you can regain that space originally reserved for borders between cells, allowing particularly compact tables.

CELLSPACING=<value>

Cell spacing is the amount of space inserted between individual cells in a table.

CELLPADDING=<value>

Cell padding is the amount of space between the border of the cell and the contents of the cell. Setting a cell padding of zero on a table with borders might look bad because the edges of the text could touch the cell borders.

WIDTH=<value_or_percent>

When this attribute appears on the TABLE tag it is used to describe the desired width of this table, either as an absolute width in pixels, or a percentage of document width. Ordinarily complex heuristics are applied to tables and their cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics and instead effort is put into fitting the table into the desired width as specified. In some cases it might be impossible to fit all the table cells at the specified width, in which the browser will try and get as close as possible.

When this attribute appears on either the TH or TD tag it is used to describe the desired width of the cell, either as an absolute width in pixels, or a percentage of table width. Ordinarily complex heuristics are applied to table cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics for that cell and instead effort is put into fitting the cell into the desired width as specified. In some cases it might be impossible to fit all the table cells at the specified widths, in which case the browser will try and get as close as possible.