Table: In HTML, it is possible to represent data in the form of table. To represent data in the form of table mainly we use 3 elements. They are:
- Table Header
- Table Row
- Table Data
Table Header Element: The table header element is used for insert title for a table header element is indicated with <TH> tag. (simply table header refers the heading of a column). By default, the text given within the <TH>…</TH> appear in bold, and are center-aligned within their cells.
<TABLE>
<TR>
<TH>S.NO.</TH>
<TH>Name</TH>
</TR>
</TABLE>
Table Row Element: The table row element is used to insert roes in a table. It is also a container element. It is indicated with <TR>-------</TR> tag. It is also a container element.
Table Data Element: The table row element is used to insert the values or content in the cells of a table. It is also a container element and it is indicated with <TD>…</TD> tag.
Note: The table data element must be declare with in table row element.
Consider the following problem:
<HTML>
<TITLE>Table</TITLE>
<BODY>
<Table>
<TR>
<TH>Name</TH>
<TH>Read.No.</TH>
</TR>
<TR>
<TD>Kalyan</TD>
<TD>529</TD>
</TR>
</Table>
</Body>
</HTML>
Attributes for Table Element:
Align Attribute: The align attribute is used to aligning table to left, right or center to a webpage.
<Table align=center>…</Table>
Height and Width Attributes: You can change the size of a table by using ‘height’ and ‘width’ attributes
<Table align center=Height=170.width=150>…</table
BGCOLOR Attribute: The BGCOLOR attribute is used to change the background color of the table.
<Table BGCOLOR=YELLOW>------------</Table>
Border Attribute: The Border attribute is used for inserting borders around the table cells. The value for the border attribute is given in pixels.
<Table BGCOLOR=YELLOW BORDER=4> ----------</Table>
Border Color Attribute: The Border color attribute is used for setting the border color.
<Table BGCOLOR=YELLOW Border=4 Bordercolor=Red>…</Table>
Note: Keep it mind i.e., if you want to set a color for border, you must specify the Border attribute.
Similarly, Bordercolorlight and Bordercolordark are also used to set the color for table border.
<Table Border=4 Bordercolordark=Yellow>…</Table>
and
<Table Border=4 Bordercolorlight=Red>…</Table>
Background Attribute: The Background attribute is used for inserting an image as background of the table.
<Table Background=”Image.jpg”>…</Table>
Cellspacing Attribute: The Cellspacing attribute of the table element is used to set the space between the cells in a table.
<Table Border=4 Cellspacing=10>…</Table>
Cellpadding Attribute: The Cellpadding attribute of the table element is used to adjust the spacing between cell wall (border) and cell data.
<Table Border=4 Cellpadding=10>…</Table>
Table Row Element:
This element is given within the Table Element. It is a container element and is indicated with starting tag <TR> and ending tag </TR>
It also supports all the attributes supported by Table Element. i.e., Align, BGCOLOR, Bordercolor, Bordercolorlight, Bordercolordark, …
Table Header Element: The Table Header Element is used to set the title or heading to each column of the table. It is indicated with starting tag <TH> and ending tag </TH>
It is also supports all the attributes supported by the Table and Table Row element. The additional attributes are:
COLSPAN: The COLSPAN attribute is used for specifying the number of columns the cell can span.
<TH COLSPAN=2>
ROWSPAN: This element is used for specifying the number of rows the Row can span.
<TH ROWSPAN=2>
Table Data Element: Table data element supports all the attributes supported by Table Header Element.
Caption Element: Caption tag is used to specify the title of the table. It can be placed at the bottom or above of the table. align and valign are the attributes of the caption element.
<caption>...</caption>
08:24
Share:
0 comments: