Tables in HTML

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>

Tables in HTML with Examples

Define an HTML Table

An Html table is made up of table cells that are enclosed within rows and columns.

Define an HTML Table

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.

HTML Table Example

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 in HTML

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.

Table Rows in HTML

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.

Tables in HTML with Examples

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.

Table Headers in HTML

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.

Leave a Reply

Your email address will not be published.