IIC 1: Lists and Tables

HTML has two great structures for displaying data- lists, and tables. The first of the two, a list, is just like something you'd jot down on paper- a grocery list, or a chore list, or a mission list. You can have either a numbered (ordered) or bulleted (unordered) list.

Code Result
<ol>
<li>Play Mission</li>
<li>Email Commander</li>
<li>Get Medals</li>
</ol>
  1. Play Mission
  2. Email Commander
  3. Get Medals
<ul>
<li>Oranges</li>
<li>Bananas</li>
<li>Dog food</li>
</ul>
  • Oranges
  • Bananas
  • Dog Food

Tables are the best way to display data, but can be a little tricky at first to understand. The first tag, which wraps around all tables, is the <table></table>. Inside of the table tags is a structure of <tr></tr> and <td></td> tags. The tr specifies a row, while the td specifies a row cell. In the heierarchy, tds are inside of trs.
Code Result
<table border="1">
<tr>
<td>Left cell!</td>
<td>Right cell!</td>
</tr>
<tr>
<td colspan="2">This cell stretches across two columns!</td>
</tr>
<tr>
<td>Left cell!</td>
<td>Right cell!</td>
</tr>
</table>
Left cell! Right cell!
This cell stretches across two columns!
Left cell! Right cell!