HTML Quick Revision

Tables

• <table> → Defines a table
• <tr> → Table Row
• <th> → Table Header (bold, centered)
• <td> → Table Data cell
• Nested Table: Place a <table> inside a <td>

Example: Basic Table

<table border="1">
  <tr>
    <th>Name</th> <th>Age</th>
  </tr>
  <tr>
    <td>Priya</td> <td>24</td>
  </tr>
</table>
  

Example: Nested Table

<table border="1">
  <tr>
    <td>
      Outer Cell
      <table border="1">
        <tr><td>Inner 1</td></tr>
        <tr><td>Inner 2</td></tr>
      </table>
    </td>
  </tr>
</table>
  

Lists

• Unordered List: <ul> (bullets)
• Ordered List: <ol> (numbers/letters/roman)
• Description List: <dl> → <dt> (term), <dd> (details)

Example: Unordered List

<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>
  

Example: Ordered List

<ol type="i" start="3">
  <li>HTML</li>
  <li>CSS</li>
</ol>
  

Example: Description List

<dl>
  <dt>Coffee</dt>
  <dd>- 500 gms</dd>
</dl>
  

Example: Nested List

<ol>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ol>
  

List Attributes

• type → marker style (disc, circle, square, 1, A, a, i, I)
• start → starting number/letter
• reversed → descending order

Best Practices

• Use correct list type (semantic + accessibility)
• Lists & Tables can be nested
• Use CSS for styling bullets/numbers

Common Questions

1. How to create nested tables/lists?
2. How to set ordered list in descending order?
3. How to start ordered list from custom number?
4. How to change bullet/number style?
5. What is description list & purpose?

Tables

• <table> → Defines a table
• <tr> → Table Row
• <th> → Table Header (bold, centered)
• <td> → Table Data cell
• Nested Table: Place a <table> inside a <td>

Example: Basic Table

<table border="1">
  <tr>
    <th>Name</th> <th>Age</th>
  </tr>
  <tr>
    <td>Priya</td> <td>24</td>
  </tr>
</table>
  

Example: Nested Table

<table border="1">
  <tr>
    <td>
      Outer Cell
      <table border="1">
        <tr><td>Inner 1</td></tr>
        <tr><td>Inner 2</td></tr>
      </table>
    </td>
  </tr>
</table>
  

Lists

• Unordered List: <ul> (bullets)
• Ordered List: <ol> (numbers/letters/roman)
• Description List: <dl> → <dt> (term), <dd> (details)

Example: Unordered List

<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>
  

Example: Ordered List

<ol type="i" start="3">
  <li>HTML</li>
  <li>CSS</li>
</ol>
  

Example: Description List

<dl>
  <dt>Coffee</dt>
  <dd>- 500 gms</dd>
</dl>
  

Example: Nested List

<ol>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ol>
  

List Attributes

• type → marker style (disc, circle, square, 1, A, a, i, I)
• start → starting number/letter
• reversed → descending order

Best Practices

• Use correct list type (semantic + accessibility)
• Lists & Tables can be nested
• Use CSS for styling bullets/numbers

Common Questions + Answers

1. How to create nested tables/lists?
   Place a <table> or <ul>/<ol> inside a <td> or <li>.
2. How to set ordered list in descending order?
   Use <ol reversed>.
3. How to start ordered list from custom number?
   Use <ol start="5">.
4. How to change bullet/number style?
   Use type attribute or CSS (list-style-type).
5. What is description list & purpose?
   Uses <dl> with <dt> (term) + <dd> (definition). Useful for glossary or key-value data.

Tag Summary Table