HTML Table Now In An Easy And Efficient Explanation

In today’s Article we will Define a HTML Table, we’ll also see what <tr>, <td> and <th> are and when to use them. HTML tables allow web developers to arrange data into rows and columns.

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information.

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag, each table header is defined with a <th> tag and each table data/cell is defined with a <td> tag.

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

Syntax for a HTML Table:

<table>
</table>

First we use the <table> tag to define the table

<table>
   <tr>
      <th>Name</th>
   </tr>
</table>

Next we use <tr> tag to create a row in which we add the Table Heading <th>

<table>
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Score</th>
   </tr>
      
   <tr>

   </tr>

   <tr>

   </tr>

</table>

Now let’s add the remaining rows using the <tr> and headings using <th>

<table>
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Score</th>
   </tr>

   <tr>
      <td>Sam</td>
      <td>32</td>
      <td>89</td>
   </tr>

   <tr>
      <td>John</td>
      <td>47</td>
      <td>91</td>
   </tr>

</table>

In order to add data to the row, we use the <td> tag

Now, let’s see how our html turned up

Let’s add some CSS Styling

Styles:

<table style="border-width: 5px; border-color: black">
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Score</th>
   </tr>

   <tr>
      <td>Sam</td>
      <td>32</td>
      <td>89</td>
   </tr>

   <tr>
      <td>John</td>
      <td>47</td>
      <td>91</td>
   </tr>

</table>

Now, we’ve given a border of width 1px and color grey to the <table> tag, lets also give a padding of 5px to the <th> and <td> tags

You can add as many styles as you want, but in this post we’ve showed to how to define a html table with some CSS Styles

Conclusion:

In today’s post, we’ve discussed how to Define a HTML Table, we also saw what <tr>, <td> and <th> are and when to use them. If you are on your way to becoming a Web-developer, you might find our site really helpful. Hit this link for more HTML related posts
Check it out, it’s Simply the Best Code.