UNIT – 4
HTML Tables
What is an HTML Table?
An HTML table is created using the <table> tag. Inside this tag, you use
• <tr> to define table rows,
• <th> for table headers, and
• <td> for table data cells
Each <tr> represents a row, and within each row, <th> or <td> tags represent the
cells in that row, which can contain text, images, lists, or even another table.
HTML Tables allow 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.
Creating basic table
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
In this Example:
• <table>: This tag starts the table. Everything between the opening
<table> and closing </table> tags makes up the table.
• <tr>: Stands for “table row”. Each <tr> tag defines a row in the table.
• <th>: Stands for “table header”. It’s used for the headers of the columns.
In this case, “Firstname“, “Lastname“, and “Age” are headers. Text in
<th> tags is usually bold and centered by default.
• <td>: Stands for “table data”. This tag is used for actual data cells under
each column. For instance, “Priya” is the data under the “Firstname”
header, “Sharma” under the “Lastname“, and “24” under the “Age“.
• The first <tr> has three <th> elements, setting up the column titles.
• The subsequent <tr> tags each contain three <td> elements,
representing the data for each person listed in the table.
When this HTML code is rendered in a web browser, it will display a table with four
rows (one header row plus three data rows) and three columns (Firstname,
Lastname, Age), showing the names and ages of Priya, Arun, and Sam.
Tags used in HTML Tables
HTML Tags Descriptions
Defines the structure for organizing data
<table>
in rows and columns within a web page.
Represents a row within an HTML
<tr>
table, containing individual cells.
Shows a table header cell that typically
<th>
holds titles or headings.
Represents a standard data cell,
<td>
holding content or data.
Provides a title or description for the
<caption>
entire table.
Defines the header section of a table,
<thead>
often containing column labels.
Represents the main content area of a
<tbody> table, separating it from the header or
footer.
Specifies the footer section of a table,
<tfoot>
typically holding summaries or totals.
HTML Tags Descriptions
Defines attributes for
<col> table columns that can be applied to
multiple columns at once.
Groups together a set of columns in a
<colgroup> table to which you can apply formatting
or properties collectively.
HTML TABLE ELEMENTS
Introduction to HTML Tables
HTML tables are used to organize data into rows and columns. They help in
displaying information in a structured manner.
Basic Table Structure
A table in HTML consists of multiple elements that define its structure and content.
Main Table Elements
1. <table> – Defines the table.
2. <tr> (Table Row) – Defines a row in the table.
3. <th> (Table Header) – Represents a header cell, usually bold and centered.
4. <td> (Table Data) – Represents a standard data cell.
5. <caption> – Provides a title or caption for the table.
6. <colgroup> – Groups columns for styling purposes.
7. <col> – Specifies column properties like width and color.
8. <thead> – Groups the table header section.
9. <tbody> – Groups the main body content.
10. <tfoot> – Groups the table footer.
Example of a Simple Table
<table border="1">
<caption>Student Marks</caption>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kavitha</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Arun</td>
<td>Science</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>185</td>
</tr>
</tfoot>
</table>
Explanation of the Example
• The <table> tag creates the table.
• The <caption> tag gives a title to the table.
• The <thead>, <tbody>, and <tfoot> tags organize the table content.
• The <tr> defines rows, <th> defines headers, and <td> defines data cells.
• The colspan="2" attribute in <td> merges two columns.
Additional Features of Tables
• Merging Cells: colspan (merge columns) and rowspan (merge rows) help in
better table design.
• Styling Tables: Use CSS to customize table appearance (e.g., borders,
colors, padding).
Example of a Styled Table (CSS)
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: lightgray;
}
</style>
Adding a Caption in an HTML Table
To add a caption to a table, we must use the “caption” tag.
Syntax
<table style="width:100%">
<caption>DETAILS</caption>
Example: HTML Table caption by specifying the CSS properties for setting its width.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>DETAILS</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
HTML <table> align Attribute
The HTML <table> align Attribute is used to specify the alignment of the table and
its content. Instead of the align attribute, CSS properties like margin and text-align are
preferred for table alignment. For aligning content within table rows or cells, use
the align attribute within <tr> and or apply CSS styles.
Note: This attribute is not supported by HTML5.
Syntax
<table align="left | right | center">
Attribute Values
Attributes Descriptions
It sets the left align to the table. It is a
left
default value.
right It sets the right align to the table.
center It sets the center align to the table.
Example 1: In this example, we will see the implementation of the align-right attribute
with an example.
• html
<!DOCTYPE html>
<html>
<head>
<title>
HTML table align Attribute
</title>
</head>
<body>
<h1 style="green">GeeksforGeeks</h1>
<h2>HTML table align Attribute</h2>
<table border="1" align="right">
<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>
Output:
Example 2: In this example, we will see the implementation of the align-left attribute.
• HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML table align Attribute
</title>
</head>
<body>
<h1 style="green">GeeksforGeeks</h1>
<h2>HTML table align Attribute</h2>
<table border="1" align="left">
<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>
Output:
Example 3: In this example, we will see the implementation of the align-center
attribute.
• HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML table align Attribute
</title>
</head>
<style>
h1,
h2 {
text-align: center;
}
</style>
<body>
<h1 style="green">GeeksforGeeks</h1>
<h2>HTML table align Attribute</h2>
<table border="1" align="center">
<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>
Output:
HTML Table Colspan and Rowspan
In HTML, the rowspan attribute specifies how many rows a table cell should span,
determining its vertical position. On the other hand, the colspan attribute specifies the
number of columns a cell should span, determining its horizontal position. Defining
together, they provide a powerful mechanism for cells to cover multiple rows and
columns, offering flexibility in structuring complex tables.
HTML Table with Colspan
HTML Table with Colspan allows you to merge or combine adjacent table cells
horizontally, creating a single, wider cell that spans across multiple columns.
Note: The colspan is defined as the <th> element.
Example: The element illustrates the HTML Table with colspan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Table with Colspan</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Colspan
</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>Gupta</td>
<td>1</td>
</tr>
<tr>
<td>Sri</td>
<td>Krishn</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>Goyal</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
HTML Table with Rowspan
The HTML attribute rowspan determines how many rows a specific cell in a table
should cover. When a cell spans multiple rows, it occupies the space of those rows
within the table.
Note: Applied within a <td> or <th> element.
Example: The element illustrates the HTML Table with Rowspan.
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
color: green;
}
table {
width: 70%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML Table Rowspan</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th rowspan="3">MVM School</th>
</tr>
<tr>
<td>Radha</td>
<td>10</td>
</tr>
<tr>
<td>Ankur</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Output:
Table with Rowspan and Colspan Togther
The Table with Rowspan and Colspan Togther helps in creating the table more
complex and structured. The table utilizes rowspan and colspan attributes to merge
cells, creating a structured layout.
Example: The element illustrates the HTML Table with Colspan and rowspan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table with Rowspan and Colspan</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Rowspan and Colspan</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Mahima</td>
<td rowspan="2">Gupta</td>
<td>11</td>
<td rowspan="2">MVM School</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td rowspan="2">Sri</td>
<td rowspan="2">Krishn</td>
<td>3</td>
<td rowspan="2">LMS School</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td rowspan="2">Shivika</td>
<td rowspan="2">Goyal</td>
<td>5</td>
<td rowspan="2">SCPM School</td>
</tr>
<tr>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
HTML <table> cellpadding Attribute
The HTML <table> cell padding Attribute is used to specify the space between the cell
content and cell wall. The cellpadding attribute is set in terms of pixels. By default, the
padding is set to 0.
Note: The <table> cellpadding Attribute is not supported by HTML5.
Syntax:
<table cellpadding="pixels">
Attribute Values:
pixels: It holds the space between the cell content and cell wall in terms of pixels.
Example 1: In this example, we will see the implementation of table cell padding with
an example.
• html
<!DOCTYPE html>
<html>
<head>
<title>
HTML table cellpadding Attribute
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML table cellpadding Attribute
</h2>
<table border="1" cellpadding="15">
<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>
Output:
