Scribd
Upload
20 views76 pages

HTML Tables: Structure and Styling Guide

This document provides a comprehensive overview of HTML tables, including their structure, key elements like <table>, <tr>, <th>, and <td>, and how to style them using CSS. It covers various attributes for tables, such as border, cellspacing, and cellpadding, as well as techniques for spanning rows and columns. Additionally, it includes examples of creating tables with different styles, sizes, and headers.

Uploaded by

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

HTML Tables: Structure and Styling Guide

This document provides a comprehensive overview of HTML tables, including their structure, key elements like <table>, <tr>, <th>, and <td>, and how to style them using CSS. It covers various attributes for tables, such as border, cellspacing, and cellpadding, as well as techniques for spanning rows and columns. Additionally, it includes examples of creating tables with different styles, sizes, and headers.

Uploaded by

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

Unit 3: HTML Tables, Lists, Frames

HTML Tables
Arrangement of Data in the form of Rows and Columns inside the Cell.

HTML Tables allows you to arrange data into rows and columns
on a web page, making it easy to display information like schedules,
statistics, or other structured data in a clear format.

Rows are Represented in Horizontal Direction, whereas


Columns are Represented in Vertical Direction

An HTML table is defined using the <table> tag. Inside the table, we
use a combination of other tags to structure the content into rows and
columns.
Smallest Unit of a Table is Called as Cell.

Note: A table cell can contain all sorts of HTML elements: text, images, lists,
links, other tables.

Starting Tag of TABLE: <table> Closing Tag of TABLE: </table>

<thead> defines Heading Data

<tbody> defines Actual Content

<tfoot> defines Sum/Total

<tr>

Table Row 1

Table Row 2

</tr>

1 |[Link]
<td>

</td>

<th>
Heading 1 Heading 2 Heading 3

</th>
Table Tags and Their Use

 <table>: Starts and ends the table.


<table> <!-- Table content goes here --> </table>

 <tr>: Table row. Each row represents a horizontal section


of the table.
<tr> <!-- Row content goes here --> </tr>

 <td>: Table data. Represents an individual cell in a row.


<td> Data goes here </td>

2 |[Link]
 <th>: Table header. Represents a cell that is bold and
centered by default, often used for headings.
<th> Heading </th>

HTML tables are used to display data in a structured format, using


rows and columns. Each table is made up of several key elements, which
help organize and display the information clearly.

Basic Structure of an HTML Table


<![Link]>
<html>
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>

3 |[Link]
Key Elements in an HTML Table

1. <table>: The container element for the table.


2. <tr> (table row): Represents a row in the table.
3. <th> (table header): Defines a header cell, typically displayed in
bold and centered.
4. <td> (table data): Represents a standard cell containing data.

Example of a Simple Table

<![Link]>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Table</title>
</head>
<body>
<table border="1">
<thead>
<th>Name</th>
<th>Age</th>
<th>City</th>
</thead>

<tbody>
<tr>
<td>Homesh</td>
<td>19</td>
<td>Nagpur</td>
</tr>
4 |[Link]
<tr>
<td>Falguni</td>
<td>21</td>
<td>Pune</td>
</tr>
<tr>
<td>Prashant</td>
<td>20</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</body>
</html>

Table Attributes

 border: Defines the width of the table's border. For example,


border="1" adds a border around the table and its cells.

<table border="1">

 cellspacing: Defines the space between table cells.

<table cellspacing="10">

 cellpadding: Defines the space between the content of the table


cell and its border.

<table cellpadding="10">

5 |[Link]
 width: Defines the width of the table (either in pixels or
percentage).

<table width="100%">

 align: Specifies the alignment of the table (left, center, right).

<table align="center">
Spanning Rows and Columns

 colspan: Used in the <td> or <th> tag to make a cell span multiple
columns.

<th colspan="2">Merged Header</th>

 rowspan: Used in the <td> or <th> tag to make a cell span multiple
rows.

<td rowspan="2">Merged Row</td>

HTML Table Borders


HTML tables can have borders of different styles and shapes
How To Add a Border

To add a border, use the CSS border property on table, th,


and td elements:

6 |[Link]
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the


table.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Komal</td>
<td>Watson</td>
<td>21</td>
</tr>
<tr>

