In this article, we will give complete information about the table tag of HTML. If you are learning to create a website or want to create a website, then you have come to know about the table tag of HTML. In this article, we will learn:
- What are table tags?
- How and why is it used?
- What are the identifying attributes?
- See a complete example.
- And finally understand how they help in SEO.
What are HTML table tags?
In HTML, when we show any information in the form of a table, then we use table tags. Like a school time table, a list of products, or any other table is the best way to keep any data in order.
In HTML table, we use some special tags in block time, like:
- <table> - to download the entire table
- <tr> - for a row of the table
- <th> - for table title
- <td> - for table data
Why and how table tags are used?
Table tags are used when we see information in columns and rows of information. These websites are broken down into secret and confidential, it becomes easier for investors to read the information.
How to use?
- First start with <table> tag.
- Then use <tr> tag for every row.
- If it is heading then use <th> tag and if it is general data then use <td> tag.
Important Properties of Table Tag
To make HTML Table better we use some properties:
HTML Table Attributes
| Attribute | Work |
|---|---|
| border | To set the border line of the table |
| cellpadding | To set the padding inside the cell |
| cellspacing | To set the distance between two cells |
| colspan | To how many columns a cell is spanned |
| rowspan | To how many rows a cell is spanned |
| width | To set the width of the table |
| height | To set the width of the table |
| align | To set the table to left, center or right |
| bgcolor | To set the background color of the table or cell |
Simple Example of Table Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled HTML Table with Class</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 40px;
}
h2 {
text-align: center;
color: #333;
}
.student-table {
border-collapse: collapse;
width: 80%;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.student-table th,
.student-table td {
text-align: center;
padding: 12px;
border-bottom: 1px solid #ddd;
}
.student-table th {
background-color: #4CAF50;
color: white;
}
.student-table tr:nth-child(even) {
background-color: #f2f2f2;
}
.student-table tr:hover {
background-color: #e6f7ff;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<table class="student-table">
<tr>
<th>Name</th>
<th>English Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>Rahul</td>
<td>Liam</td>
<td>10th</td>
<td>85</td>
</tr>
<tr>
<td>Sonam</td>
<td>Aria</td>
<td>10th</td>
<td>90</td>
</tr>
<tr>
<td>Amit</td>
<td>Ethan</td>
<td>9th</td>
<td>78</td>
</tr>
<tr>
<td>Pooja</td>
<td>Elena</td>
<td>9th</td>
<td>88</td>
</tr>
<tr>
<td>Vikram</td>
<td>Leo</td>
<td>11th</td>
<td>92</td>
</tr>
<tr>
<td>Neha</td>
<td>Chloe</td>
<td>11th</td>
<td>89</td>
</tr>
</table>
</body>
</html>
How do table tags help in SEO?
SEO (Search Engine Optimization) means getting a website to rank higher in search engines like Google. Table tags also help in:
- Structured content - When data is in a table, it's easier for search engines to load.
- User experience - Users spend more time on a website if they can find information quickly and easily.
- Featured snippet - Sometimes Google shows a table directly in the results.
Tables are not just useful for design, but also for SEO.
Conclusion
Using table tags in HTML, we can learn any information in beautiful and safe ways. Tags like <table>, <tr>, <th> and <td> are very recognizable for a website, especially when we need to show data in order. Also, with the help of some of these features, the table can be made even better. This not only makes the website attractive but also benefits SEO.