HTML List

    

 HTML List

Information lists are specified using HTML Lists. One or more list components may be present in every list. Three different categories of HTML lists exist:

1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List

HTML Ordered List or Numbered List

The numbered format of items is displayed via the HTML ordered list or numbered list. For an ordered list, use the ol HTML element. Using an ordered list, we may display things in numerical order, alphabetical order, or any other format where the importance of the order is highlighted. Numerous numbered list types are possible:

• Numeric Number (1, 2, 3)
• Capital Roman Number (I II III)
• Small Romal Number (i ii iii)
• Capital Alphabet (A B C)
• Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type	Description
Type "1"	This is the default type. In this type, the list items are numbered with numbers.
Type "I"	In this type, the list items are numbered with upper case roman numbers.
Type "i"	In this type, the list items are numbered with lower case roman numbers.
Type "A"	In this type, the list items are numbered with upper case letters.
Type "a"	In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's look at an HTML ordered list example that presents four subjects in a numbered list. Since type="1" is the default type, we are not declaring it here.

1.  <ol>  

2.  <li>HTML</li> 

3.<li>Java</li>  

4. <li>JavaScript</li>  

5. <li>SQL</li>  

6.  </ol>  

start attribute

With the ol element, the start property is used to designate where the list items should begin.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1.     <ol type="i" start="5">      

2.      <li>HTML</li>  

3.      <li>Java</li>  

4.      <li>JavaScript</li>  

5.      <li>SQL</li>  

6.     </ol>  

Reversed  Attribute

This is a brand-new Boolean property for the HTML ol> element in HTML5. When paired with the reversed attribute,

    tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Example:

1.    <ol reversed>  

2.     <li>HTML</li>  

3.     <li>Java</li>  

4.     <li>JavaScript</li>  

5.     <li>SQL</li>  

6.      </ol>

HTML Unordered List or Bulleted List

The bulleted format of an HTML unordered list or bulleted list is used to display elements. When we do not need to display things in a specific order, we can use an unordered list. The unordered list is created using the HTML ul element. A bulleted list can be of four different types:

• disc
• circle
• square
• none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type	Description
Type "disc"	This is the default style. In this style, the list items are marked with bullets.
Type "circle"	In this style, the list items are marked with circles.
Type "square"	In this style, the list items are marked with squares.
Type "none"	In this style, the list items are not marked .

HTML Unordered List Example 

1.    <ul>  

2.   <li>HTML</li>  

3.    <li>Java</li>  

4.    <li>JavaScript</li>  

5.    <li>SQL</li>  

6.     </ul>  

HTML Description List or Definition List 

Both HTML and XHTML allow the list style known as the HTML Description list. The items are listed as those in a dictionary or encyclopaedia, giving rise to the name definition list.

When you wish to provide a glossary, list of words, or other name-value list, the definition list is ideal.

The HTML definition list contains following three tags:

    1. <dl> tag defines the start of the list.

    2.<dt> tag defines a term.

    3.<dd> tag defines the term definition (description).

1.   <dl>  

 2.     <dt>Aries</dt>  

3.     <dd>-One of the 12 horoscope sign.</dd>  

4.     <dt>Bingo</dt> 

5.      <dd>-One of my evening snacks</dd>  

6.      <dt>Leo</dt>  

7.      <dd>-It is also an one of the 12 horoscope sign.</dd>  

8.      <dt>Oracle</dt>  

9.      <dd>-It is a multinational technology corporation.</dd>           

10.  </dl> 

HTML Table 

Data is shown in tabular form (row * column) using the HTML table tag. Several columns might be arranged in a row.

Using the table> element plus the tr>, td>, and th> components, we can make a table to show data in tabular form.

The tr>, th>, and td> tags in each table describe the table row, table header, and table data, respectively.

The layout of the page, including the header area, navigation bar, body text, and footer section, is controlled by HTML tables. However, it is advised to utilise div tags rather than tables to control the page's layout.

HTML Table Example 

Let's see the example of HTML table tag. It output is shown above.

1.     <table>  

2.     <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  

3.     <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  

4.     <tr><td>James</td><td>William</td><td>80</td></tr>  

5.     <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  

6.     <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  

7.     </table>

HTML Table With Border

There are two ways to specify border for HTML tables.

        1. By border attribute of table in HTML

        2. By border property in CSS

1. By border attribute of table in HTML:-

You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

1.     <table border="1">  

2.     <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  

3.     <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  

4.     <tr><td>James</td><td>William</td><td>80</td></tr>  

5.     <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  

6.     <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  

7.     </table>  

  2. By border property in CSS:

It is now recommended to use border property of CSS to specify border in table.

1.     <style>  

2.     table, th, td {  

3.       border: 1px solid black;  

4.     }  

5.     </style>  

You can collapse all the borders in one border by border-collapse property. It will collapse the border into one.

1.    <style>  

2.    table, th, td {  

3.      border: 2px solid black;  

4.      border-collapse: collapse;  

5.    }  

6.    </style>

HTML Table With Colspan 

The colspan property may be used to make a cell span several columns.

Depending on the value of the colspan property, it will divide a single cell or row into many columns.

Example :-

<th colspan="2">Mobile No.</th>  

HTML Table With Rowspan 

The rowspan property may be used to extend a cell across many rows.

A cell will be split into several rows as a result. Rowspan settings will determine how many split rows there are.

Let's see the example that span two rows.

Example :

<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

HTML Table With Caption

HTML caption is diplayed above the table. It must be used after table tag only.

1.    <caption>Student Records</caption>