This presentation will describe about the HTML table tags.

1. COMPUTER APPLICATIONS
CLASS X (Code 165)
TOPIC:
UNIT 2: HTML Tables
By
HIMANSHU PATHAK

2. Contents
• Introduction
• Basic HTML Table Tags
• Table Attributes

3. Introduction
• HTML tables allow web developers to arrange
data into rows and columns.
• HTML tables are used to manage the layout of
the page e.g. header section, navigation bar,
body content, footer section etc.
• Tables can be used to compare two or more
items in tabular form layout.
• Tables are used to create databases.

4. Defining Tables in HTML
• An HTML table is defined with the “table” tag.
• Each table row is defined with the “tr” tag.
• A table header is defined with the “th” tag.
• By default, table headings are bold and
centered.
• A table data/cell is defined with the “td” tag.
• The ”caption” tag will serve as a title or
explanation for the table and it shows up at
the top of the table.

5. Example
<table>
<tr>
<th>Name</th>
<th>Contact</th>
</tr>
<tr>
<td>Pathak</td>
<td>9988776655</td>
</tr>
</table>

6. Table Tag Attribute
• Border attribute: We can use border attribute
of table tag in HTML to specify border. But it is
not recommended now.
– <table border="1">
• If you do not need a border, then you can use
border = "0".

7. Cellspacing & Cellpadding
• There are two attributes called cellspacing and
cellpadding which will use to adjust the white
space in table cells.
• The cellspacing attribute defines space
between table cells.
• cellpadding represents the distance between
cell borders and the content within a cell.
– <table cellpadding = "5" cellspacing = "5">

8. Colspan & Rowspan
• We will use colspan
attribute if we want to
merge two or more
columns into a single
column.
• Similar way we will
use rowspan if we want
to merge two or more
rows.
<table border = "1">
<tr>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
</tr>
<tr>
<td rowspan = "2"> Python
</td>
<td>HTML</td>
<td>Computer</td>
</tr>
<tr>
<td>Computer</td>
<td>HTML</td>
</tr>
<tr>
<td colspan = “2”>Python Lab</td>
<td>Library</td>
</tr>
</table>

9. Tables Background
• bgcolor attribute − We can set
background color for whole table
or just for one cell.
• background attribute − We can
set background image for whole
table or just for one cell.
• We can also set border color also
using bordercolor attribute.
• Note − The bgcolor, background,
and bordercolor attributes
deprecated in HTML5.
<table border = "1“ bordercolor = “red" bgcolor
= "yellow">
<tr>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
</tr>
<tr>
<td rowspan = "2"> Python
</td>
<td>HTML</td>
<td>Computer</td>
</tr>
<tr>
<td>Computer</td>
<td>HTML</td>
</tr>
<tr>
<td colspan = “2">Python Lab</td>
<td>Library</td>
</tr>
</table>

10. Table Height & Width
• You can set a table
width and height
using width and height
attributes.
• You can specify table
width or height in
terms of pixels or in
terms of percentage of
available screen area.
<table border = "1" width = “400” height = “200” >
<tr>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
</tr>
<tr>
<td rowspan = "2"> Python
</td>
<td>HTML</td>
<td>Computer</td>
</tr>
<tr>
<td>Computer</td>
<td>HTML</td>
</tr>
<tr>
<td colspan = “2">Python Lab</td>
<td>Library</td>
</tr>
</table>

11. Summary
• HTML Table
• Table Defining Tags and their attributes
• In the next class, we will start Unit II – HTML
Forms in detail.
•Thanks