Post
Ask Question

HTML For Beginners: Part 3

Introduction

 
In my "HTML For Beginners: Part 2". I provided an introduction to HTML Images and HTML Links.
 
In this, the third part of the HTML beginners series, we will cover the following topics:
  • Unordered Lists
  • Ordered Lists
  • Definition Lists
  • Introduction to HTML table
  • Basic Structure of a table
  • <tr>, <td>, <th> elements
  • Spanning rows and columns
  • Cellpadding, cellspacing and width attribute of the table
  • Border and Background in the table.

HTML List

 
Lists are used when you want to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web applications, lists are frequently used with navigation as well as with general content.
 
Types of HTML Lists: There are the following 3 types of lists in HTML.
  • Unordered List/Bullet Lists
  • Ordered List/Numbered Lists
  • Definition Lists 

Unordered List

 
Using this list we can group a set of related items but the items will not be in a specific order. This list begins with bullet points. To create an unordered list we use a <ul> element and each item in the list is placed between an opening <li> and closing </li>. Here li stands for lists item. In the HTML the list contents are indented by default.
 
Example of Unordered List
  1. <ul>      
  2.   <li>Apple</li>      
  3.   <li>Banana</li>      
  4.   <li>Grapes</li>      
  5.   <li>Mango</li>      
  6.   <li>Papaya</li>      
  7. </ul>  
Output
 
 
By default in the unordered list, bullets are shown with a disc (with a filled circle). But you can modify the type attribute that specifies the style of the bullet point of a list item in a list. To modify it you can use the type attribute. 
  • disc: This is the default type. A filled circle. 
  • circle: An unfilled circle.
  • square: A filled square.
The following is the general syntax for the type attribute:
  1. <li type="disc/circle/square">  
Example
  1. <ul>      
  2.   <li type="disc">Apple</li>      
  3.   <li>Banana</li>      
  4.   <li type="circle">Grapes</li>      
  5.   <li type="square">Mango</li>      
  6.   <li>Papaya</li>      
  7. </ul> 
Output
 
 

Ordered List

 
An ordered list is used to group a set of related items, in a specific format. An ordered list is a list where each item in the list is numbered.  To create an ordered list we use an <ol> element and each item in the list is placed between an opening <li> and closing </li>. Here li stands for list item. Instead of <ul> if we use a <ol> then instead of bullets we will get a number. The browser indents the list content by default.
 
Example
  1. <ol>      
  2.   <li>Apple</li>      
  3.   <li>Banana</li>      
  4.   <li>Grapes</li>      
  5.   <li>Mango</li>      
  6.   <li>Papaya</li>      
  7. </ol>  
Output
 
 
You can see in the preceding output, we are getting the list with a number but it is possible to change the li types using the type attribute of li. An ordered list type has the following values:
 
Value Description
1 This is the default. Using this order list will be numerical. Such as in the following
(1, 2, 3, 4…)
a Using this order list will be lowercase alphabetically. Such as in the following
(a, b, c, d…)
A Using this order list will be uppercase alphabetically. Such as in the following
(A, B, C, D…)
i Using this order list will be lowercase roman number Such as in the following
(i, ii, iii, iv…)
I Using this order list will be uppercase roman number Such as in the following
(I, II, III, IV…)
 
Example
  1. <ol>      
  2.   <li type="1">Apple</li>      
  3.   <li type="a">Banana</li>      
  4.   <li type="A">Grapes</li>      
  5.   <li type="i">Mango</li>      
  6.   <li type="I">Papaya</li>      
  7. </ol>  
Output
 
Definition List: A <dl> is used to create a definition list. A definition list associates specific names and their values within a list. It usually consists of a series of terms and their definitions. Inside the <dl> you will usually see pairs of <dt> (Definition Terms) and <dd> (Definition Descriptions).
 
Example
  1. <dl>    
  2.   <dt>MSDN</dt>    
  3.   <dd>MSDN stands for Microsoft developer network. Where you can find resources for developers, such as tools, code samples and more on the Microsoft Developer Network. Build apps for the web, Windows Phone and Xbox.</dd>    
  4.       
  5.    <dt>C# Corner</dt>    
  6.    <dd>Free C# articles, C# tutorials, news, blogs, resources, forum for C# programming. and a portal where you can learn about every techonlogy </dd>    
  7.    <dt>Lynda.com</dt>    
  8.    <dd>Lynda.com provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills</dd>    
  9. </dl>   
Output
 
 
Nested List: Inside a <li> you can use another list that will be a sub-list. In simple terms, it is a list inside a list. The browser displays nested lists indented further than the parent list.
 
