Amritsar College of Engineering & Technology, Amritsar, Punjab, INDIA
NAAC - A grade, NBA accredited courses(2009-12, 2016-18), UGC Autonomous College
SUBJECT NAME: Web Technologies
SUBJECT CODE: PGCA 1909
Ms. Sahil Luthra
Assistant Professor
Department of Computer Applications
Header
The header cells in a table are defined using the <th> element.
These cells typically appear at the top of each column or at the
beginning of each row, and they are usually styled differently (bold
and centered by default) to distinguish them from the data cells.
<html >
<head>
<title>Table with Headers</title>
</head>
<body>
<h1>Table with Headers</h1>
<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
3 Mr.Sahil Luthra
[email protected] Web Technology
Data rows
Data rows in a table are defined using the <tr> element,
and each data cell within a row is defined using
the <td> element.
These elements contain the actual data of the table.
<html>
<head>
<title>Table with Data Rows</title>
</head>
<body>
<h1>Table with Data Rows</h1>
<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
</body>
</html>
Caption Tag
The <caption> tag in HTML is used to provide a title or description for a
<table> element. It helps give context or additional information about the
content of the table.
•The <caption> tag must be placed immediately after the opening <table> tag.
OBJECTIVES Caption Tag
<html>
<body>
<table>
<caption>Employee Details</caption>
<tr>
<th>Employee Name</th>
<th>Position</th>
</tr>
<tr>
<td>John</td>
<td>Manager</td>
</tr>
<tr>
<td>Emma</td>
</tr>
</table>
</body>
</html>
Mr.Sahil Luthra
[email protected] Web
7 Technology
Using the Width and Border
Attribute
The HTML <table> border Attribute is
used to specify the border of a table. It sets
the border around the table cells.
This attribute defines the visual
presentation of the table by setting the
thickness of the borders. A higher value
results in a thicker border.
<html>
<head>
<title>HTML table border Attribute</title>
<style>
body {
text-align: center;
}
table {
margin: 0 auto;
height: 20vh;
width: 40vh;
}
h1 {
color: green;
}
</style>
</head
<body>
<h1>Table Border</h1>
<h2>HTML table border Attribute</h2>
<table border="1">
<caption>Author Details</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
10 Mr.Sahil Luthra
[email protected] Web Technology
Cell Padding
Cell padding is the space between the cell edges and
the cell content.
By default the padding is set to 0.
Cellpadding specifies the space between the border of
a table cell and its contents (i.e) it defines the
whitespace between the cell edge and the content of
the cell.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 40px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell
content and its borders.</p>
12 Mr.Sahil Luthra
[email protected] Web Technology
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>94</td>
</tr>
</table>
</body>
</html>
13 Mr.Sahil Luthra sluthra423@gmail
.com Web Technology
Cellspacing
Cellspacing specifies the space between cells (i.e) it defines
the whitespace between the edges of the adjacent cells.
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<h2>Cellspacing</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
15
Mr.Sahil Luthra
[email protected] Web Technology
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Difference between cellpadding and
cellspacing:
Cellpadding Cellspacing
It specifies the space between the border of a table
It specifies the space between adjacent cells.
cell and its contents.
It is created by using HTML <table> tag but type It is also created by using HTML <table> tag but
attribute is set to cellpadding. type attribute is set to cellspacing.
Cellspacing can get subjected to more than one
It is mainly meant for a single cell.
cell.
The default cellpadding value is 1 Whereas, the default cellspacing value is 2
Cellpadding is widely used and considered to be
Cellspacing is less effective than Cellpadding.
an effective mean
Cellpadding is an attribute Cellspacing is also an attribute.
18 Mr.Sahil Luthra
[email protected] Web Technology
Thank You
19 Technology
