Tables and Lists

A Quick HTML5 tutorial on how to make and ordered list, an unordered list and a table.

Simple quick video and visual tutorial with HTML showing how to create tables and lists.



This is an example of a normal unordered list:

<ul>
  <li>This is a test</li>
  <li>This is a test</li>
  <li>This is a test</li>
  <li>This is a test</li>
</ul>
  • This is a test
  • This is a test
  • This is a test
  • This is a test

This is an example of a nested unordered list:

Notice the top line of the nested list is <ul style=”padding: 0 0 0 16px;”> – this was a simple inline style change to eliminate the padding after a normal <ul> set-up by this themes style sheet.

<ul>
  <li>This is a test</li>
  <li>This is a test</li>
    <ul style="padding: 0 0 0 16px;">
      <li>This is a test</li>
      <li>This is a test</li> 
      <li>This is a test</li>
      <li>This is a test</li>
    </ul>
  <li>This is a test</li> 
  <li>This is a test</li> 
</ul>
  • This is a test
  • This is a test
    • This is a test
    • This is a test
    • This is a test
    • This is a test
  • This is a test
  • This is a test

This is an example of a table –

<table>
<tr>
<td>Table Test</td>
<td>Table Test</td>
<td>Table Test</td>
</tr>
<tr>
<td>Table Test</td>
<td>Table Test</td>
<td>Table Test</td>
</tr>
</table>
Table Test Table Test Table Test
Table Test Table Test Table Test