7 |[Link]
<td>Ram</td>
<td>Kapoor</td>
<td>67</td>
</tr>
<tr>
<td>Chandan</td>
<td>Smith</td>
<td>30</td>
</tr>
</table>

</body>
</html>

Collapsed Table Borders


To avoid having double borders like in the example above, set the
CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

<!DOCTYPE html>
<html>
8 |[Link]
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the
CSS border-collapse property.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Shivam</td>
<td>Fernandis</td>
<td>40</td>
</tr>
<tr>
<td>Jenelia</td>
<td>Deshmukh</td>
<td>24</td>
</tr>
<tr>
9 |[Link]
<td>Arjun</td>
<td>Sharma</td>
<td>60</td>
</tr>
</table>

</body>
</html>

Style Table Borders


If you set a background color of each cell, and give the border a
white color (the same as the document background), you get the
impression of an invisible border:

<!DOCTYPE html>
<html>
<head>

10 |[Link]
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: Cyan;
}
</style>
</head>
<body>

<h2>Table With Invisible Borders</h2>

<p>Style the table with white borders and a background color of the
cells to make the impression of invisible borders.</p>

<table style="width:10%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bittu</td>
<td>Pandit</td>
<td>50</td>
</tr>
<tr>
<td>Monday</td>
<td>Pandey</td>
<td>94</td>
</tr>
<tr>
<td>Cris</td>
11 |[Link]
<td>Sharma</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Round Table Borders


With the border-radius property, the borders get rounded corners:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
th, td {
background-color: cyan;
12 |[Link]
}
</style>
</head>
<body>

<h2>Table With Invisible Borders</h2>

<p>Style the table with white borders and a background color of the
cells to make the impression of invisible borders.</p>

<table style="width:10%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bittu</td>
<td>Pandit</td>
<td>50</td>
</tr>
<tr>
<td>Monday</td>
<td>Pandey</td>
<td>94</td>
</tr>
<tr>
<td>Cris</td>
<td>Sharma</td>
<td>80</td>
</tr>
</table>

</body>
</html>
13 |[Link]
Dotted Table Borders
With the border-style property, you can set the appearance of the border.

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-style: dotted;
}
</style>
</head>
<body>

<h2>Table With Invisible Borders</h2>

<p>Style the table with white borders and a background color of the
cells to make the impression of invisible borders.</p>

<table style="width:50%">
<tr>
14 |[Link]
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bittu</td>
<td>Pandit</td>
<td>50</td>
</tr>
<tr>
<td>Monday</td>
<td>Pandey</td>
<td>94</td>
</tr>
<tr>
<td>Cris</td>
<td>Sharma</td>
<td>80</td>
</tr>
</table>

</body>
</html>

15 |[Link]
Border Color
With the border-color property, you can set the color of the border.

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-style:solid;
border-color: red;
}
</style>
</head>
<body>

<h2>Table With Invisible Borders</h2>

<p>Style the table with white borders and a background color of the
cells to make the impression of invisible borders.</p>

<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bittu</td>

16 |[Link]
<td>Pandit</td>
<td>50</td>
</tr>
<tr>
<td>Monday</td>
<td>Pandey</td>
<td>94</td>
</tr>
<tr>
<td>Cris</td>
<td>Sharma</td>
<td>80</td>
</tr>
</table>

</body>
</html>

HTML Table Sizes


HTML tables can have different sizes for each column, row or the entire table.

17 |[Link]
Use the style attribute with the width or height properties to specify the size of a
table, row or column.

HTML Table Width


To set the width of a table, add the style attribute to the <table> element:

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>

<body>

<h2>100% wide HTML Table</h2>

<table style="width:100%">

18 |[Link]
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priyanka</td>
<td>Chopra Jones</td>
<td>50</td>
</tr>
<tr>
<td>Mahi</td>
<td>Sunday</td>
<td>14</td>
</tr>
<tr>
<td>Chinmay</td>
<td>Bagdadi</td>
<td>22</td>
</tr>
</table></body></html>

HTML Table Column Width

19 |[Link]
To set the size of a specific column, add the style attribute on
a <th> or <td> element:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>

<h2>Set the first column to 70% of the table width</h2>

