You are currently viewing Table in HTML | Web Development

Table in HTML | Web Development

Table in HTML: the <table> tag is used to display the given data in tabular form. So that the data can be stored in an organized manner and also becomes easy to read and understand.

The HTML table is defined by <table> tag and each row in it is defined by <tr> tag in which the table header is defined by <th> tag and the table data or table cell is defined by <td> tag.

By default, the text in < th > tag is bold and centered and in < td > tag is regular and left-aligned.

HTML tables can also be used to make image galleries by adding images in the <td> tag in place of text.

let’s take an example of a simple table:–

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Avdhesh</td>
    <td>Sharma</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Sagar</td>
    <td>Paliwal</td>
    <td>20</td>
  </tr>
</table>

</body>
</html>
  • Adding a border to our HTML Table

Now, Let’s add a border to our table for doing so we have to use the CSS border property:–

table, th, td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Avdhesh</td>
    <td>Sharma</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Sagar</td>
    <td>Paliwal</td>
    <td>20</td>
  </tr>
</table>

</body>
</html>

Hope this article will guide you to recognize all about the HTML table that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.

Form in HTML

Form in HTML – II

Inline and Block elements | Web Development

This Post Has 3 Comments

Leave a Reply