27/08/2025, 10:13 HTML Tables - GeeksforGeeks
Search...
HTML Tables
Last Updated : 18 Jul, 2025
HTML (HyperText Markup Language) is the standard markup language
used to create and structure web pages. It defines the layout of a webpage
using elements and tags, allowing for the display of text, images, links,
and multimedia content. As the foundation of nearly all websites, HTML is
used in over 95% of all web pages today, making it an essential part of
modern web development.
Basic HTML Table Structure
An HTML table is created using the <table> tag. Inside the table, we use:
<tr>: Table Row
<th>: Table Header
<td>: Table Data
Each <tr> represents a row, and within each row, <th> and <td> tags
represent the cells in that row, which can contain text, images, lists, or
even another table(discuss below).
[Link] 1/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
HTML Table Code Example
<!-- [Link] -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<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>
[Link] 2/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
Simple HTML Table
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 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, and Age), showing the names and ages of Priya,
Arun, and Sam.
[Link] 3/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
HTML Tables Tags
Here, is the list of all the tags that we used in table formation in html.
Tag Description
Defines the structure for organizing
<table> data 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
<th>
typically 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
<tbody> a table, separating it from the header
or footer.
Specifies the footer section of a table,
<tfoot>
typically holding summaries or totals.
Defines attributes for table columns
<col> that can be applied to multiple
columns simultaneously.
[Link] 4/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
Tag Description
Groups together a set of columns in
<colgroup> a table to which you can apply
formatting or properties collectively.
Another Example of an border spacing HTML Table:
Creating a simple table in HTML using a table tag.
↔
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
↔
Output:
[Link] 5/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
HTML Table
Styling HTML Tables - Adding CSS
we use CSS (Cascading Style Sheets) to add styles such as borders,
background colors, text alignments, and much more. Here are some basic
styles to make your table look neater and more professional:
1. Adding a Border to an HTML Table
A border is set using the CSS border property. If you do not specify a
border for the table, it will be displayed without borders.
Syntax
table, th, td {
border: 1px solid black;
}
Example: Addition of the border to the HTML Table.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
Full Stack Course HTML CSS JavaScript TypeScript jQuery AngularJS Sign In
<tr>
<th>Firstname</th>
[Link] 6/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
<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 with border
2. Adding Collapsed Borders in an HTML Table
For borders to collapse into one border, add the CSS border-collapse
property.
Syntax
table, th, td {
border: 1px solid black;
[Link] 7/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
border-collapse: collapse;
}
Example: Addition of Collapsed Borders in HTML.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<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>
[Link] 8/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
</body>
</html>
Output:
HTML Table with Collapsed Borders
3. Adding Cell Padding in an HTML Table
Cell padding specifies the space between the cell content and its borders.
If we do not specify a padding, the table cells will be displayed without
padding.
Syntax
th, td {
padding: 20px;
}
Example: Addition of Table cell padding in HTML.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
</style>
</head>
[Link] 9/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
<body>
<table style="width:100%">
<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:
Adding Table cell padding
[Link] 10/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
4. Adding Left Align Headings in an HTML Table
By default, the table headings are bold and centered. To left-align the
table headings, we must use the CSS text-align property.
Syntax
th {
text-align: left;
}
Example: Explains the text-align property where the text is aligned to the
left.
<!-- [Link] -->
<!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%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
[Link] 11/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
</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:
text-align Property
5. Adding Border Spacing in an HTML Table
Border spacing specifies the space between the cells. To set the border-
spacing for a table, we must use the CSS border spacing property.
Syntax
[Link] 12/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
table {
border-spacing: 5px;
}
Example: Explains the border space property to make the space between
the Table cells.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<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>
[Link] 13/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
Border Spacing Property
6. Adding Cells that Span Many Columns in HTML Tables
To make a cell span more than one column, we must use the colspan
attribute.
Example: Use of colspan attribute in HTML.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
[Link] 14/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
Output:
colspan attribute
7. Adding Cells that span many rows in HTML Tables
To make a cell span more than one row, we must use the rowspan
attribute.
Example: Use of the rowspan attribute in HTML.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
[Link] 15/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Vikas Rawat</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9125577854</td>
</tr>
<tr>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
Output:
Use of rowspan attribute
8. Adding a Caption in an HTML Table
[Link] 16/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
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.
<!-- [Link] -->
<!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>
[Link] 17/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
</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:
Adding the caption using the tag
9. Adding a Background Colour to the Table
A color can be added as a background in an HTML table using the
"background-color" option.
Syntax
table#t01 {
width: 100%;
[Link] 18/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
background-color: #f2f2d1;
}
Example: Addition of the Table background color in HTML.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
</style>
</head>
<body>
<table style="width:100%">
<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>
[Link] 19/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
<br />
<br />
<table id="t01">
<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:
[Link] 20/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
Adding Table Background color using CSS properties
10. Creating Nested Tables
Nesting tables simply means making a Table inside another Table.
Nesting tables can lead to complex table layouts, which are visually
interesting and have the potential of introducing errors.
Example: Nesting of HTML Table.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<body>
<table border=5 bordercolor=black>
<tr>
<td> First Column of Outer Table </td>
<td>
<table border=5 bordercolor=grey>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
[Link] 21/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
</html>
Output:
Nested HTML Table
Common Questions About HTML Tables
How do you group the body content in a table using HTML5?
How can you create a table without using the <table> tag?
What is the rule attribute in an HTML Table?
Why should we avoid the use of tables for layout in HTML?
How do I fix the height of rows in the table?
How do you set the number of rows a table cell should span in HTML?
How do you set a fixed width for <td> in a table?
How do you merge table cells in HTML?
How to Create a Time-Table Schedule using HTML?
How to fetch data from JSON file and display in HTML table using
jQuery?
How to Perform Real-Time Search and Filter on HTML table?
How to use header & footer in HTML table?
How do you apply borders inside a table?
What are Cell Padding & Cell Spacing in HTML Table?
HTML Table Padding and Spacing
How to create Table with 100% width, with Vertical Scroll inside Table
body in HTML?
How to Reduce Space Between Two Columns in an HTML Table?
Can I Add Multiple <tbody> Elements to the Same Table in HTML?
How to add table footer in HTML?
What are the HTML tags used to display the data in the tabular form?
How can we add a tooltip to an HTML table cell without using
JavaScript?
[Link] 22/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
Learn HTML Tables in 4 minutes! | Complete HTML Tables Tutorial
Comment More info
Campus Training Program
[Link] 23/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Advertise with us
[Link] 24/25
27/08/2025, 10:13 HTML Tables - GeeksforGeeks
Company Explore
About Us POTD
Legal Job-A-Thon
Privacy Policy Connect
Careers Community
Contact Us Videos
Corporate Solution Blogs
Campus Training Program Nation Skill Up
Tutorials Courses
Programming Languages IBM Certification
DSA DSA and Placements
Web Technology Web Development
AI, ML & Data Science Data Science
DevOps Programming Languages
CS Core Subjects DevOps & Cloud
Interview Preparation GATE
GATE Trending Technologies
School Subjects
Software and Tools
Offline Centers Preparation Corner
Noida Aptitude
Bengaluru Puzzles
Pune GfG 160
Hyderabad DSA 360
Patna System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
[Link] 25/25