<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Shane</td>
<td>Watson</td>
<td>40</td>
</tr>
<tr>
<td>Anjali</td>
<td>Meheta</td>
<td>44</td>
</tr>
<tr>
<td>Tarak</td>
20 |[Link]
<td>Meheta</td>
<td>34</td>
</tr>
</table>

</body>
</html>

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table
row element:

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>

21 |[Link]
<h2>Set the height of the second row to 200 pixels</h2>

<table style="width:80%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td style="height:200px">Shane</td>
<td>Watson</td>
<td>40</td>
</tr>
<tr>
<td>Anjali</td>
<td>Meheta</td>
<td>44</td>
</tr>
<tr>
<td>Tarak</td>
<td>Meheta</td>
<td>34</td>
</tr>
</table>

</body>
</html>

22 |[Link]
HTML Table Headers
The HTML Table Headers can be utilized to define a table's
header with the help of the <thead> tag. It is typically placed after
the <caption> tags and should precede the <tbody> and <tfoot> tags.
An HTML table can include a table header, footer, and body to organize
its structure effectively.
In HTML tables, you can set headers for each column or row, or
you can have headers that cover multiple columns or rows.

Table of Content
HTML Table with Header
HTML Table with Vertical Header
Align Table Headers
Header for Multiple Columns with colspan
HTML Table with Caption

23 |[Link]
HTML Table with Header

The <thead> element is used to define the header section of a


table. Headers provide labels for each column, making it easier to
understand the content.

Example: The example below shows a simple table with table headers.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,
h3 {
text-align: left;
color: Red;
}

table {
border-collapse: collapse;
width: 100%;
}

24 |[Link]
th,
td {
border: 1px solid green;
padding: 10px;
text-align: center;
}
</style>
</head>

<body>
<h1>KDKCE NAGPUR</h1>
<h3>HTML Table with Header
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jethalal</td>
<td>41</td>
<td>101</td>
</tr>
<tr>
<td>Popatlal</td>
<td>51</td>
<td>156</td>
</tr>
<tr>
<td>Sundar</td>
<td>34</td>
25 |[Link]
<td>133</td>
</tr>
<tr>
<td>Tapu</td>
<td>12</td>
<td>109</td>
</tr>
<tr>
<td>Sonu</td>
<td>13</td>
<td>121</td>
</tr>
</tbody>
</table>
</body>

</html>

26 |[Link]
HTML Table with Vertical Header

HTML Table with Vertical header is define by


placing <th> (table header) elements in the first column within
each <tr> (table row).

Example: The example below shows a Vertical Header (first column)


table headers.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,h3 {
text-align: center;
color: orange;
}

table {
border-collapse: collapse;
width: 60%;
}

th,
td {
border: 1px solid Blue;
27 |[Link]
padding: 8px;
text-align: center;
}
</style>
</head>

<body>
<h1>BCA SECTION A</h1>
<h3>HTML Table with Vertical Header</h3>
<table>
<thead>
<tr>
<th>Name</th>
<td>Daya</td>
<td>Tapukepapa</td>
<td>Champaklal</td>
<td>Tapu</td>
<td>Sonu</td>
</tr>
<tr>
<th>Class</th>
<td>12</td>
<td>9</td>
<td>6</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<th>Roll No</th>
<td>121</td>
<td>221</td>
<td>321</td>
<td>421</td>
<td>521</td>
</tr>
28 |[Link]
</thead>
</table>

</body>

</html>

Align Table Headers


By default, Table Headers are centered. To position them
on the left, set the CSS property text-align to left.

Example: The example below shows a Header with left-align


table headers.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,

29 |[Link]
h3 {
text-align: left;
color: purple;
}

table {
border-collapse: collapse;
width: 40%;
}

th {
text-align: left;
}

th,
td {
border: 1px solid maroon;
padding: 10px;
}
</style>
</head>

<body>
<h1>B1 AND B2 </h1>
<h3>Align Table Headers</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
30 |[Link]
</tr>
</thead>
<tbody>
<tr>
<td>Bhide</td>
<td>8</td>
<td>111</td>
</tr>
<tr>
<td>Madhavi</td>
<td>7</td>
<td>222</td>
</tr>
<tr>
<td>Sonalika</td>
<td>5</td>
<td>333</td>
</tr>
</tbody>
</table>
</body>

