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

Tags	Definition
<table> … </table>	Used to define a table.
<tr> … </tr>	Used to define a row in table.
<th> … </th>	Used to define a header cell in table.
<td> … </td>	Used to define a cell in table.
<caption> … </caption>	Used to write a caption.
<table align= “center”> … <table>	Used aligning table to center
<table border= “”> ... </table>	Used to get border to table
<table colspan or rowspan= “”> … </table>	Used for rowspan or colspan in table
<table bgcolor= “”> ... </table>	Used to get bgcolor to cell in table
<table cellpadding= “”> … </table>	Used to get Cell Spacing in table
<table cellspacing= “”> … </table>	Used to get Cell Padding in table
<thead>	Used to group header content in table
<tbody>	Used to group body content in table
<tfoot>	Used to group footer content in table

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