Use of Lists and Tables in HTML

 
Lesson 2
Prakriti Dhang
02-07-2020


Ordered list, Unordered List, Description List

Tags Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines list items
<dl> Defines a description list
<dt> Defines a name in a description list
<dd> Describes the name in a description
list

Ordered List
 Starts with the <ol> tag
and each list item starts
with the <li> tag. The list
items is marked with
numbers by default:
 Example:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Unordered List
 An unordered list starts with
the <ul> tag and each list
item starts with the <li> tag.
The list items is marked with
bullets by default.
 Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

 Is a list of terms, having a description for each name.
 Example:
<!DOCTYPE html>
<html>
<body>
<h3>A Description List</h3>
<dl>
<dt>HTML</dt>
<dd>-Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>-Cascading Style Sheet</dd>
</dl>
</body>
</html>
A Description List
HTML
-Hypertext Markup Language
CSS
-Cascading Style Sheet

 Style it by writing : list-style-type
 Defines the style of the list item marker
 There are 4 types of styling the list.
 Circle : Sets the list item marker to a circle.
 Disc : Sets the list item marker to a disc. This is the
default style.
 Square :Sets the list item marker to a square
 None :Sets the list item marker to none. The list
items will not be marked.

list-style-type: circle
<!DOCTYPE html>
<html>
<body>
<h3>Unordered List with Circle
Bullets</h3>
<ul style="list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Unordered List with Circle Bullets
o HTML
o CSS
o JavaScript

list-style-type:disc
<!DOCTYPE html>
<html>
<body>
<h3>Unordered List with Disc
Bullets</h3>
<ul style="list-style-type:dics;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Unordered List with Disc Bullets
• HTML
• CSS
• JavaScript

list-style-type:square
 <!DOCTYPE html>
 <html>
 <body>
 <h3>Unordered List with Square
Bullets</h3>
 <ul style="list-style-type:square;">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </body>
 </html>
Unordered List with SquareBullets
 HTML
 CSS
 JavaScript

list-style-type:none
 <!DOCTYPE html>
 <html>
 <body>
 <h3>Unordered List with None
Bullets</h3>
 <ul style="list-style-type:none;">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </body>
 </html>
Unordered List with None Bullets
HTML
CSS
JavaScript

 The type attribute in the <ol> tag, defines the type of
item marker in the list.
Type Description
type=“1” The items in the list will be marked with
numbers
type=“A” The items in the list will be marked with
uppercase letters
type=“a” The items in the list will be marked with
lowercase letters
type=“I” The items in the list will be marked with
uppercase roman number
type=“i” The items in the list will be marked with
lowercase roman number

Type=“1”
<!DOCTYPE html>
<html>
<body>
<h3>Ordered List with number
(default)</h3>
<ol type=“1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Ordered List with number (default)
1. HTML
2. CSS
3. JavaScript

type=“a”
<!DOCTYPE html>
<html>
<body>
<h3>Ordered List with Lowercase
Letters</h3>
<ol type=“a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Ordered List with Lowercase
Letters
a. HTML
b. CSS
c. JavaScript

type=“A”
<!DOCTYPE html>
<html>
<body>
<h3>Ordered List with Uppercase
Letters</h3>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Ordered List with Uppercase
Letters
A. HTML
B. CSS
C. JavaScript

type=“I”
<!DOCTYPE html>
<html>
<body>
<h3>Ordered List with Uppercase
Roman Numbers</h3>
<ol type=“I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Ordered List with Uppercase Roman
Numbers
I. HTML
II. CSS
III. JavaScript

type=“i”
<!DOCTYPE html>
<html>
<body>
<h3>Ordered List with Lowercase
Roman Numbers</h3>
<ol type=“i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Ordered List with Lowercase Roman
Numbers
i. HTML
ii. CSS
iii. JavaScript


Tags Description and Styling

Tags Description
<table> Defines a table
<th> Defines table header. The elements inside are bold and
centered
<tr> Defines row of the table
<td> Defines cell of the table
<caption> Defines a caption
<colgroup> Specifies a group of one or more columns in a table
<col> Specifies column property
<thead> The header content is grouped within the tag
<tbody> The content of the body is grouped within the tag
<tfoot> The footer content is grouped within the tag

<!DOCTYPE html>
<html>
<body>
<h4>Basic HTML Table</h4>
<table style="width:100%">
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Book Type</th>
</tr>
<tr>
<td>Java: A Beginner's Guide</td>
<td>Herbert Schildt</td>
<td>Educational</td>
</tr>
<tr>
<td>HTML & CSS: Design and Build
Web Sites</td>
<td>Jon Duckett</td>
<td>Educational</td>
</tr>
<tr>
<td>The Notebook</td>
<td>Nicholas Sparks</td>
<td>Novel</td>
</tr>
</table>
</body>
</html>
OUTPUT->

CSS property Description
border Defines a border to the table
border-collapse Defines a border to each cells of the
table
padding Add padding to the cells
Text-align Aligns text of the cell (left, right,
center)
Border-spacing Sets space in between the cells
width Defines width of the table

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 5px;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h4>Cell that spans two columns</h4>
<tr>
<th>Color Name</th>
<th colspan="2">Color Shades</th>
</tr>
<tr>
<td>Red</td>
<td>Light Red</td>
<td>Deep Red</td>
</tr>
</table>
</body>
</html>
OUTPUT->

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h4>Cell that spans more than one row</h4>
<tr>
<th>Color Name</th>
<td>Red</td>
</tr>
<tr>
<th rowspan="2">Color Shades</th>
<td>Light Red</td>
</tr>
<tr>
<td>Deep Red</td>
</tr>
</table>
</body>
</html>
OUTPUT->

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 10px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #ff3333
}
</style>
</head>
<body>
<h4>Use of id attribute for styling HTML
tables</h4>
<tr>
<th>Color Name</th>
<td>Red</td>
</tr>
<tr>
<th rowspan="2">Color Shades</th>
<td>Light Red</td>
</tr>
<tr>
<td>Deep Red</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Color Name</th>
<th colspan="2">Color Shades</th>
</tr>
<tr>
<td>Red</td>
<td>Light Red</td>
<td>Deep Red</td>
</tr>
</table>
</body>
</html>

 Lists in HTML: Ordered, Unordered, and description.
 Table in HTML
 Styled table with CSS property

1. Create a page that shows shopping list. Use Ordered
list, type roman numbers.
2. In the same page use unordered list of type square to
display list of books.
3. In the same page, add a table showing address book of
5 people. Use colspan and row span attribute. Style the
table accordingly.

Use of Lists and Tables in HTML

Use of Lists and Tables in HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Use of Lists and Tables in HTML

Similar to Use of Lists and Tables in HTML (20)

Recently uploaded

Recently uploaded (20)

Use of Lists and Tables in HTML