Scribd
Upload
4 views19 pages

Lec 5 Table

The document is a course outline for Web Technologies taught by Ms. Sahil Luthra at Amritsar College of Engineering & Technology. It covers various HTML table elements, including headers, data rows, captions, cell padding, and cell spacing, along with examples of their implementation. The document also highlights the differences between cell padding and cell spacing.

Uploaded by

muskanmahajan736
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
4 views19 pages

Lec 5 Table

The document is a course outline for Web Technologies taught by Ms. Sahil Luthra at Amritsar College of Engineering & Technology. It covers various HTML table elements, including headers, data rows, captions, cell padding, and cell spacing, along with examples of their implementation. The document also highlights the differences between cell padding and cell spacing.

Uploaded by

muskanmahajan736
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/ 19

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

1 Mr.Sahil Luthra [email protected] Web Technology


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.

2 Mr.Sahil Luthra [email protected] Web Technology


 <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.

4 Mr.Sahil Luthra [email protected] Web Technology


 <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>

5 Mr.Sahil Luthra [email protected] Web Technology


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.

6 Mr.Sahil Luthra [email protected] Web Technology


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.

8 Mr.Sahil Luthra [email protected] Web Technology


 <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>

9 Mr.Sahil Luthra [email protected] Web Technology


 <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.

11 Mr.Sahil Luthra [email protected] Web Technology


 <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.

14 Mr.Sahil Luthra [email protected] Web Technology


 <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>

16 Mr.Sahil Luthra [email protected] Web Technology


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.

17 Mr.Sahil Luthra [email protected] Web Technology


18 Mr.Sahil Luthra [email protected] Web Technology
Thank You

Mr.Sahil Luthra [email protected] Web


19 Technology

You might also like