Creating HTML Tables (Tutorial With Examples)

Creating HTML Tables (Tutorial With Examples)

6 mins read61.4K Views Comment
Updated on Jun 21, 2024 15:46 IST

Have you ever wondered how to organize data neatly on your website? HTML tables are the answer! They help you present information in rows and columns, making it easy to read and understand. This tutorial will guide you through creating and customizing HTML tables with clear examples. Let's understand more!

2022_04_What-is.jpg

Tables are a great way to present data visually. Tables allow us to display large amounts of data in a structured way (rows and columns) that is easy to read and understand. In this blog, we will learn about HTML tables.

You will understand the basics of HTML tables, such as rows, cells, adding captions, and making cells span multiple columns and rows. You will also learn how to add padding and background color in HTML tables.

Explore Popular HTML Courses

Table of Contents

What is an HTML Table?

A table in HTML refers to the arrangement of data in rows and columns. Using tables, we can display data, such as products and their prices; employees, their date of joining and salaries; or flights, their ticket prices, and departure times.

Check out: HTML Heading and Paragraph Tags Explained With Examples

Table Tag in HTML

Table tag in HTML, is used to display data in tabular format (i.e. in row-column format). These table tags manages the layout of the page (i.e. Header, Body Content etc.).

To create a table in HTML, you will need to define the table with the <table> tag. The <table> tag is the table container specifying where the table will begin and where it ends.

You can add a table row with the <tr> tag. We will need to use the <th> tag to add a table header. A table cell or data can be added using the <td> tag.

Common HTML Table Tags

HTML Table Tag Description
<table> defines a table
<tr> represents rows
<td> to create data cells
<th> to add table headings
<caption> used to insert captions

Now, let us understand how to create tables in HTML.

Explore free HTML courses

Explore the world of HTML/CSS with online courses from leading colleges. Enroll now to advance your career in web development.

HTML Table Syntax

Here is the syntax to create a table with two rows and two columns:


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
</body>
</html>
Copy code

Output:

2022_04_HTML-Table-Syntax.jpg

If you want to add another column – Column 3, you can add table data <td> element inside each of the table rows <tr> elements:


 
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr>
</table>
</body>
</html>
Copy code

Now, again save your results in notepad using the .html extension and check them in your browser.

Output:

2022_04_HTML-Table-with-3-Columns.jpg

Adding Border to an HTML Table

By default, HTM tables do not have a border. We can set the border using the CSS border property. Let’s look at an example to add a 1-pixel border to the HTML table.

Example:


 
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr>
</table>
</body>
</html>
Copy code

Output:

2022_04_HTML-Table-with-Border.jpg

Adding Collapsed Borders to an HTML Table

The borders around the cells and the table are separated from each other, by default. We can use the CSS border-collapse property to add a collapsed border in HTML.

Also, by default, the text inside the <th> elements is aligned horizontally center and displayed in bold font. We can change the default alignment using the CSS text-align property.

Syntax:


 
<pre class="html5" style="font-family:monospace">
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
}
</pre class="html5" style="font-family:monospace">
Copy code

Let’s check out the below example to collapse the table borders and align the table header text to left.

Example:


 
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr>
</table>
</body>
</html>
Copy code

 Output:

2022_04_Collapse-Table.jpg

Adding Padding to a Table

To add more space to the table cells, we can use the CSS padding property.

Here is the syntax to add a 1-pixel border to the table and 20-pixels of padding.


 
<pre class="html5" style="font-family:monospace">
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
</pre class="html5" style="font-family:monospace">
Copy code

Example:


 
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr>
</table>
</body>
</html>
Copy code

Output:

2022_04_HTML-Padding.jpg

Also Read:

10 Best HTML Editors for 2024
10 Best HTML Editors for 2024
Have you ever wondered which HTML editor best suits your coding needs in 2024? Choosing the right tool is crucial in the ever-evolving landscape of web development. Let us read...read more
Basic Structure of an HTML Document
Basic Structure of an HTML Document
In this blog, you will learn how an HTML page is structured. We will cover the essential elements required to create an HTML document.
Top Features of HTML5 With Examples
Top Features of HTML5 With Examples
HTML5 is the latest version of Hypertext Markup Language, used for structuring content on the web. It introduces new elements, multimedia support, and improved semantics, making it essential for modern...read more
 

Spanning Multiple Rows and Columns

With the rowspan and colspan attributes, we can make table rows and columns extend across multiple other rows and columns. In simple words, we can merge two or more rows into a single row; or two or more columns into a single column using the rowspan and colspan attributes respectively.

Now, let’s check out an example to see how rowspan and colspan work:

Rowspan Example:


 
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<td>James</td>
</tr>
<tr>
<th rowspan="2">Subjects</th>
<td>English</td>
</tr>
<tr>
<td>Science</td>
</tr>
</table>
</body>
</html
Copy code

Output:

2022_04_Rowspan-in-HTML.jpg

Colspan Example:


 
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<td>James</td>
</tr>
<tr>
<th rowspan="2">Subjects</th>
<td>English</td>
</tr>
<tr>
<td>Science</td>
</tr>
</table>
</body>
</html>
Copy code

Output:

2022_04_Colspan-in-HTML.jpg

Adding Captions to Tables

We can use the <caption> element to add a caption or title to our table. The <caption> element should be present after the opening <table> tag.

By default, the caption is displayed at the top of the table. We can change its placement using the CSS caption-side property.

Example to add a caption to a table:


 
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Employee Data</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr> </table>
</body>
</html>
Copy code

Output:

2022_04_HTML-Table-Caption.jpg

Adding a Background Color to a Table

We can add a background to an HTML table using the background-color option.

Example to show how to add color to an HTML table:


 
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
table {
width: 100%;
background-color: #00ffbb;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Employee Data</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr> </table>
</body>
</html>
Copy code

Output:

2022_04_Background-color-in-HTML-table.jpg

Conclusion

In this blog, we covered how to create tables in HTML documents using using the basic HTML tags, such as <table>,<tr>, and <td>.

If you are keen to learn more about HTML5 and are looking for the best HTML courses to start your journey, then you can explore popular HTML courses online here.

About the Author

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio