Creating HTML Tables (Tutorial With Examples)
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!
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
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
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>
Output:
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>
Now, again save your results in notepad using the .html extension and check them in your browser.
Output:
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>
Output:
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">
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>
Output:
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">
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>
Output:
Also Read:
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
Output:
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>
Output:
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>
Output:
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>
Output:
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.
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
Top Picks & New Arrivals
