Lecture 3

Lecture 3: Lists and Tables

In HTML, a list is a way to group related items together. Lists are used to present information clearly, such as steps in a process, features, or a collection of items.

Nested Lists

In HTML, lists can be placed inside other lists. This is called a nested list. You can nest <ul> (unordered lists) or <ol> (ordered lists).

1. Nested Unordered List


  Fruits
    
      Apple
      Banana
      Orange
    
  
  Vegetables
  Dairy

Sample Code Example:

2. Nested Ordered List


  Step 1
    
      Turn on computer
      Log in
    
  
  Step 2
  Step 3

Sample Code Example:

3. Mixing Ordered and Unordered


  Frontend
    
      HTML
      CSS
      JavaScript
    
  
  Backend

Sample Code Example:

Note:

Indent nested lists properly for readability.
Each nested list must be inside a <li> (list item).
Mixing <ul> and <ol> is allowed.

Tables in HTML

A table is used to arrange data in rows and columns using the <table> tag.

Learn by creating code for multiple examples:

1. Basic Table

Code:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>22</td>
  </tr>
</table>

Output:

Name	Age
Alice	20
Bob	22

2. Table with Caption

Code:

<table border="1">
  <caption>Student List</caption>
  <tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Rahul</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Neha</td>
    <td>B</td>
  </tr>
</table>

Output:

Student List
Roll No	Name	Grade
1	Rahul	A
2	Neha	B

3. Using colspan and rowspan

Code:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Arjun</td>
    <td>85</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Sita</td>
    <td>80</td>
    <td>88</td>
  </tr>
</table>

Output:

Name	Marks
Name	Math	Science
Arjun	85	90
Sita	80	88

4. Complex Table Example

Code:

<table border="1">
  <caption>Monthly Expenses</caption>
  <tr>
    <th>Month</th>
    <th>Category</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td rowspan="3">January</td>
    <td>Food</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Transport</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Entertainment</td>
    <td>$150</td>
  </tr>
  <tr>
    <td rowspan="2">February</td>
    <td>Food</td>
    <td>$180</td>
  </tr>
  <tr>
    <td>Transport</td>
    <td>$120</td>
  </tr>
</table>

Output:

Monthly Expenses
Month	Category	Amount
January	Food	$200
	Transport	$100
	Entertainment	$150
February	Food	$180
February	Transport	$120