</html>

31 |[Link]
Header for Multiple Columns with colspan
The colspan is used to make a table cell span multiple
columns horizontally. It is used as an attribute to
the <th> or <td> element, defining the number of columns the
cell should span.

Example: Implementation of table header for Multiple Columns


with colspan.
<!DOCTYPE html>
<html>
<head>
<title>HTML colspan attribute</title>
<style>
h1,
h3 {
text-align: center;
color: yellow;
}

body {
display: flex;
32 |[Link]
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

table,
th,
td {
border: 5px solid black;
border-collapse: collapse;
padding: 16px;
text-align: center;
width: 50%;
}
</style>
</head>

<body>

<h1>SECTION A </h1>
<h3>HTML Header for Multiple
Columns using colspan
</h3>
<table>
<tr>
<th>Name</th>
<th>Notes</th>
</tr>
<tr>
<td>Babita</td>
<td>1001</td>
</tr>
<tr>
33 |[Link]
<td>Iyer</td>
<td>11</td>
</tr>
<tr>
<td colspan="2">Total: 3</td>
</tr>
</table>
</body>

</html>

HTML Table with Caption

A table caption is used to provide brief description for an HTML


table. The <caption> element is used to define the caption for a table. It
should be placed immediately after the opening <table> tag. The
caption appears centered above the table content.

Example: Implementation of table with caption.


<!DOCTYPE html>
<html lang="en">
<head>

34 |[Link]
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}

table {
border-collapse: collapse;
width: 100%;
}

thead {
background-color: rgb(145, 196, 145);
}

th,
td {
border: 2px solid purple;
padding: 10px;
text-align: center;
}
</style>
</head>

<body>
<h1>ROOM 212</h1>
<h3>HTML Table with Caption
</h3>
<table>
35 |[Link]
<caption>Student Data</caption>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bagha</td>
<td>4</td>
<td>921</td>
</tr>
<tr>
<td>Nattu Kaka</td>
<td>6</td>
<td>151</td>
</tr>
<tr>
<td>Magan</td>
<td>9</td>
<td>411</td>
</tr>
<tr>
<td>Sethji</td>
<td>1</td>
<td>800</td>
</tr>
</tbody>
</table>
</body>

</html>

36 |[Link]
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 50%;
}

th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

37 |[Link]
tr:hover {background-color: coral;}
</style>
</head>
<body>

<h2>Hoverable Table</h2>

<p>Move the mouse over the table rows to see the effect.</p>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Chalu</td>
<td>Pandey</td>
<td>50000</td>
</tr>
<tr>
<td>Ramesh</td>
<td>Sharma</td>
<td>130000</td>
</tr>
<tr>
<td>Ashish</td>
<td>Kale</td>
<td>30000</td>
</tr>
<tr>
<td>Chatur</td>
<td>Lingam</td>
<td>25000</td>
</tr>
38 |[Link]
</table>

</body>
</html>

39 |[Link]
HTML Table - Zebra Stripes
If you add a background color on every other table row, you will get a
nice zebra stripes effect.

To style every other table row element, use the :nth-child(even) selector like this:

Note: If you use (odd) instead of (even), the styling will occur on row
1,3,5 etc. instead of 2,4,6 etc.

<!DOCTYPE html>
<html>
40 |[Link]
<head>
<style>
table {
border-collapse: collapse;
width: 40%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: green;
}
</style>
</head>
<body>

<h2>Zebra Striped Table</h2>


<p>For zebra-striped tables, use the nth-child() selector and add a
background-color to all even (or odd) table rows:</p>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Krishnan</td>
<td>Iyer</td>
<td>120000</td>
</tr>
<tr>
41 |[Link]
<td>Jethalal</td>
<td>Gada</td>
<td>1500000</td>
</tr>
<tr>
<td>Nattu kaka</td>
<td>Udhaiwala</td>
<td>20000</td>
</tr>
<tr>
<td>Bagha</td>
<td>Udhaiwala</td>
<td>15000</td>
</tr>
</table>

</body>
</html>

42 |[Link]
Cell Padding and Cell Spacing in HTML

