Understanding Lists and Table Structure in HTML

In this, 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 table
  • Border and Background in 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 an <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 numerically. 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 may be 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


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 table: Using cellspacing you can set the space between cells and of the table and by using cellpadding you can set the space between cell 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 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.
Author
Praveen Moosad
Praveen Moosad
Admin 48.3k 8.4m