Page 168 - Web Applications (803) Class 11
P. 168
2.9 TABLES IN HTML
Tables represent the data in the form of rows and columns. In HTML, a table is created by using the <TABLE> tag. The
<TABLE> tag should be defined inside the <BODY> tag. It is a container tag. Different kinds of tables can be created by
using the following child tags of the <TABLE> tag:
Ð Ð<TR>: This tag is used for defining table rows
Ð Ð<TD>: This tag is used for defining table data, that is, the data of the cells.
Ð Ð<CAPTION>: This tag is used for defining the title of the table
Ð Ð<TH>: This tag is used for defining table headings.
Following is an example of a table:
Roll No. Name Grade Gender
1 Aarav B M
2 Gauransh A M
3 Himakshi A F
4 Rakshit B M
Where, Table: Student is the title of the table which can be inserted by using the <CAPTION> tag. Roll No., Name, Grade
and Gender are the table headings that can be created by using the <TH> tag.
Attributes of the <Table> Tag
The following attributes are used to present a table efficiently:
BORDER: The Border attribute is used to set the border of the table. The default value of the BORDER attribute is 0. You
can set the border of the table by providing a numeric value to the BORDER attribute in the following way:
<TABLE BORDER="2">
Ð ÐBORDERCOLOR: The Bordercolor attribute is used to give color to the border of the table. The value of this attribute
can be the name of any permitted color or any value of the color using RGB color code in hexadecimal notation (like
#DDDDFF value is given for light blue color). You can use the Bordercolor attribute to set the border color in the
following way:
<TABLE BORDER = "2" BORDERCOLOR="Blue">
or
<TABLE BORDER = "2" BORDERCOLOR="#DDDDFF">
Ð ÐFRAMES: The Frames attribute allows you to show borders only at specified sides. For example, <table frame
"value">
if the value of the Frames attribute is:
“box” or “border”—the border is displayed on all four sides.
“above”—the border is displayed on the top side only.
“below”—the border is displayed at the bottom side only.
“hsides”—the border is displayed at both top and bottom sides.
“lhs”—the border is displayed on the left-hand side only.
“rhs”—the border is displayed on the right-hand side only.
“vsides”—the border is displayed on both left and right sides.
“void”—no border is displayed.
166 Touchpad Web Applications-XI

