Crus4

logo

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 QatarMale
Sumaira EgyptFemale
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


Related Posts

Images in HTML

HTML Inline and Block Elements

Lists and Tables in HTML – crus4

5 thoughts on “Lists and Tables in HTML – crus4

Leave a Reply

Your email address will not be published. Required fields are marked *