Yes, you can add more data rows to your HTML table by simply adding additional <tr> (table row) elements within the <tbody> section of your table. Here’s an example that demonstrates how to add more data rows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
<!-- Adding more data rows -->
<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
<td>Row 4, Cell 3</td>
</tr>
<tr>
<td>Row 5, Cell 1</td>
<td>Row 5, Cell 2</td>
<td>Row 5, Cell 3</td>
</tr>
<tr>
<td>Row 6, Cell 1</td>
<td>Row 6, Cell 2</td>
<td>Row 6, Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>Explanation:
- Adding Rows: In the example above, additional rows (Row 4, Row 5, and Row 6) have been added by including more
<tr>elements within the<tbody>. - Content: Each new row contains three cells, which can be filled with any data you wish.
You can continue to add as many rows as needed by following the same structure. Just ensure that each row has the same number of cells to maintain the table's structure.
