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 |
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 |
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
Related Posts
HTML Inline and Block Elements
5 thoughts on “Lists and Tables in HTML – crus4”