Chapter 8
List and Tables in HTML5
Page 1
_____________________________________
Learning Objectives
Students are able to
1. Create list in HTML
2. Create table in HTML
3. Learn about different list and table tags
Job Prospects
1. Web Designer
2. Website editor
3. UI developer
4. CSS/HTML Developer
_____________________________________
Page 2
_____________________________________
Concept Map
_____________________________________
Page 3
_____________________________________
Q1. What is a list?
Ans.
1. A list is a collection of related items that can be used to represent information in pointed
form.
2. List allows user to display information in an organised manner.
Q2. Name different types of list in HTML.
Ans.
1. Ordered List
2. Unordered List
3. Definition List
Q3. What is an ordered list?
Ans. 1. An ordered list is also called the numbered list.
2. This type of list is used to display the items in a sequential manner.
3. <OL> tag is used to create an ordered list.
4. <LI> tag is used to define list item.
Example:
1. Mango
2. Apple
3. Grapes
4. Orange
5. Papaya
Q4. Write attributes of <OL> tag.
Ans.
Attribute Value
Type A,a,1,I,i
Start Provide the starting value
Q5. Write a html program to make an ordered list.
<html>
<head>
<title> Ordered List</title>
</head>
<body>
<OL>
<Li> Apple </Li>
<Li> Mango </Li>
<Li> Grapes </Li>
<Li> Papaya </Li>
</OL>
</body>
</html>
Q6. What is an unordered list?
Ans. 1. An unordered list is also called a bulleted list.
2. This type of list is generally used to display random items, not in a sequence.
3. The <UL> tag is used to define an unordered list.
Q7. Write attributes of <UL> tag.
Ans.
Attribute Value
Type
Q8. Write a html program to make an unordered list.
<html>
<head>
<title> Unordered List or Bulleted List</title>
</head>
<body>
<UL>
<Li> Sweaters </Li>
<Li> Woollen Caps </Li>
<Li> Gloves </Li>
<Li> Jackets </Li>
</UL>
</body>
</html>
Q9. What is a definition list?
Ans. 1. The definition li is also known as a description list.
2. The description list is created by using the <DL> tag in conjunction with <DD> and <DT>
tags. The <DT> tag defines the description term. The <DD> tag defines the description
term’s definition.
Q10. Write a html program to make a definition list.
Ans. <html>
<head>
<title> Definition List</title>
</head>
<body>
<DL>
<DT> Beverage </DT>
<DD> Hot & Cold Drinks </DD>
<DT> Cappuccino </DT>
<DD> Hot Drinks </DD>
</DL>
</body>
</html>
Q11. What is a table?
Ans.1. Tables represent the data in the form of rows and columns.
2. A table is created by using the <Table> tag.
Q12. Name different child tags of table tags.
Ans.
Tag Name Description
<TR> Table Row
<TD> Table Data
<Caption> Add a title to heading
<TH> Table Heading
Q13. Name different properties used with <Table> tag.
Property Description
Border Apply a border to table
Border-Style Apply an outline style border like Dotted, Solid, Double etc.
Border-color Apply a color to border
Border-spacing Specifies the space between the borders of adjacent cells.
Width Specify the width of a table.
Padding Specifies the space around the content of a cell and the border.
Background-color Specify the colour of the background of table
Color Apply color to the text
Q14. Write a program to create a table in html.
Ans. <html>
<head>
<title> My Table Page </title>
</head>
<body>
<table>
<tr>
<th>Roll No.</th>
<th> Name </th>
</tr>
<tr>
<td>1</td>
<td>Kajal</td>
</tr>
<tr>
<td>2</td>
<td>Diksha</td>
</tr>
</table> </body> </html>
Output:
Roll No. Name
1 Kajal
2 Diksha
Q15. Differentiate between:
a. Rowspan and Colspan
Rowspan Colspan
The rowspan attribute applies when a The colspan attribute applies when a
single cell is extended for more than a single cell is extended for more than a
single row, that is cell spans for 2 or single column, that is cell spans for 2 or
more rows instead of 1. more columns instead of 1.
b. Ordered List and Unordered List
Ordered List Unordered List
1. It is also known as a numbered list. 1. It is also known as a bulleted list.
2. This type of list is used to display the 2. This type of list is generally used to
items in a sequential manner. display random items, not in sequence.
3. The <ol> tag is used for ordered lists. 3. The <ul> tag is used for unordered
lists.
Q16. Write the name of any four attributes of the <table> tag.
Ans. 1. Border
2. Border-style
3. Color
4. Padding etc.
