Understanding and Creating Lists, Tables, and Forms in HTML

In this unit, we will delve into the creation and styling of lists, tables, and forms in HTML. These elements are essential for structuring information and creating interactive elements on a webpage.

Lists in HTML

HTML provides two types of lists: ordered (<ol>) and unordered (<ul>). Ordered lists are numbered, while unordered lists are bulleted.

Creating an Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Creating an Ordered List

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Nesting Lists

Lists can be nested within each other to create sublists.

<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

Tables in HTML

Tables are used to present data in rows and columns. The <table> tag is used to create a table. The <tr> tag defines a table row, the <th> tag defines a table header, and the <td> tag defines a table cell.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Forms in HTML

Forms are used to collect user input. The <form> tag is used to create an HTML form.

Inside a form element, we can use different types of input elements, like: text fields (<input type="text">), checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), and dropdowns (<select>).

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit" value="Submit">
</form>

By the end of this unit, you should be comfortable creating and using lists, tables, and forms in HTML. Practice creating these elements and experiment with different attributes to understand their functionality better.