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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<html> <head> <title>Table Example 1</title> </head> <body> <table border=2 align=center> <caption>Students Records</caption> <tr align =left> <th> Roll_no</th> <th> Name</th> <th> Total marks</th> <th> Grade</th> </tr> <tr> <td>1</td> <td>khan</td> <td>500</td> <td>B</td> </tr> <tr> <td>2</td> <td>Nazia</td> <td>850</td> <td>A+</td> </tr> </table> </body> </html> |
Example write html code to display product list and product total amount:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <title>Table Example 2</title> </head> <body> <table border=2 align=center> <caption>Product List</caption> <tr align =center> <th> Item</th> <th> Quantity</th> <th>Price</th> <th> Extended</th> </tr> <tr> <td>Hard Disk</td> <td align= center>1</td> <td>500$</td> <td>400$</td> </tr> <tr> <td>Cd Drive</td> <td align= center>1</td> <td>200$</td> <td>500$</td> </tr> <tr> <tr> <td>Cds</td> <td align= center>10</td> <td>20$</td> <td>50$</td> </tr> <tr> <td colspan =3 align =right> <b>Total Amount</b></td> <td> <b> 950 $</b></td> </table> </body> </html> |
Example writes html code for displaying weather station temperature, humidity information in table:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <title>Table Example 3</title> </head> <body> <table border=2 align=center> <caption><b>Weather Station</b></caption> <tr align =center> <th rowspan = 2> Station</th> <th colspan= 2> Temperature</th> <th rowspan= 2>Humidity</th> <th rowspan = 2> Weather</th> </tr> <tr align =center> <th>Max</th><th> Min</th> </tr> <tr align = left> <td>USA</td> <td align= center>24</td> <td align= center>19</td> <td align=center>60%</td> <td>cloudy</td> </tr> <tr align = left> <td>Germany </td> <td align= center>5</td> <td align= center>-1</td> <td align=center>70%</td> <td>Rainy</td> </tr> </table> </body> </html> |
Example write html code to display images inside the cells of the table:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <title>Table Example 4</title> </head> <body> <table border=2 align=center> <caption><b>landscape Images</b></caption> <tr align =center> <td> landscape 1</td> <td> landscape 2</td> </tr> <tr> <td> <img src ="test.jpg" width=200></img></td> <td> <img src ="test2.jpg" width=200></img></td> </tr> <tr align =center> <td> landscape 3</td> <td> landscape 3</td> </tr> <tr> <td> <img src ="test3.jpg" width=200></img></td> <td> <img src ="test4.jpg" width=200></img></td> </tr> </table> </body> </html> |
Related Article:
Html Frame Tag: How To Use Frame In Html Coding With Example
