HTML & CSS

Html Table Code And Their Commonly Used Attributes

html table code and their commonly used attributes

HTML TABLES

html table is a two-dimensional matrix consisting of rows and columns. It is used to organize information in rows and columns. The rows and columns create displayed into cells. tables are also useful for arranging images and text on a page.

<TABLE> Tag

The <Table> tag is used to mark the beginning of a table (or to create the table structure). All HTML table related tags are included between the <Table> and </Table> tags.



Attributes Html Table:

The most important and commonly used attributes of <Table> tag are as follows:-

Align

It is used to specify the horizontal alignment of the html table. It’s possible values are:

  • Left: it is used for left alignment
  • Right: it is used for right alignment.
  • Center: it is used for center alignment.

Valign

It is used to specify the vertical alignment of cell elements. Its possible values are:

  • Top: it is used for top alignment of the cell contents.
  • Bottom: it is used for bottom alignment of the cell contents.
  • Middle: it is used for displaying the contents at the middle of the cell.

BGColor

It is used to specify the background color within all table cells in the table. You can use color name or hexadecimal value for color.

Background

It is used to specify the graphic image as the background of the table.

Border

It is used to specify the thickness of the border around each html table cell. It is specified in pixels. If value 0 is

Specified then no border will be shown.

BorderColor

It is used to specify the color of the borders of the cells of the html table. You can use color name or hexadecimal value.

BorderColorDark

It is used to specify the dark color around the table cells.

BorderColorLight

It is used to specify the lighter color around the html table cells.

Width

It is used to specify the width of the html table. It can be given as a number of pixels or as a percentage of the

available screen width. If the width is not specified, the data cell is adjusted based on the cell data value.

CellPadding

It is used to specify the space (in number of pixels) between the edges of table cells and their contents (data displayed in cells.)

Cellspacing

It is used to specify the space (in number of pixels) between adjacent cells of the html table.


<CAPTION> Tag of Html Table

A html table is given a heading for describing the purpose of information stored in the html table. Html table heading is called caption. The <Caption> tag is used after the <Table> tag for giving the heading of a table. The general syntax for specifying the table caption is as follows: –

<TABLE>

<CAPTION> Table Heading </CAPTION>

</TABLE>

Attributes of the caption tag:

The <Caption> tag has many attributes but “Align’ is the most commonly used attribute. It is used to specify the alignment/location of the caption of a html table. The possible values for this attribute and their description are as follows: –

Top: it is used to place the caption immediately above the html table.

  • Bottom: it is used to place the caption below the table.
  • Left: it is used to place the caption left side of the table.
  • Right: it is used to place the caption right side of the table.

<TR> Tag:

TR stands for table Row. The <TR> tag is used to create a row of a html table. Most of the attributes of this tag are same as for <Table> tag. However, the attributes that are most commonly used for individual rows are as follows: –

The attribute of the <tr>:

Align

It is used for horizontal alignment of contents of the row cells. The possible values for this attribute are; ‘left’, ‘right and ‘center’.

Valign

It is used to specify the vertical alignment of row cells. Its possible values are: ‘top’, ‘bottom’, and ‘middle’.

BGColor

It is used to specify the background color of a row cells.


<TH> Tag of the html table:

TH stands for Table Heading. The <TH> tag is used to create the table cell for heading. A html table heading cell can be used at the top of each column of the table. The text for heading cell appears in bold face. You can apply other formatting such as italic and underline etc. using text formatting tags.

The <TH> tag contains many attributes. Most of the attributes are same as for <Table> tag. The most important and common attributes that can be applied on individual html table cell heading are as follows:

Attribute <th>:

Align

It is used for horizontal alignment of content of the heading cell. The possible values for this attribute are; left’, ‘right’ and ‘center’.

BGColor

It is used to specify the background color of the heading cell Background It is used to specify the graphic image as the background of the heading cell.

Valign

It is used to specify the vertical alignment of the heading cell Its possible values are: ‘top’, ‘bottom’, and ‘middle’.

ColSpan

It is used to divide a cell (heading cell) into more than one column.

RowSpan

It is used to divide a cell (heading cell) into more than one row.

<TD> Tag:

TD stands for Table Data. The <TD> tag is used to create data cell of the row. Please note that both <TD> and <TH> tags are applied between the <TR> and </TR> tags. The difference between <TH> and <TD> tags is as follows: –

  • <TH> tag is used to create cell of row for table cell heading, while <TD> tag is used to create cell of row for storing actual data.
  • Contents of heading cells appear as boldface, while contents of data cells appear as a normal form.

Note: The attributes of <TD> tag are the same as for <TH> tag.



Example write html code to display records of two student into a table:

html table how to store student data in table


Example write html code to display product list and product total amount:

html table how to make and store product price list in table


Example writes html code for displaying weather station temperature, humidity information in table:

html table how to store weather station data in table



Example write html code to display images inside the cells of the table:

html table how to store image in table


Related Article:

Html Frame Tag: How To Use Frame In Html Coding With Example

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button