Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
HTML5 validity of nested tables
The HTML5 validator considers nested tables valid when properly structured. Here's how to create valid nested table markup in HTML5.
Valid Nested Table Structure
A nested table must be placed inside a <td> or <th> element of the parent table. The validator considers the following structure valid:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nested Table Example</title>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>Parent Table Cell</td>
<td>
<table border="1">
<tbody>
<tr>
<td>Nested</td>
<td>Table</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Key Validation Rules
For nested tables to pass HTML5 validation, follow these requirements:
- Nested tables must be placed inside
<td>or<th>elements - Each table should have proper
<tbody>structure - All table rows must be contained within
<tr>elements - Table cells must use
<td>for data or<th>for headers
Invalid Nested Table Structure
The following structure would be invalid and fail validation:
<table>
<tr>
<td>Cell content</td>
</tr>
<table> <!-- Invalid: nested table not inside a cell -->
<tr>
<td>Invalid nesting</td>
</tr>
</table>
</table>
Modern Alternative: CSS Grid
While nested tables are valid HTML5, consider using CSS Grid for complex layouts:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Alternative</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
border: 1px solid black;
}
.grid-item {
border: 1px solid gray;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Parent Section</div>
<div class="grid-item">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 5px;">
<div style="border: 1px solid lightgray; padding: 5px;">Nested</div>
<div style="border: 1px solid lightgray; padding: 5px;">Grid</div>
</div>
</div>
</div>
</body>
</html>
Conclusion
Nested tables are valid in HTML5 when properly placed inside table cells. However, consider modern CSS layout methods like Grid or Flexbox for better semantic structure and maintainability.
Updated on: 2026-03-15T23:18:59+05:30
217 Views
Advertisements