1

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
OMGitzMidgar
  • 689
  • 2
  • 10
  • 28
  • 1
    http://validator.w3.org/nu/ – Quentin Jul 11 '15 at 08:48
  • 1
    Having a table as a direct child element of a table is invalid HTML – you need at least a table row and a table cell first, and then you can put the “next” table into that table cell. And the same goes for the `ul` – also not allowed as a child of `table`, 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. – CBroe Jul 11 '15 at 09:00
  • I understand I shouldn't use the tables purely for layout purposes, and i understand that this output definitely does not look pretty :) This comment explains my issue and solves it perfectly though. Using your comment I was able to find all the problems and fix them in my code. Thank you! – OMGitzMidgar Jul 11 '15 at 15:57

1 Answers1

1

You have to correctly apply the inline css to li items, please see the code below. Why not try adding a class then apply some css to your li items and try to rewrite your code it looks like a pyramid of tables, read Cbroe's comment above.

Add class to your ul tag for example: 

<ul class="mylist">
 <li></li>
</ul>

    <style type="text/css">
        ul.mylist li {
          list-style-type:none
          }
    </style>


<!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 class="mylist">
                                <li style="list-style-type:none">
                                    <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 style="list-style-type:none">
                                    <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>
Brian Luna
  • 682
  • 1
  • 8
  • 28