Lists & Tables

Unordered lists use <ul> with <li> items. Bullets show by default. Good for steps with no fixed order — features, shopping items, hobbies.

HTML Lists — unordered (ul)

Unordered lists use <ul> with <li> items. Bullets show by default. Good for steps with no fixed order — features, shopping items, hobbies.

Real-life example: A ul list is like a grocery list on your phone — items in any order, each with a bullet dot.

Unordered list

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

HTML Lists — ordered (ol)

Ordered lists use <ol> with numbered <li> items. Use for steps, rankings, or recipes where order matters.

Real-life example: An ol list is like exam instructions — Step 1, Step 2, Step 3. Order is important.

Ordered list

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
  <li>Write HTML and save</li>
  <li>Open in browser</li>
</ol>

HTML Lists — description (dl)

Description lists use <dl>, <dt> (term), and <dd> (definition). Good for glossaries and FAQ-style content.

Real-life example: dl is like a dictionary page — word on the left (dt), meaning below (dd).

Description list

<dl>
  <dt>HTML</dt>
  <dd>Structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Style and layout</dd>
</dl>

HTML Tables — basics

Tables use <table>, <tr> (row), <th> (header cell), and <td> (data cell). Use tables for real tabular data — not for whole page layout.

Real-life example: A table is like the timetable on your classroom wall — rows for periods, columns for days.

Simple table

<table border="1">
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Riya</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Aarav</td>
    <td>88</td>
  </tr>
</table>

caption, thead, and tbody

<caption> gives the table a title. <thead> groups header rows. <tbody> groups body rows. This structure helps screen readers and styling.

Real-life example: caption is the title "Monthly Sales" on a shop ledger. thead is the column names row. tbody is all the daily entries.

Structured table

<table>
  <caption>Class Marks — March</caption>
  <thead>
    <tr>
      <th>Student</th>
      <th>Math</th>
      <th>English</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Priya</td>
      <td>85</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

colspan and rowspan

colspan merges cells across columns. rowspan merges cells across rows. Add the number on <td> or <th>.

Real-life example: colspan is like one big merged cell in an Excel sheet for a heading that covers two columns.

Tip: For mobile-friendly data tables, keep columns few or scroll horizontally with CSS later.

Merged cells

<table border="1">
  <tr>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>hello@rishtaara.com</td>
  </tr>
  <tr>
    <td rowspan="2">Phone</td>
    <td>Home: 123456</td>
  </tr>
  <tr>
    <td>Mobile: 987654</td>
  </tr>
</table>