SYP Start Your Path

Tables & Lists

Tables

Tables are for tabular data — rows and columns — not for page layout.

<table>
  <tr>
    <th>Name</th>
    <th>Course</th>
  </tr>
  <tr>
    <td>Riya</td>
    <td>HTML Basics</td>
  </tr>
</table>

For larger tables, use <thead>, <tbody>, <tfoot> to group rows — helps readability and styling.

Lists

Unordered (bullets):

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered (numbered):

<ol>
  <li>Plan the page</li>
  <li>Write the HTML</li>
  <li>Style with CSS</li>
</ol>

Description list (term + description):

<dl>
  <dt>HTML</dt>
  <dd>Defines the structure of a page</dd>
  <dt>CSS</dt>
  <dd>Defines how a page looks</dd>
</dl>

Lists can also be nested inside one another for sub-items.