Scribd
Upload
10 views15 pages

Unit 1. HTML 7

Uploaded by

Radhika sushma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views15 pages

Unit 1. HTML 7

Uploaded by

Radhika sushma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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

You might also like