I'm having incredible trouble using nested tables and lists in HTML. I swear I am constructing the HTML code correctly, using Sublime to help me make sure that all tags and end tags line up with each other and with proper indentation to keep track of everything. However, my output is FAR from what I would expect. I suspect that there may be issues when you try to nest tables within each other, especially when you try to have a table which contains an unordered list of tables.
Here are the main issues:
-Having normal bullets for the unordered lists makes the bullets appear in random areas, it makes no sense. However, even after adding style="list-style-type:none" to my ul tags so that I don't even have to worry about seeing the bullets, I still see the bullets for each list item after the first one in the list. This is an issue for both the outer unordered list and the inner one.
-The second set of "href" and "Hosts" that you see at the very bottom should be inside the "items" table because both tables are within the that is in the same as . So why is it outside of everything, including being outside the "items" table?
Is there a tag that I am missing?!
Here's my HTML code, and you can Run it on here to see what the output looks like:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1.1</td>
</tr>
<tr>
<th>Hosts1.1</th>
<td>
<table border="1">
<tr>
<th>myAge</th>
<td>400</td>
</tr>
<tr>
<th>favColor</th>
<td>Red</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1.2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>hello1.2</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>Here's a shorter code that still has the same issues but is easier to read. Note that the second "href" and "Hosts" table doesnt get pushed out of "items" with this shorter code.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>
ul– also not allowed as a child oftable, it would have to be inside a table cell as well. // What you are actually trying to achieve here is pretty unclear. You should only use tables if you actually have “tabular” data to present here (hard to tell if that’s the case) – you should not use them purely for layout purposes, that would be a technique from the last millennium.