Create HTML Lists
Ordered List
● The first is an <ol>: This is an ordered list of contents. For example:
1. An item
2. Another item
3. Another goes here.
● Inside the <ol> tag we list each item on the list inside <li> </li> tags.
<ol>
<h3>Fruits</h3>
<li>Bananas</li>
<li>Apples</li>
<li>Paw Paws</li>
</ol>
<h4>List of Countries</h4>
<ol type="a">
<li>Algeria</li>
<li>Benin</li>
<li>Ethiopia</li>
<li>Kenya</li>
<li>Tanzania</li>
</ol>
Unordered List
● The second type of list that you may wish to include is an <ul> unordered list.
● This is better known as a bullet point list and contains no numbers.
<ul>
<h4><u>Brands</u> </h4>
<li>Mazda</li>
<li>Lexus</li>
<li>Subaru</li>
</ul>
Description List
, ● The <dl> HTML element represents a description list.
● The element encloses a list of groups of terms (specified using the <dt> element) and
descriptions (provided by <dd> elements).
● Common uses for this element are to implement a glossary or to display metadata (a list
of key-value pairs.
Exercises
1. Come up with a code for this.
HTML Tables
● Tables are used in HTML documents (web pages) to present tabular data.
● A table is defined using the <table> element and contains several table cells ( <td>, for
“table data” ) which are organized into table rows ( <tr>).
● A table's markup (HTML code) is always based on rows, never columns.
● Table cells that act as column headers or row headers should use the <th> (table header)
element.
● Table cells can be merged using the colspan and rowspan attributes.
● Tables can be broken into sections using the following elements:
<thead> — Table header
<tbody> — Table body
<tfoot> — Table footer
colspan
rowspan
Ordered List
● The first is an <ol>: This is an ordered list of contents. For example:
1. An item
2. Another item
3. Another goes here.
● Inside the <ol> tag we list each item on the list inside <li> </li> tags.
<ol>
<h3>Fruits</h3>
<li>Bananas</li>
<li>Apples</li>
<li>Paw Paws</li>
</ol>
<h4>List of Countries</h4>
<ol type="a">
<li>Algeria</li>
<li>Benin</li>
<li>Ethiopia</li>
<li>Kenya</li>
<li>Tanzania</li>
</ol>
Unordered List
● The second type of list that you may wish to include is an <ul> unordered list.
● This is better known as a bullet point list and contains no numbers.
<ul>
<h4><u>Brands</u> </h4>
<li>Mazda</li>
<li>Lexus</li>
<li>Subaru</li>
</ul>
Description List
, ● The <dl> HTML element represents a description list.
● The element encloses a list of groups of terms (specified using the <dt> element) and
descriptions (provided by <dd> elements).
● Common uses for this element are to implement a glossary or to display metadata (a list
of key-value pairs.
Exercises
1. Come up with a code for this.
HTML Tables
● Tables are used in HTML documents (web pages) to present tabular data.
● A table is defined using the <table> element and contains several table cells ( <td>, for
“table data” ) which are organized into table rows ( <tr>).
● A table's markup (HTML code) is always based on rows, never columns.
● Table cells that act as column headers or row headers should use the <th> (table header)
element.
● Table cells can be merged using the colspan and rowspan attributes.
● Tables can be broken into sections using the following elements:
<thead> — Table header
<tbody> — Table body
<tfoot> — Table footer
colspan
rowspan
