Here is some example code:
<!DOCTYPE html>
<html>
<body>
<h4>Creating a table with nested tables:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>
</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
wuut
</td>
</tr>
<tr>
<td>
test1
</td>
<td>
wuut1
</td>
</tr>
<tr>
<td>
test2
</td>
<td>
wuut2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<style>
table {
border-collapse: collapse;
}
</style>
If you want to see how this code looks, you can paste it here.
The issue I'm facing is that when tables are inside each other, the borders appear layered in the bottom right corner which doesn't look good.
I have tried using CSS:
border-collapse: collapse;
However, this just removed cellspacing for borders.
I am aiming for a cleaner look without the extra layers of border. One way to achieve this is by using colspan and rowspan attributes but that can make the code messy.
<!DOCTYPE html>
<html>
<body>
<h4>Table with Rowspan and Colspan Attributes:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td colspan="3"> </td>
</tr>
<tr>
<td rowspan="3">400</td>
<td rowspan="3">500</td>
<td rowspan="3">test</td>
<td>test</td>
<td>wuut</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>wuut1</td>
<td>wuut2</td>
</tr>
</table>
</body>
</html>