HTML Tables

HTML Tables

The absence of tables is one of the major weakness of previous HTMLs. Tables are defined using the TABLE element. And the table tows are displayed by TR, which also contains table headers TH and table data TD.

We can also define a table caption using the element CAPTION. The caption can contain all the information or forms and hypertext anchors. The caption also contains the forms of formatting characters.

EXAMPLE

<tr> <th> heading 1 </th> <th> heading 2 </th> <th> heading 3 </th> </tr>

heading

A table in an HTML document can have borders and dividing lines. The borders are not necessary. To include the borders we use the start tag <TABLE BORDER> which tells that the table with borders and dividers is going to be used.

Table Rows and Columns

A table is defined as a collection of rows and columns. A table that is defined as the collection of rows is defined by TR element. Each row in a table is a combination of cells that are defined by TH or TD elements. The TH element is used for the Table heading. The TH element is also used for columns and rows headings, while the TD element is used for other tables that may include the tabular entry. The end tags for these elements are not necessary. These are non empty elements.

EXAMPLE

<tr> <th> heading 1 </th> <th> heading 2 </th> <th> heading 3 </th> </tr>

table-rows-and-columns

The TD and TH element may contain attributes for the alignment of the element content. For example they can contain ALIGN attribute.

Justification of Table Rows and Columns

When we design a table, we have to ensure that the number of rows and Columns correctly match our desired table. There are some HTML editors that have a built in property to create a table and you do not have to make the table by hand.

Alignment within Table Cells

By using the align attribute, we can align the rows. Align will take the values “left”, “centre”, or “right”. These will align the contents of the cell horizontally.

There is another attribute that is used to align the contents on the cell vertically this element is VALIGN, this attribute takes the value “top”, “middle” or “bottom”.

alignment-within-table-cells

Resulting in:

resulting

Length Measuring Units

The table element also has the measuring units. These units are indicated using suffixes. These are as follows:

Suffix Units
cm centimeters
em height of font
in inches
mm millimeters
pi picas
pt points
px

pixels