Back to: HTML Tutorials
Tables in HTML with Examples
In this article, I am going to discuss Tables in HTML with Examples. Please read our previous article where we discussed Layout in HTML with Examples. At the end of this article, you will learn everything about HTML Tables with Examples.
HTML Tables
Html tables are used to organize data into rows and columns. To display data in tabular format HTML <table> tag is used. Inside the table element the <tr> tag is used to define table row and <td> tag is used to define table data. The table header is defined by <th>
Define an HTML Table
An Html table is made up of table cells that are enclosed within rows and columns.
HTML Table Example:
<!DOCTYPE html>
<html>
<body>
<h2>A basic HTML table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Jack Anderson</td>
<td>28</td>
<td>Russia</td>
</tr>
<tr>
<td>Jhonny Ray</td>
<td>33</td>
<td>Australia</td>
</tr>
</table>
</body>
</html>
When you run the above code, you will get the following output in the browser.
Table Cells in HTML
In Html a table cell is defined using a <td> tag where <td> stands for table data. Everything enclosed between <td> and </td> is considered as the content of the table cell. For better understanding, please have a look at the following example.
<!DOCTYPE html>
<html>
<body>
<h2>Table Cell</h2>
<table border="1">
<tr>
<td>Red Bird</td>
<td><img width="100" src="https://cdn.pixabay.com/photo/2020/01/22/06/26/cute-4784544_960_720.png"></td>
<td>
<table border="1">
<tr>
<td>Nested Table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When you run the above code, you will get the following output in the browser.
Table cells are used as a container to store data. They can store all types of data such as text, images, tables, lists, etc.
Table Rows in HTML
In Html a table row is defined using a <tr> tag where <tr> stands for table row. For better understanding, please have a look at the following example.
<!DOCTYPE html>
<html>
<body>
<h2>Table Row</h2>
<table border="1">
<tr>
<th>Animal</th>
<td>Tortoise</td>
<td>Eagle</td>
<td>Elephant</td>
</tr>
<tr>
<th>Lifespan</th>
<td>153 years</td>
<td>55 years</td>
<td>70</td>
</tr>
</table>
</body>
</html>
When you run the above code, you will get the following output in the browser.
In a table, we can have as many rows as we want, as long as the number of cells in each row is the same. Look at the image below, this is how the table will appear if the number of cells is not the same.
Table Headers in HTML
In Html a table header is defined using a <th> tag where <th> stands for table header. For better understanding, please have a look at the following example.
<!DOCTYPE html>
<html>
<body>
<h2>Table Header</h2>
<table border="1">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>John Einstein</td>
<td>14</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Grace Olive</td>
<td>15</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Andy Roberts</td>
<td>15</td>
<td>Fail</td>
</tr>
</table>
</body>
</html>
When you run the above code, you will get the following output in the browser.
By default, the text present inside the <th> elements is bold and centered.
In the next article, I am going to discuss Table Borders in HTML with Examples. Here, in this article, I try to explain Tables in HTML with Examples and I hope you enjoy this HTML Tables with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.