crus4

crus4

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.


Related Posts

Images in HTML

HTML Inline and Block Elements

Lists and Tables in HTML – crus4

4 thoughts on “Lists and Tables in HTML – crus4

Leave a Reply

Your email address will not be published.