Nested Example 1
  1. <ul>    
  2.       <li>Item 1</li>    
  3.       <li>Item 2    
  4.         <ul>    
  5.           <li>Sub Item 2.1</li>    
  6.           <li>Sub Item 2.2</li>    
  7.           <li>Sub Item 2.3</li>    
  8.         </ul>    
  9.       </li>    
  10.       <li>Item 3</li>    
  11.       <li>Item 4    
  12.         <ul>    
  13.           <li>Sub Item 4.1</li>    
  14.           <li>Sub Item 4.2    
  15.             <ul>    
  16.               <li>Sub Item 4.2.1</li>    
  17.               <li>Sub Item 4.2.2</li>    
  18.             </ul>    
  19.           </li>    
  20.           <li>Sub Item 4.3</li>    
  21.         </ul>    
  22.       </li>    
  23.       <li>Item 5</li>    
  24.    </ul>   
Output
 
content image
 
Nested List Example 2
  1. <ol>    
  2.   <li>Chapter 1    
  3.     <ol>    
  4.       <li>Topic 1.1</li>    
  5.       <li>Topic 1.2</li>    
  6.     </ol>    
  7.   </li>    
  8.   <li>Chapter 2    
  9.     <ol>    
  10.       <li>Topic 2.1</li>    
  11.       <li>Topic 2.2</li>    
  12.       <li>Topic 2.3</li>    
  13.     </ol>    
  14.   </li>    
  15.   <li>Chapter 3    
  16.     <ol>    
  17.       <li>Topic 3.1</li>    
  18.       <li>Topic 3.2    
  19.         <ol>    
  20.           <li>Topic 3.2.1</li>    
  21.           <li>Topic 3.2.2</li>    
  22.         </ol>    
  23.       </li>    
  24.       <li>Topic 3.3</li>    
  25.     </ol>    
  26.   </li>    
  27.   <li>Chapter 4    
  28.     <ol>    
  29.       <li>Topic 4.1</li>    
  30.       <li>Topic 4.2</li>    
  31.     </ol>    
  32.   </li>    
  33.   <li>Chapter 5    
  34.     <ol>    
  35.       <li>Topic 5.1</li>    
  36.       <li>Topic 5.2</li>    
  37.     </ol>    
  38.   </li>    
  39. </ol>   
Output
 
 

HTML Table

 
The table element is used to represent multiple-dimension data or grid data. The <table> tag is used to define a table in HTML. Table tags also contain other tags that define the structure of the table. 
 

Structure of an HTML table

 
Inside the table tag, some other tags are used to provide the structure of the table. Mainly the table element is made up from the following 5 parts:
  • Table Caption: the <caption> tag defines the caption of the table.
     
  • Row Groups: <thead> is used to define the group of rows that have headings of the table. <tbody> is used to define a group of rows that have some data. <tfoot> is used to define the rows that have the footer data of the table.
     
  • Column Group: The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
     
  • Table rows: the <tr> tag specifies the row of an HTML document.
     
  • Table Cells: The cells of the table may be the heading of the table and maybe the data of the table. Using <th> we specify the heading cells and using <td> tag we specify the data cell of the HTML element.
So the structure of the table is as in the following:
 
 

Hierarchy of the Table Element

 
 
A simple example of a table
  1. <html>    
  2.    <head>    
  3.       <title>Table Example</title>    
  4.    </head>    
  5.    <body>    
  6.       <table border="1">    
  7.          <tr>    
  8.          <th>Name</th>    
  9.          <th>Address</th>    
  10.          <th>Mobile</th>    
  11.          </tr>    
  12.          <tr>    
  13.            <td>Sourabh Somani</td>    
  14.            <td>Chittorgarh</td>    
  15.            <td>9928486447</td>    
  16.          </tr>    
  17.          <tr>    
  18.            <td>Shaili Dashora</td>    
  19.            <td>Chittorgarh</td>    
  20.            <td>9314543761</td>    
  21.          </tr>    
  22.          <tr>    
  23.            <td>Just-Dial</td>    
  24.            <td>Delhi</td>    
  25.            <td>08888888888</td>    
  26.          </tr>    
  27.       </table>    
  28.    </body>    
  29. </html>   
Output
 
 
Rowspan and Colspan in Html: You can use a colspan attribute if you want to merge two or more columns into a single column. Similarly, you can use rowspan if you want to merge two or more rows.
 
Example
  1. <table border="1">    
  2.    <tr>    
  3.       <th rowspan="2">Roll Number</th>    
  4.       <th rowspan="2">Name</th>    
  5.       <th colspan="3">Marks</th>    
  6.    </tr>    
  7.     
  8.    <tr>    
  9.       <th>Hindi</th>    
  10.       <th>English</th>    
  11.       <th>Maths</th>    
  12.    </tr>    
  13.     
  14.    <tr>    
  15.       <td>1</td>    
  16.       <td>Sourabh Somani</td>    
  17.       <td>95</td>    
  18.       <td>94</td>    
  19.       <td>98</td>    
  20.    </tr>    
  21.    <tr>    
  22.      <td>2</td>    
  23.      <td>Shaili Dashora</td>    
  24.      <td>94</td>    
  25.      <td>95</td>    
  26.      <td>97</td>    
  27.   </tr>    
  28.    <tr>    
  29.      <td>3</td>    
  30.      <td>Rajesh</td>    
  31.        <td>88</td>    
  32.       <td>86</td>    
  33.       <td>89</td>    
  34.   </tr>    
  35. </table>  