Introduction
HTML tables play a crucial role in structuring and presenting data on web
pages. To enhance the visual appeal and layout of tables, two essential properties,
cell padding and cell spacing, come into play in HTML.

Cell Padding in HTML


 Definition: Cell Padding in HTML is a property that specifies the space
between the border of a table cell and its content. In simpler terms, it defines
the whitespace between the cell edge and the content inside the cell.
 This property proves valuable in improving the aesthetics and readability of
a table by providing a cushioning effect around the cell content.

Syntax:

<table cellpadding="value">...</table>

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
43 |[Link]
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
</style>
</head>
<body>

<h2>Cellpadding - top - bottom - left - right </h2>


<p>We can specify different padding for all fours sides of the cell
content.</p>

<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Tarak</td>
<td>Mehta</td>
<td>40</td>
</tr>
<tr>
<td>Anjali</td>
<td>Meheta</td>
<td>41</td>
</tr>
<tr>
<td>Abdul</td>
<td>Khan</td>
<td>28</td>
</tr>
44 |[Link]
</table>

</body>
</html>

Cell Spacing in HTML


 Definition: Cellspacing is a property that defines the space between cells. It
adds whitespace between the edges of adjacent cells, contributing to a well-
organized and visually appealing table layout.
 Proper cell spacing aids in distinguishing between different cells, improving
the overall clarity of the table.

Syntax:

<table cellspacing="value">...</table>

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

45 |[Link]
table {
border-spacing: 30px;
}
</style>
</head>
<body>

<h2>Cellspacing</h2>
<p>Change the space between the cells with the border-spacing
property.</p>

<table style="width:40%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Roshan</td>
<td>Sodhi</td>
<td>39</td>
</tr>
<tr>
<td>Gogi</td>
<td>Sodhi</td>
<td>15</td>
</tr>
<tr>
<td>RoshanSingh</td>
<td>Sodhi</td>
<td>41</td>
</tr>
</table>

</body></html>
46 |[Link]
Conclusion
Cellspacing and cellpadding are the two most commonly used
attributes for table design. They might look similar, but they serve
different purposes, and to use them efficiently, we should know the
difference between them. Proper use of cellspacing and cellpadding can
enhance the readability of HTML tables and visual appeal to a great
extent. Thus, they make an essential aspect of web design.

Features of Cellspacing
Cell spacing assigns the distance between all adjacent cells in a table.

The default value for cell spacing is 2.

The maximum value varies from browser to browser.

It can be set to any positive value.

If the cell spacing value of set to 0, there will be no space between the cells.

47 |[Link]
Features of Cellpadding
Cell padding defines the space that is added between the content within a
cell and the cell’s border.

It can be set to any positive value.

The default value for cell padding is 1.

The maximum value for cellspacing varies from browser to browser.

If the cellpadding value of set to 0, there will be no space between the cells.

It can be set separately for each cell in a table using <td> or <th>.

Difference between cellpadding and cellspacing:

Cellpadding Cellspacing

It specifies the space between the


It specifies the space between
border of a table cell and its
adjacent cells.
contents.

It is created by using HTML It is also created by using HTML


<table> tag but type attribute is set <table> tag but type attribute is set
to cellpadding. to cellspacing.

Cellspacing can get subjected to


It is mainly meant for a single cell.
more than one cell.

Whereas, the default cellspacing


The default cellpadding value is 1
value is 2

48 |[Link]
Cellpadding is widely used and Cellspacing is less effective than
considered to be an effective mean Cellpadding.

Cellpadding is an attribute Cellspacing is also an attribute.

HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Lists are used to store data or information in web pages in ordered or
unordered form. HTML supports several types of list elements that can be
included in the <BODY>tag of the document. These elements may also be
nested, i.e., the onset of elements can be embedded within another. There are
three types of list available in HTML:

List Item tag

List item tag is used to define each item of a list. Once we define
list items with the <li> tag, the list appears in Web browsers in the
bulleted form (by default). It is used inside both ordered and unordered
lists.
Syntax:
<li> content </li>

Example:
<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>

49 |[Link]
<li>KDKCE</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>KDKCE</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>

HTML Ordered Lists


The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.

