Creating Tree-Tables in HTML and CSS

nested-list.html

<ul>
   <li>Jon
      <ul>
         <li>Bob</li>
         <li>Jim</li>
         <li>Dave</li>
      </ul>
   </li>
   <li>Rob</li>
   <li>Matt
      <ul>
         <li>Chris</li>
         <li>Will</li>
      </ul>
   </li>
</ul>

table-list-combo.html

<table>
   <tbody>
   <ul>
      <li>
         <tr>
            <td>Bob</td>
            <td>Picasso</td>
         </tr>
      </li>
      <li>
         <tr>
             <td>Scott</td>
             <td>Duchamp</td>
         </tr>
         <ul>
            <li>
                <tr>
                   <td>Phil</td>
                   <td>Raphael</td>
                </tr>
            </li>
         </ul>
       </li>
   </ul>
   </tbody>
</table>

table.html

<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>First spoken word</th>
         <th>Favourite Artist</th>
      </tr>
   <thead>
   <tbody>
      <tr>
         <td>Bob</td>
         <td>Dadda</td>
         <td>Picasso</td>
      </tr>
      <tr>
         <td>Scott</td>
         <td>Food</td>
         <td>Duchamp</td>
      </tr>
      <tr>
         <td>Phil</td>
         <td>Mamma</td>
         <td>Raphael</td>
      </tr>
   </tbody>
</table>