<!DOCTYPE html>
<html>
<head>
<title>Salary Table</title>
</head>
<body>
<h1>Monthly Salaries</h1>
<!-- A table that displays monthly salaries in Indian rupees -->
<table>
<!-- The table header row, with column labels -->
<tr>
<!-- Use the 'th' tag for column headers -->
<th>Month</th>
<th>Salary (₹)</th>
</tr>
<!-- First data row, with month and salary information -->
<tr>
<!-- Use the 'td' tag for table cells -->
<td>January</td>
<!-- Use the rupee symbol (₹) to denote currency -->
<td>₹50,000</td>
</tr>
<!-- Second data row, with month and salary information -->
<tr>
<!-- Use the 'td' tag for table cells -->
<td>February</td>
<!-- Use the rupee symbol (₹) to denote currency -->
<td>₹45,000</td>
</tr>
<!-- Third data row, with month and salary information -->
<tr>
<!-- Use the 'td' tag for table cells -->
<td>March</td>
<!-- Use the rupee symbol (₹) to denote currency -->
<td>₹52,000</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rowspan and Colspan Example</title>
</head>
<body>
<table>
<!-- Table caption -->
<caption>Fruits and Colors</caption>
<!-- Table header row with column headers -->
<tr>
<th>Fruits</th>
<th colspan="2">Colors</th>
</tr>
<!-- Table body rows with fruit names and color names -->
<tr>
<!-- First row with merged cell for 'Apple' spanning two rows and two separate cells for 'Red' and 'Green' -->
<td rowspan="2">Apple</td>
<td>Red</td>
<td>Green</td>
</tr>
<tr>
<!-- Second row with merged cell for 'Yellow' spanning two columns -->
<td colspan="2">Yellow</td>
</tr>
<tr>
<!-- Third row with 'Grapes' and two separate cells for 'Purple' and 'Green' -->
<td>Grapes</td>
<td>Purple</td>
<td>Green</td>
</tr>
</table>
</body>
</html>
Thead and Tbody
Here's a table that explains the <thead> and <tbody> elements in HTML:
| Element | Description |
|---|---|
<thead> | Defines a set of header rows for a table. It should be used to group the table header content. |
<tbody> | Defines the main content of a table, consisting of a set of rows. |
The <thead> element is typically used to group the table header content, which often includes column headings or titles. This element should be used only once in a table, and should come before any <tbody> or <tfoot> elements.
On the other hand, the <tbody> element defines the main content of a table, consisting of a set of rows. This element can be used multiple times in a table, and should come after any <thead> elements but before any <tfoot> elements.
Using these elements properly helps to create a well-structured and semantically meaningful HTML table.
Thead and Tbody
<!-- Define a table with header and body sections -->
<table>
<!-- Define the table header with column headings -->
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<!-- Define the table body with rows of data -->
<tbody>
<!-- Define a row of data for a person named "Arya" -->
<tr>
<td>Arya</td>
<td>25</td>
<td>Female</td>
</tr>
<!-- Define a row of data for a person named "Ravi" -->
<tr>
<td>Ravi</td>
<td>32</td>
<td>Male</td>
</tr>
<!-- Define a row of data for a person named "Kavya" -->
<tr>
<td>Kavya</td>
<td>42</td>
<td>Female</td>
</tr>
</tbody>
</table>
Contact us for software training, education or development
.png)
0 Comments