50 |[Link]
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>KDKCE</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

51 |[Link]
type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Numbers:
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>
52 |[Link]
Uppercase Letters:
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>

53 |[Link]
Lowercase Letters:
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">
<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>

Roman Numbers-Uppercase:
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">
54 |[Link]
<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>

Roman Numbers- Lowercase:


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

</body>
</html>

55 |[Link]
Control List Counting
By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:

<!DOCTYPE html>
<html>
<body>

<h2>The start attribute</h2>


<p>By default, an ordered list will start counting from 1. Use the start attribute to
start counting from a specified number:</p>

<ol start="21">
<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>
</ol>

<ol type="I" start="21">


<li>KDKCE</li>
<li>NAGPUR</li>
<li>BCA</li>
<li>SECTION A</li>
<li>SECTION B</li>

56 |[Link]
</ol>

</body>
</html>

Nested HTML Lists


Lists can be nested (list inside list):

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>


<p>Lists can be nested (list inside list):</p>

<ol>
<li>Maharashtra</li>
<li>Nagpur</li>
<ol>
<li>Nandanvan</li>
<li>Mahal</li>
</ol>
</li>
<li>Tarri Poha</li>
<li>Dolly Chai</li>

57 |[Link]
</ol>

</body>
</html>

Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

HTML Unordered Lists

An HTML Unordered List is defined with the <ul> tag, where “ul”
stands for “unordered list.” Each item within the list is marked by a <li>
tag, standing for “list item.”
The items in an unordered list are typically displayed with bullet
points, which can be styled or changed using CSS.

Syntax:

<ul>
<li>Content I</li>
<li>Content II</li>
</ul>

58 |[Link]
Example:
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Tarri Poha</li>
<li>Ramji Shyamji</li>
<li>KP Ground</li>
<li>Laxhmi Nagar</li>
<li>Poha vala</li>
</ul>

</body>
</html>

Unordered HTML List - Choose List Item Marker


The CSS list-style-type property is used to define the style of the list item marker.
It can have one of the following values:

Value Description

59 |[Link]
disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Disc:
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
<li>Ramji Shyamji</li>
<li>KP Ground</li>
<li>Laxhmi Nagar</li>
<li>Poha vala</li>
</ul>

</body>
</html>

60 |[Link]
Circle:
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
<li>Ramji Shyamji</li>
<li>KP Ground</li>
<li>Laxhmi Nagar</li>
<li>Poha vala</li>
</ul>

</body>
</html>

61 |[Link]
Square:
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
<li>Ramji Shyamji</li>
<li>KP Ground</li>
<li>Laxhmi Nagar</li>
<li>Poha vala</li>
</ul>

</body>
</html>

No List:
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>


62 |[Link]
<ul style="list-style-type:none;">
<li>Ramji Shyamji</li>
<li>KP Ground</li>
<li>Laxhmi Nagar</li>
<li>Poha vala</li>
</ul>

</body>
</html>

Nested List:

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>


<p>Lists can be nested (list inside list):</p>

<ul>
<li>Maharashtra</li>
<li>Nagpur</li>
<ul>
<li>Section A</li>
<li>Section B</li>
</ul>

63 |[Link]
</li>
<li>KDKCE</li>
</ul>

</body>
</html>

Horizontal List with CSS:


<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: maroon;
}

li {
float: left;
}

