HTML Lists

What is List?

List is a group of items related to each other.

Types of List

  1. Unordered list
  2. Ordered list
  3. Definition list

Unordered V/S Ordered List

unordered-vs-ordered-list

Unordered list

  1. An unordered list is a group of related items arranges in no order.
  2. Order list is created by using <ul> </ul> tag.
  3. <li> </li> tag is used to create list items in the list.

Creating Unordered List

<ul>
    <li>Tea</li>
    <li>Coffee</li>
    <li>Cold Drink</li>
</ul>

unordered list sample output

Types of unordered lists


Ordered List

  1. An ordered list arranges a group of elements a particular order.
  2. <ol> </ol> tag is used to create ordered list.

Creating ordered list

<ol>
<li>Tea</li>
<li>Coffee</li>
<li>Cold Drink</li>
</ol>

ordered-lists-in-html

Types of ordered lists

ordered-list-types

Examples of Ordered lists

Example-1:
<ol type="1">
<li>Tea</li>
<li>Coffee</li>
<li>Cold Drink</li>
</ol>
Example-2:
<ol type="1" start="5">
<li>Tea</li>
<li>Coffee</li>
<li>Cold Drink</li>
</ol>

Example-3:
<ol type="1">
<li>Tea</li>
<li>Coffee</li>
<li>Cold Drink</li>
</ol>
Example-4:
<ol type="1" start="5">
<li>Tea</li>
<li>Coffee</li>
<li>Cold Drink</li>
</ol>

ordered-list-example-sample-output

Definition List

Definition list a group of items with key (terms) and value (definition) pair.
  1. <dl> tag is used to create definition list.
  2. <dt> tag creates definition term.
  3. <dd> tag creates definition data 

Creating definition list

<dl>
    <lh>Definition Header</lh>
    <dt>Term-1</dt>
    <dd>This is the definition of the first term</dd>
    <dt>Definition Term-2</dt>
    <dd>This is the definition of the second term</dd>
</dl>

List in html Video Tutorial

Table attributes

<table width="300px" border="1" cellspacing="5px" cellpadding="10px">
   <tr>
<th>Name</th><th>Email</th>
</tr>
<tr>
<td>Alex</td><td>alex@gmail.com</td>
</tr>
<tr>
<td>Blake</td><td>blake@gmail.com</td>
</tr>
<tr>
<td>Clark</td><td>clark@gmail.com</td>
</tr>
</table>

Explanation

  1. In the above example, the width attribute is used to specify the table width. the width can be specified in px or % format
  2. Another attribute border is used to specify the border width.
  3. Attribute cellspacing specifies the space between two cells of the table as shown in the above figure.
  4. Attribute cellpadding specifies the space between the edge of the cell and the cell content.