CLASS : X
SUBJECT : COMPUTER APPLICATIONS
CHAPTER : HTML Unit: Creating
tables PERIOD : 13 & 14
PREREQUSITE
▶ Structure of HTML document
▶ Creating, editing and accessing the webpage
LEARNING OBJECTIVES
▶ Usage of table tag:
▶ Create a table using the <table> tag
▶ Attributes of table tag : border, bordercolor,
frame, rules, cellpadding, cellspacing , align,
background, bgcolor, height and width, summary
▶ tr, th, td,rowspan, colspan
▶ Table Header, Body , Footer
Usage of tables in a webpage
▶ Tables allow to display tabular data on a webpage in a clear and uniform
manner
▶ It is an orderly arrangement of data in rows and columns
▶ Data in tables can be in form of text or graphics
▶ An intersection of row and column is called as cell which stores data
Basic tags to create a table
▶ Table tag it is used to create the table on the webpage. It starts and closes the table
Syntax : <table>…</table>
▶ Row tags are used to define table rows
Syntax: <tr>….</tr>
▶ Cell tags :It is used to define data
cells or header of the table.They are the
data
containers of the table
Syntax: <td>……..</td>
<th>……..</th>
▶ Caption tag: It is used o define the title caption which provides a short description of the
tables purpose
Syntax: <caption>……..</caption>
▶ Example for creating a table:
<html>
<head> <title>Table </title> </head>
<table>
<caption>Name of the students</caption>
<tr>
<td>Joy</td>
<td>John</td>
<td>Jane</td>
</tr>
<tr>
<td>Anne</td>
<td>Anthony</td>
<td>Abel</td></tr></table>
</body> </html>
▶ Attributes of Table tag
border : To add a border to the table
<table border = 3>….</table>
bordercolor : To specify the border color of the table
<table border= <bordercolor=“blue”>….</table>
Bgcolor: To specify the background color of the table
<table bgcolor=“yellow”>….</table>
Align attribute : it allows to change the position of the table in
the webpage
values: left ,right, center
<table align= center>
summary attribute : It is used to give extra information about the
table.
<table summary="text">
Attributes of Table tag
frame : It specifies the part of the tables borders will be
visible Values of frame attribute :
void :outside borders are not shown
above:top edge of the border is shown
hsides: top and bottom edges are shown
vsides: left and right edges are shown
lhs : left edge of the border is shown
rhs: right edge of the border is shown
box: all edges are shown on all four sides
border: all edges are shown on all four sides (default)
<table frame=“box”>
Attributes of Table tag
rules : It defines which lines or rules to draw between rows
and columns in a table.
(rules attribute is used to display a specific inside portion of the table
border)
(frames attribute is used to display a specific outside portion
of the table border)
Values for rules attribute :
None :No rules are drawn or hides all interior border
Groups: rules are drawn between row groups and column groups
Rows: rules are drawn between rows only
Cols : rules are drawn between columns only
All : rules are drawn between all rows and all columns
<table rules=“box”>
<TR> and <TH>tags
▶ <TR> stands for Table Row
It is used to create a row of data in a table
It is used within the <table > tag
It is a container tag
▶ <TH> stands for Table Header
It is used to specify a table’s header
It displays the content of a table in heading style and content appears
in bold
It is a container tag
▶ Table Header, Body and Footer: It divides table into 3 sections
Header and footer will remain common for all pages
Body is the main content of the table
The three elements are <THEAD> <TBODY><TFOOT>
HTML Code to create a table using thead,
tbody and tfoot
<HTML>
<Head><title>table</title></head><body>
<table border=“2”>
<thead bgcolor=“green”>
<tr>
<td>Stud_name</td>
<td>roll_no</td>
<td>Percentage</td></tr></thead>
<tbody bgcolor=“blue”>
<tr><td>Amita</td><td>18</td><td>81</td></tr>
<tr><td>Anupriya</td><td>20</td><td>89</td></tr><
/tbody>
<tfoot bgcolor=“brown”>
<tr><td>Sanjay</td><td>21</td><td>79</td></tr>
</tfoot></table></body></html>
<TD>tag and its attributes
▶ The <td> tag (table data) is used to specify a cell or table data in
a table
▶ It is a container tag
▶ It is contained within <TR> tag
▶ Attributes of <TD> tag :
align attribute : To align table data(left,right,center)
<td align=“right”>
width :To define the width of the cells in table
<td width=50>
height : To specify the height of the cell in table
<td height=50>
bgcolor : It specifies a background color for the entire table
<td bgcolor=“red”>
▶ Attributes of <TD> tag :
rowspan & colspan : Helps to combine row cells and column
cells
<td colspan="2">….</td>
<td rowspan="2">….</td>
valign : Determines the placement of the content in the
cell (Top,Middle,Bottom)
<td valign="Top"< ">….</td>
Assignment
Write an HTML code to generate the given table in web page exactly as given.
Write the HTML code to generate the following output.
NEXT CLASS
Creating forms in HTML
