Table of Contents

Lists and Tables in HTML

HTML Lists

HTML lists is employed to form a collection of related items in a list.

There are three types of HTML lists:

Ordered list and
Unordered list
Description list

Ordered list

Ordered list starts with the <ol> tag, and inside these <ol> tags each list item is defined by the <li> tag. Here the list items are going to be marked with numbers. To clearly understand the Ordered list, lets check out this example.

Example

<body> 
 <ol>
  <li> First </li>
  <li> Second </li> 
  <li> Third </li> 
 </ol>
</body>

Output

1. First

2. Second

3. Third

output of the code

Unordered list

Unordered list starts with the <ul> tag, and inside these <ul> tags, each list item is defined by the <li> tag. Here the list item is automatically marked with the “.” (bullets). Below is an example of an unordered list.

Example

<body>
 <ul>
  <li> First </li>
  <li> Second </li> 
  <li> Third </li> 
 </ul>
</body>

Output

First
Second
Third

Description List

A description list is a list of terms, which help us to add description of each term. There are mainly three tags in HTML description list:

<dl> tag
<dt> tag &
<dd> tag

<dl>tag defines the description list, <dt> tag defines the name (list term), and <dd> tag describes each term. Let’s clearly understand the HTML description list with this simple example.

<dl>
   <dt> Tiger </dt>
   <dd>-Tiger is a wild animal </dd> 
   <dt> Lion </dt>
   <dd>-Lion is the king of forest </dd> 
</dl>

Output

Tiger

Tiger is a wild animal

Lion

Lion is the king of the forest

Tables in HTML

HTML tables allows us to arrange data into rows and columns. We can define table by using <table> tag. Tables are divided into table rows, with the <tr> tag. Further these Table rows are divided into table columns, with the <td> tag.

Here is an example of a simple HTML table.

<table>
   <tr>
     <td> Name </td>
     <td> Country </td> 
     <td Gender </td>
   </tr>
   <tr>
     <td> Omar </td>
     <td> Qatar </td> 
     <td> Male </td>
   </tr>
   <tr> 
     <td> Sumaira </td>
     <td> Egypt </td>
     <td> Female </td>
   </tr>
</table>

Output

Name	Country	Gender
Omar	Qatar	Male
Sumaira	Egypt	Female

Simple HTML Table

NOTE:- HTML tables can also include images, other tables, lists etc.

Table Rows

Table row starts with <tr> tag and ends with </tr> tag.

<tr> stands for table row. In an above example there are three table rows. You can make as many rows as you like in a table, but in order to create a stunning table, make sure that number of cells (columns) are the same in each row.

Table Cells

Each table cell starts with <td> tag and ends with </td>.

<td> stands for table data. Everything between <td> and </td> are the content of the table cell.

Summary

HTML Lists is employed to form a collection of related items in a list.
There are mainly three types of HTML lists: Ordered list, Unordered list, & Description list
In an ordered list, items are automatically marked with numbers.
In an unordered list, items are going to be marked with Bullets( . ).
Description list is a list of terms, which help us to add description of each term.
We can arrange our data into rows and columns with the help of HTML Tables.

Video Tutorial

HTML Tables HTML Lists

Next

Images in HTML

HTML Inline and Block Elements

Lists and Tables in HTML – crus4