Table in HTML

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>

http://theudaipurstore.com

This Post Has 3 Comments

Leave a Reply