HTML nested tables and list resulted unexpected output -
i'm having incredible trouble using nested tables , lists in html. swear constructing html code correctly, using sublime me make sure tags , end tags line each other , proper indentation keep track of everything. however, output far expect. suspect there may issues when try nest tables within each other, when try have table contains unordered list of tables.
here main issues:
-having normal bullets unordered lists makes bullets appear in random areas, makes no sense. however, after adding style="list-style-type:none" ul tags don't have worry seeing bullets, still see bullets each list item after first 1 in list. issue both outer unordered list , inner one.
-the second set of "href" , "hosts" see @ bottom should inside "items" table because both tables within in same . why outside of everything, including being outside "items" table?
is there tag missing?!
here's html code, , can run on here see 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 shorter code still has same issues easier read. note second "href" , "hosts" table doesnt pushed out of "items" 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>
you have correctly apply inline css li items, please see code below. why not try adding class apply css li items , try rewrite code looks pyramid of tables, read cbroe's comment above.
add class ul tag 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>
Comments
Post a Comment