Output
 
 
Table with caption, thead, tbody and tfoot: the <Caption> tag provides a caption for the table. The headings for the table should be placed inside the <thead>. The body of the table should be inside the <tbody> element and if you want to set the footer of the table then <tfoot> is used.
 
Example
  1. <table border="1">    
  2.   <caption>Monthly Profit Details</caption>    
  3.   <thead>    
  4.     <tr>    
  5.       <th>Month</th>    
  6.       <th>Profit</th>    
  7.     </tr>    
  8.   </thead>    
  9.   <tfoot>    
  10.     <tr>    
  11.       <td><strong>Sum</strong></td>    
  12.       <td><strong>3,50,000</strong></td>    
  13.     </tr>    
  14.   </tfoot>    
  15.   <tbody>    
  16.     <tr>    
  17.       <td>January</td>    
  18.       <td>10,000</td>    
  19.     </tr>    
  20.     <tr>    
  21.       <td>February</td>    
  22.        <td>20,000</td>    
  23.     </tr>    
  24.     <tr>    
  25.       <td>March</td>    
  26.       <td>40,000</td>    
  27.     </tr>    
  28.     <tr>    
  29.       <td>April</td>    
  30.       <td>50,000</td>    
  31.     </tr>    
  32.     <tr>    
  33.       <td>May</td>    
  34.       <td>20,000</td>    
  35.     </tr>    
  36.     <tr>    
  37.       <td>June</td>    
  38.       <td>25,000</td>    
  39.     </tr>    
  40.     <tr>    
  41.       <td>July</td>    
  42.       <td>20,000</td>    
  43.     </tr>    
  44.     <tr>    
  45.       <td>August</td>    
  46.       <td>10,000</td>    
  47.     </tr>    
  48.     <tr>    
  49.       <td>September</td>    
  50.       <td>50,000</td>    
  51.     </tr>    
  52.     <tr>    
  53.       <td>October</td>    
  54.       <td>2,000</td>    
  55.     </tr>    
  56.     <tr>    
  57.       <td>November</td>    
  58.       <td>3,000</td>    
  59.     </tr>    
  60.     <tr>    
  61.       <td>December</td>    
  62.       <td>100,000</td>    
  63.     </tr>    
  64.   </tbody>    
  65. </table>   
Output
 
 
Cellpadding and Cellspacing Attribute of a table: Using cellspacing you can set the space between cells and of the table and by using cellpadding you can set the space between cells the border and cell contents. 
 
 
Example
  1. <table border="1" cellspacing="10" cellpadding="10">    
  2.   <caption>Monthly Profit Details</caption>    
  3.   <thead>    
  4.     <tr>    
  5.       <th>Month</th>    
  6.       <th>Profit</th>    
  7.     </tr>    
  8.   </thead>    
  9.   <tfoot>    
  10.     <tr>    
  11.       <td><strong>Sum</strong></td>    
  12.       <td><strong>30,000</strong></td>    
  13.     </tr>    
  14.   </tfoot>    
  15.   <tbody>    
  16.     <tr>    
  17.       <td>January</td>    
  18.       <td>10,000</td>    
  19.     </tr>    
  20.     <tr>    
  21.       <td>February</td>    
  22.       <td>20,000</td>    
  23.     </tr>    
  24.   </tbody>    
  25. </table>   
Output
 
 
Border Attribute: Using the border attribute of tables you can set the border size of the table. By default, the border size of the table is 0 (Zero).
 
Background Color of the table: Using the bgcolor attribute you can specify the background color of the table.
 
Example
  1. <table border="1" cellspacing="0" cellpadding="0" bgcolor="#ffff00">    
  2.   <caption>Monthly Profit Details</caption>    
  3.   <thead>    
  4.     <tr>    
  5.       <th>Month</th>    
  6.       <th>Profit</th>    
  7.     </tr>    
  8.   </thead>    
  9.   <tfoot>    
  10.     <tr>    
  11.       <td><strong>Sum</strong></td>    
  12.       <td><strong>30,000</strong></td>    
  13.     </tr>    
  14.   </tfoot>    
  15.   <tbody>    
  16.     <tr>    
  17.       <td>January</td>    
  18.       <td>10,000</td>    
  19.     </tr>    
  20.     <tr>    
  21.       <td>February</td>    
  22.       <td>20,000</td>    
  23.     </tr>    
  24.   </tbody>    
  25. </table>   
Output
 
 

Summary

  • There are three types of lists in HTML: Ordered, Unordered and Definition.
  • A list can have another list inside the <li> called a nested list.
  • The <table> element is used to add a table to a webpage.
  • <tr> is used to draw a row of the table.
  • <td> specifies table data and <th> specifies table heading.
  • Inside the table, we have some elements that specify the table structure. 
  • A large table can be split into <thead>,<tbody> and <tfoot>
  • We can merge the table rows using rowspan and we can merge a table column using colspan.
The next part of this series explains HTML Forms.


Similar Articles