li a {
display: block;
64 |[Link]
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation
menu:</p>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

65 |[Link]
HTML Other Lists
HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:

An HTML description list is a list of terms, with a description


of each term. The HTML description list is represented
as <dl>. Lists in HTML are used for specifying particular
information in list form.

Description Lists are used for:


 To give definitions to particular terms that we have defined in our
lists.
 To have a dictionary type of format(term and definition of term)

Format of description Lists:


 Description Lists are used with description list tag <dl> tag
in HTML.
 In <dl> tag we have description terms it is represented as <dt> tag
Here we do not use li tag as Other Lists. In <dt> write the terms of
the data. We can have different terms with the help of <dl>tag.
 In this we use the data description tag <dd> we use this tag for
defining the term that we have stated.

Example: If we declare the term as Pizza then we can have a


description as Pizza is a food item.

Syntax:
<dl> Contents of the list </dl>
<!DOCTYPE html>
66 |[Link]
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>KDKCE</dt>
<dd>An Autonomous Insitute in Nagpur</dd>
<dt>BCA</dt>
<dd>A Professional Course Equivallent to Engineering
Course</dd>
<dt>Section A</dt>
<dd>Best Students in KDKCE in every Aspect</dd>
</dl>

</body>
</html>

67 |[Link]
HTML Iframes
An HTML iframe is used to display a web page within a web page.

An iframe, or Inline Frame, is an HTML element represented by the


<iframe> tag. It functions as a ‘window’ on your webpage through
which visitors can view and interact with another webpage from a
different source.

Iframes are used for various purposes like:


 Embedding Multimedia: Easily integrate videos, audio, or
animations from platforms like YouTube, etc.
 Including Maps: Embed maps from services like Google Maps
directly into your site.
 Loading Forms and Widgets: Incorporate forms or widgets from
other sources without writing complex code.

Syntax:
<iframe src="URL" title="description"></iframe>
 The src attribute specifies the URL of the document you want
to embed.
 Iframes can include videos, maps, or entire web pages from
other sources.

HTML Iframes Examples


Example 1: Basic Iframe Embedding
In this example, an iframe is used to display another webpage
within the current webpage.

68 |[Link]
<!DOCTYPE html>
<html>

<head>
<title>HTML iframe Tag</title>
</head>

<body style="text-align: center">


<h2>HTML iframe Tag</h2>
<iframe src="[Link]
height="421"
width="500">
</iframe>
</body>

</html>

In this example:
 src: Specifies the URL of the page to display within the iframe.
 width and height: Defines the size of the iframe on your page.

69 |[Link]
Supported Attributes of the <iframe> Tag
Attributes Description

height Sets the height of the <iframe> element.

width Sets the width of the <iframe> element.

Controls whether or not the <iframe> should have


scrolling
scrollbars.

Specifies the name of the <iframe> for targeting its


name
content or for referencing it in JavaScript.

referrerpolicy Sets the referrer policy for the <iframe> content.

Specifies an extra set of restrictions for the content in


sandbox
the <iframe>.

Specifies the URL of the document to embed in


src
the <iframe>.

Specifies the HTML content of the page to display in


srcdoc
the <iframe>.

70 |[Link]
Example 2: Using Height and Width attribute:
The height and width attributes are used to specify the size of the
iframe. The attribute values are specified in pixels by default. You can
use pixels or percentages (e.g., “80%”).

<!DOCTYPE html>
<html>

<head>
<title>HTML iframe Tag</title>
</head>

<body style="text-align: center">


<h2>HTML iframe Tag</h2>
<iframe src="[Link]
height="600px"
width="50%">
</iframe>
</body>

</html>

71 |[Link]
Example 3: Styling Iframe Border Using CSS
You can change the size, style, and color of the iframe border
using CSS.
<!DOCTYPE html>
<html>

<head>
<title>HTML iframe Tag</title>
</head>

<body style="text-align: center">


<h2>HTML iframe Tag</h2>
<iframe src="[Link]

72 |[Link]
height="600"
width="700"
style="border: 11px solid orange">
</iframe>
</body>

</html>

Example 4: Removing Borders from Iframe


By default, iframe has a border around it. To remove the border, we
must use the style attribute and use the CSS border property.
<!DOCTYPE html>
<html>

73 |[Link]
<head>
<title>HTML iframe Tag</title>
</head>

<body style="text-align: center">


<h2>HTML iframe Tag</h2>
<iframe src="[Link]
height="600"
width="700"
style="border: none">
</iframe>
</body>

</html>

74 |[Link]
Example 5: Iframe Target in Link
You can target an iframe with links by using the name attribute of the iframe and
the target attribute of the link.

<!DOCTYPE html>
<html>

<body>

<h2>HTML iframe Tag</h2>

<p>
Click the link text
</p>

<iframe src=

75 |[Link]
"C:\Users\Kunal\Desktop\[Link]"
height="400"
width="350"
name="iframe_a">
</iframe>

<p>
<a href=
"[Link]
target="iframe_a">
Converter
</a>
</p>
</body>

76 |[Link]

You might also like