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:
• Car
• Bike
• Bus

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

   • India
   • USA
   • England

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

   • India
     • Delhi
     • Mumbai
     • Goa
   • USA
     • California
     • Texas
   • England
     • London
     • Oval
     • Yorkshire

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

   • India
     • Delhi
       1. Dwarka
       2. Vikaspuri
     • Mumbai
     • Goa
   • USA
     • California
     • Texas
       1. Houston
       2. Austin
       3. Dallas
   • England
     • London
     • Oval
     • Yorkshire

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:

   • DSA
     • Array
     • Linked List
     • Stack
     • Queue
   • Web Technologies
     • HTML
     • CSS
     • Javascript
   • Aptitude
   • Gate
   • Placement

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:

• <table> → Defines the table.
• <tr> → Table row.
• <td> → Table data (cell).
• <th> → Table header (bold + centered by default).

Optional Tags:

• <caption> → Title of the table.
• <thead> → Groups header rows.
• <tbody> → Groups body rows.
• <tfoot> → Groups footer rows.

Attributes:

• border → Adds border to table.
• cellpadding → Space inside a cell.
• cellspacing → Space between cells.
• colspan → Merges columns.
• rowspan → Merges rows.

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