COMPUTER SCIENCE
SUBJECT NAME : WEB TECHNOLOGY
CHAPTER NO : 2
CHAPTER NAME : HTML Table
LECTURE NO: 1
HTML Tables
⚫ HTML tables allow web developers to arrange data into rows
and columns.
⚫ The <table> tag defines an HTML table.
⚫ Each table row is defined with a <tr> tag. Each table header is
defined with a <th> tag. Each table data/cell is defined with a <td>
tag.
⚫ By default, the text in <th> elements are bold and centered.
⚫ By default, the text in <td> elements are regular and left-aligned.
Example:
th – table heading(bold and center)
Cell Spacing
border td- table data(plain and left alignment)
Adding Table Title using <caption> tag
Table Attributes
- width
⚫ width – to set the table width in terms of number of pixels or
percentage.
Table Attributes
- width
⚫ Creating Full sized table using width=100%
Changing Height
<table border="1" width="600" height="300">
<caption>Product Sales
Report</caption>
<tr>
<th>Sl.No</th>
<th>Product Name</th>
<th>Price</th>
</tr>
…
Table Attributes
- align
⚫ align – attribute used align the table in left, center or right
positions.
Table Attribute – align
⚫ You can also align the table cell data
Here, you can notice that, the Price cell
data alignment changed to center.
Same way, you can modify the alignment
as left or right also.
Vertical Alignment
⚫ valign attribute can be used to align the content of a cell
vertically as top, middle and bottom.
<table border="1" cellspacing="0" width="400" height="100">
<tr>
<th>Sl.No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td valign="bottom" align="center">1</td>
<td valign="middle" align="left">David Joel</td>
<td valign="top" align="right">85</td>
</tr>
</table>
Table Attribute – cellspacing
⚫ The purpose of the HTML cellspacing attribute is to set a
spacing between table cells in pixels(default is 1)
cellspacing
Table Attribute – cellspacing
⚫ To make single border, set cellspacing as 0
Table Attribute – border
⚫ border attribute is used to set the border of the table in
pixels. The default border is 0.
Border thickness 10px
Border less table
⚫ You can create border less table using border=0 or without
specifying the attribute.
Table Attribute – cellpadding
⚫ The cellpadding attribute specifies the space, in pixels, between the
cell wall and the cell content.
Space around the cell text - cellpadding
<td> Attribute – colspan
⚫ colspan attribute used to merge 2 or more columns.
<td> Attribute – rowspan
⚫ rowspan attribute used to merge 2 or more rows.
Setting background color for Table
Setting background image for Table
Setting Row background color
Exercise: Create a code for the below design?
<thead>,<tbody>,<tfoot> tags in Table
⚫ <thead> tag is used to group header content in an HTML
table.
⚫ <tbody> tag is used to group the body content in an HTML
table.
⚫ <tfoot> tag is used to group footer content in an HTML table.
<thead>
<tbody>
<tfoot>
<table border="1" cellspacing="0"> Example:
<thead bgcolor="pink"> <thead>,<tbody>,<tfoot>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody bgcolor="yellow">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot bgcolor="gray">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Question 1
⚫ Which of the following attribute can be used with <td> tag two
merge two cells horizontally in a HTML table?
A. merge=colspan2
B. rowspan = 2
C. colspan = 2
D. merge=row2
Answer: C) colspan=2
Question 2
⚫ Consider the HTML table definition given below:
<table border=1>
<tr>
<td rowspan=2>ab</td>
<td colspan=2>cd</td>
</tr>
<tr> Answer: C. (2,3,2) and (2,3,2)
<td>ef</td>
<td rowspan=2>gh</td>
</tr>
<tr><td colspan=2>ik</td>
</tr>
</table>
The number of rows in each column and the number of
columns in each row are
1.(2,2,3) and (2,3,2)
2.(2,2,3) and (2,2,3)
3.(2,3,2) and (2,3,2)
4.(2,3,2) and (2,2,3)
Question 3
Consider the following HTML table definition: The above HTML code would render on screen as:
Which of the above output is correct as per the HTML
code?
(A) (1)
(B) (2)
(C) (3)
(D) (4)
Answer: C. (3)
Question 4
⚫ Correct HTML to left align the content inside the table cell is
A. <tdleft>
B. <td ralign=“left”>
C. <td align=“left”>
D. <td leftalign>
Answer: C. <td align=“left”>
Question 5
⚫ How can you open a link in new browser window?
A. <a href=“url” target=“_new”>
B. <a href=“url” target=“_blank”>
C. <a href=“url.new”>
D. <a href=“url” target=“open”>
Answer: B. <a href=“url” target=“_blank”>
<script> tag
⚫ The <script> tag is used to embed a client-side script
such as JavaScript.
<style> tag
⚫ The <style> tag is used to define style information (CSS)
for a document.
style attribute
⚫ style is a HTML global attribute
⚫ Used to change the styles of the HTML elements in a web
page.
⚫ It is a part of Cascading Style Sheet(CSS)
<body>
<h1 style="color:red;">Welcome to HTML</h1>
<div style="color:blue">
This is a Section of content
</div>
</body>
Question
__________ tag is an extension to HTML that can enclose any
number of Javascript statements.
A. <SCRIPT>
B. <BODY>
C. <HEAD>
D. <TITLE>
Answer: A. <SCRIPT>
