HTML: Use of Tables

“HTML tables” is one of the most important features of the HTML. You can use HTML tables to present tabular data on a web page. You can also use tables for page layout. Tables allow data to be arranged into rows and columns of data cells. You can put just about anything in a table’s cells, including images, paragraphs and even other tables. This flexibility makes tables useful for page layout and presenting tabular data. In this and some subsequent articles you will learn more about tables and how to use them properly in your HTML web pages.

Tags used to define table

You define a table using the <table></table> tags. The <tr></tr> tags divide a table into rows. The <td></td> tags further divide rows into data cells. Each row and column can also have a header cell. Header cells use the <th></th> tags. You can also separate a table into its header, footer and body using the <thead></thead>, <tfoot></tfoot> and <tbody></tbody> tags. And you can assign the table a caption using the <caption></caption> tags. The table element has several important attributes. The border, cellpadding, cellspacing, frame, rules and width attributes all enable formatting of the way in which browsers display a table. Tables also have “align” and “bgcolour” attribute, but they are deprecated.

Some of the most commonly used table attributes are as follows:

1. <table border=”n”…: the function of border attribute is to specify table border thickness in pixels.
2. <table cellpadding=”n”…: cellpadding attribute is use to specify the padding in table cell.
3. <table cellspacing=”n”: it is used to specify cellspacing between cells.
4. <table frame=”value”: it is used to specify where to place lines around table. Valid values for frame attribute are: void, above, below, hsides, lhs, rhs, vsides, box and border.
5. <table rules=”value”: it specifies where to place dividing lines in a table. Valid values for “rules” attribute are: none, groups, rows, cols and all.
6. <table width=”n”… or width=”n%”: width attribute is used to specify table width in pixels (absolute) or percentage.

Tables are composed of rows. Each row has one or more data cells. The <tr></tr> tags specify a row in a table. Table rows have an align attribute. This attribute specifies the alignment of element in a row’s data cells. Valid align values are: right, left, center, justify and char. Table rows also have a “valign” attribute that specifies an element’s vertical alignment in a row’s data cells. Valid valign values are top, middle and bottom.

<tr align=”center” valign=”top”/>

The rows are comprised of one or more data cells. The <td></td> tags specify a data cell in a row. Like a row, data cells also have an align attribute. So you can specify the align in a table row to align all the cells at once, or you can use the align attribute in each cell. The cell’s “align” attribute overrides a table row’s “align” attribute for that cell. You can also specify a “valign” attribute to override a table row’s “valign” attribute.

In subsequent articles we would be discussing more about tables.