Home Lecture 2 Lecture 4 Lecture 5 Lecture 6

List & Tables

Lists & Types of Lists in HTML

    1. Ordered List (<ol>)

    Displays items with numbers or alphabets.

    <ol>
      <li>Apple</li>
      <li>Mango</li>
      <li>Banana</li>
    </ol>
      
    Output:
    1. Apple
    2. Mango
    3. Banana

    2. Unordered List (<ul>)

    Displays items with bullet points.

    <ul>
      <li>Car</li>
      <li>Bike</li>
      <li>Bus</li>
    </ul>
      
    Output:

    3. Description List (<dl>)

    Used to show terms and their descriptions.

    <dl>
      <dt>HTML</dt>
      <dd>- Hyper Text Markup Language</dd>
      <dt>CSS</dt>
      <dd>- Cascading Style Sheets</dd>
    </dl>
      
    Output:
    HTML
    - Hyper Text Markup Language
    CSS
    - Cascading Style Sheets

Lists Examples

  1. Country List Example (with Tags)

    <h1>Country List</h1>
    <ul>
        <li>India</li>
        <li>USA</li>
        <li>England</li>
    </ul>
      

    Output:

    Country List

  2. Nested Country List Example (with Tags)

    <h1>Country List</h1>
    <ul>
        <li>India
            <ul>
                <li>Delhi</li>
                <li>Mumbai</li>
                <li>Goa</li>
            </ul>
        </li>
        <li>USA
            <ul>
                <li>California</li>
                <li>Texas</li>
            </ul>
        </li>
        <li>England
            <ul>
                <li>London</li>
                <li>Oval</li>
                <li>Yorkshire</li>
            </ul>
        </li>
    </ul>
      

    Output:

    Country List

  3. Nested Country and Cities List Example (with Tags)

    <h1>Country List</h1>
    <ul>
        <li>India
            <ul>
                <li>Delhi
                    <ol>
                        <li>Dwarka</li>
                        <li>Vikaspuri</li>
                    </ol>
                </li>
                <li>Mumbai</li>
                <li>Goa</li>
            </ul>
        </li>
        <li>USA
            <ul>
                <li>California</li>
                <li>Texas
                    <ol>
                        <li>Houston</li>
                        <li>Austin</li>
                        <li>Dallas</li>
                    </ol>
                </li>
            </ul>
        </li>
        <li>England
            <ul>
                <li>London</li>
                <li>Oval</li>
                <li>Yorkshire</li>
            </ul>
        </li>
    </ul>
      

    Output:

    Country List

  4. Nested Unordered List Example (with Tags)

    <h1>Nested Unordered List</h1>
    <p>GeeksforGeeks courses list:</p>
    <ul>
        <li>DSA
            <ul>
                <li>Array</li>
                <li>Linked List</li>
                <li>Stack</li>
                <li>Queue</li>
            </ul>
        </li>
        <li>Web Technologies
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>Javascript</li>
            </ul>
        </li>
        <li>Aptitude</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
      

    Output:

    Nested Unordered List

    GeeksforGeeks courses list:

  5. Daily Meal Plan Example (with Tags)

    <h1>Daily Meal Plan</h1>
    <ol>
        <li><h2>Breakfast</h2>
            <ul>
                <li>Main
                    <ul>
                        <li>Maple</li>
                        <li>Fresh</li>
                        <li>Whipped</li>
                    </ul>
                </li>
                <li>Side</li>
                <li>Dinner</li>
            </ul>
        </li>
        <li><h2>Lunch</h2>
            <ul>
                <li>Main
                    <ol>
                        <li>Start</li>
                        <li>Add</li>
                        <li>Plain</li>
                        <li>Finish</li>
                    </ol>
                </li>
                <li>Side</li>
                <li>Beverage</li>
            </ul>
        </li>
        <li><h2>Dinner</h2>
            <ul>
                <li>Appetite</li>
                <li>Main Course
                    <ol>
                        <li>First</li>
                        <li>Nest</li>
                        <li>Finally</li>
                    </ol>
                </li>
                <li>Dinner</li>
            </ul>
        </li>
    </ol>
      

    Output:

    Daily Meal Plan

    1. Breakfast

      • Main
        • Maple
        • Fresh
        • Whipped
      • Side
      • Dinner
    2. Lunch

      • Main
        1. Start
        2. Add
        3. Plain
        4. Finish
      • Side
      • Beverage
    3. Dinner

      • Appetite
      • Main Course
        1. First
        2. Nest
        3. Finally
      • Dinner

Tables in HTML

Definition:

Tables in HTML are used to represent data in rows and columns format.

Main Tags:

Optional Tags:

Attributes:

Examples:

  1. Example 1-
                
    Name Role
    Rohit Frontend Developer
    Anuj Backend Developer
    Anjali Fullstack Developer
  2. Example 2-
                
    Item Quantity Price
    Apple 10 $1.00
    Orange 5 $1.50
    Total 15 $2.50
  3. Example 3-
            
    Name Contact Info
    John Doe 12456 john@gmail.com
    Copper 12567 copper@gmail.com
    Paras 13567 paras@gmail.com
  4. Example 4-
                
    Name Contact Info
    John Doe 12456 john@gmail.com
    Copper 12567 copper@gmail.com
    Paras 13567 paras@gmail.com
  5. Example 5-
                
    Column1 Column2 Column3
    Row1 Cell1 Row1 Cell2 Row1 Cell3
    Row2 Cell2 Row3 Cell3
    Row3 Cell1
  6. Example 6-
                
    Level 1 Level 2 Level 3 Level 4 Level 5
    System System Apps System Env App Test Foo
    App memory
    App test Bar
    System env 2 App memory
    System memory Memory Full Foo
    Apes Test Bar
  7. Example 7-
                
    Time Table
    Hours mon tues wed thurs fri
    Science Maths Science Maths Arts
    Science Maths Science Maths Arts
    Lunch
    Science Maths Science Maths Arts
    Science Maths Science Maths Arts