What are Table Attributes and Their Advantages in HTML?

Abstract:

HTML (Hypertext Markup Language) has many tags and attributes to use for developing a webpage. Table attributes are one of them. Table attributes are used to create tables on web pages.  The table consists of data that is easy to summarize information. Let's Proceed further with a smile!

Scope:

This article will include more about table attributes in HTML and its advantages. With the help of tables, we have many advantages like we visualize our data and easily understand our data. We had some tags and styles for table tags. By the end of the article, you will be able to create tables for web pages. Let’s see more on this!

Introduction to Table attributes in HTML:

Table attributes in HTML are defined by using <table> tag and it has some tags like <tr>, <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>, <colgroup>, <col>… which are used to fill data into the tables on our web pages. Tables allow developers to arrange data into rows and columns.

Let us understand table attributes and the importance of them using more and more examples.

Syntax:

<table>
-----------
-----------
</table>

We use tags like <tr>, <th> inside table tags.

• <tr> is used for inserting a table row.
• <th> is used as headers.
• <td> is used to insert data in that particular row.

Example 1: (including <tr>, <th>, <td>)

<table>

  <tr>

    <th>Name</th>

    <th>Roll No.</th>

    <th>Marks</th>

  </tr>

  <tr>

    <td>Ram</td>

    <td>19-555</td>

    <td>90</td>

  </tr>

  <tr>

    <td>David</td>

    <td>19-543</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Rita</td>

    <td>19-678</td>

    <td>98</td>

  </tr>

</table>

OUTPUT:

**
**

For making it more stylish we use styling attributes and tags like <caption>, adding borders, background…

Example 2: (including <tr>, <th>, <td> and also using border attribute)

<table border= “1”>

  <tr>

    <th>Name</th>

    <th>Roll No.</th>

    <th>Marks</th>

  </tr>

  <tr>

    <td>Ram</td>

    <td>19-555</td>

    <td>90</td>

  </tr>

  <tr>

    <td>David</td>

    <td>19-543</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Rita</td>

    <td>19-678</td>

    <td>98</td>

  </tr>

</table>

OUTPUT:

We can also use this with CSS Property.

table, td, th {
Border: 1px solid;

} 

We get the same output as above.

Example 3: (including <tr>, <th>, <td>, <caption> and also using border attribute)

<table border="1">

  <caption>

    Student Marks information

  </caption>

  <tr>

    <th>Name</th>

    <th>Roll No.</th>

    <th>Marks</th>

  </tr>

  <tr>

    <td>Ram</td>

    <td>19-555</td>

    <td>90</td>

  </tr>

  <tr>

    <td>David</td>

    <td>19-543</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Rita</td>

    <td>19-678</td>

    <td>98</td>

  </tr>

</table>

<style>

caption {

  border: 2px solid;

  padding: 0.7rem;

}

</style>

OUTPUT:

Example 4: (adding background color to any 2 row)

<table border="1">

  <caption>

    Student Marks information

  </caption>

  <tr>

    <th>Name</th>

    <th>Roll No.</th>

    <th>Marks</th>

  </tr>

  <tr bgcolor= lightgray>

    <td>Ram</td>

    <td>19-555</td>

    <td>90</td>

  </tr>

  <tr>

    <td>David</td>

    <td>19-543</td>

    <td>95</td>

  </tr>

  <tr bgcolor= lightgray>

    <td>Rita</td>

    <td>19-678</td>

    <td>98</td>

  </tr>

</table>

<style>

caption {

  border: 2px solid;

  padding: 0.7rem;

}

</style>

OUTPUT:

Example 4: (Even and Odd cell Styling of HTML Table)

\
<table border="1">

  <caption>

    Student Marks information

  </caption>

  <tr>

    <th>Name</th>

    <th>Roll No.</th>

    <th>Marks</th>

  </tr>

  <tr>

    <td>Ram</td>

    <td>19-555</td>

    <td>90</td>

  </tr>

  <tr>

    <td>David</td>

    <td>19-543</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Rita</td>

    <td>19-678</td>

    <td>98</td>

  </tr>

</table>

<style>

td, caption, th {

  padding: 0.7rem;

}

table, td, th {

  border: 1px solid green;

  margin: 5rem;

}

tr:nth-child(even) {

  background-color: rgb(0, 255, 255);

}

tr:nth-child(odd) {

  background-color: rgba(113, 112, 0, 0.418);

}

th {

  color: white;

  background-color: lightgray;

}

caption {

  border: 2px solid;

  background-color: lightblue;

}

</style>

OUTPUT:

Table Attributes

Advantages of table attributes in HTML

• Tables are used to get information quickly and easily.
• Tables are used to provide efficient readability in displaying rows and columns.
• Table reduces the complexity of searching any information and represents the visual information in easy format.
• We can add the information very quickly and easily in tables when new data is given.

Conclusion

Now, we are at the end of the article, here we learned table attributes in HTML and Styling of tables using Styling CSS attributes.

To learn more about HTML table attributes visit Scaler Topics

Author Bio:

Vaishnavi Yadafrom GNITS, Hyderabad currently pursuing an engineering 3rd-year specialization in Computer Science and Engineering. I am passionate to write technical blogs with expertise in HTML, CSS, Python, JS (beginner), C, etc, also I write some blogs in Medium