HTML Table Tutorial
Tables in HTML is very importat in html it play a crucial role in organizing and preparing structured data on a webpage.
Below are the details discription about how is importance Tables in webpages.
Organizing Data: Tables provide a clear and systematic way to show information such as statistics, schedules, or comparisons of the data. Table make large datasets in very easier to read and analyze the report. Tables use Rows and Columns to structure data. Table are essential for showing reports, form, products specifications or pricing table in a professional and very organized format.
In this article Below are the example of the Table format..
You can easily learn and read it and practice it at your home, how to make table in HTML, Table code in HTML.
Example:
————————————- EXAMPLE ————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 60%;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
text-align: center;
padding: 8px;
}
th {
background-color: #f4f4f4;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1 style=”text-align: center;”>Employee Details</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Engineering</td>
<td>$80,000</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Marketing</td>
<td>$70,000</td>
</tr>
<tr>
<td>3</td>
<td>Mike Johnson</td>
<td>Finance</td>
<td>$85,000</td>
</tr>
</tbody>
</table>
</body>
</html>
When this code is run in a browser, it will display a table with the following details:
OUTPUT RESULT
This table is styled with borders, alternating row colors, and centered text for a clean and professional look.