Lecture 03: HTML Elements
(Lists, tables, Div)
❖ HTML lists allow web developers to group a set of related
items in lists.
❖ Lists come in different styles
➢ Ordered lists: List items marked with numbers by default.
➢ Unordered lists: Marked with bullets (small black circles)
by default
➢ Description lists: description of each term
HTML Lists
❖ HTML lists allow web developers to group a set of related
items in lists.
❖ Lists come in different styles
➢ Ordered lists: List items marked with numbers by default.
➢ Unordered lists: Marked with bullets (small black circles)
by default
➢ Description lists: description of each term
HTML Lists – Ordered lists HTML Lists – Un-Ordered lists
● Ordered lists start with the <ol> tag. ● Unordered lists start with the <ul> tag.
● Each list item starts with the <li> tag. ● Each list item starts with the <li> tag.
● Example ● Example
<ol> <ul>
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ol> </ul>
• <ol type="i"> means Ordered List with
Lowercase Roman Numbers.
• type="A“= with upper case letters
HTML Tables
❖ HTML tables allow web developers to arrange data into
rows and columns.
❖ The <table> tag defines the table
❖ The <tr> tag defines the row in the table
❖ The <th> tag defines the table heading inside the row
❖ The <td> tag defines the table data inside the row
HTML Tables
<table>
<tr>
<th>Student</th><th>Program</th>
</tr>
<tr>
<td>Juma hassan</td><td>DS</td>
</tr>
<tr>
<td>Magere Krunz</td><td>IT</td>
</tr>
</table>
HTML Tables – rowspan and colspan
HTML Tables – rowspan and colspan
❖ HTML tables can have cells that spans over multiple
rows and/or columns.
❖ The colspan attribute is used to span multiple columns
❖ The rowspan attribute is used to span multiple rows
❖ The colspan and rowspan attribute are used inside the
cell i.e. <th> and <td> elements.
HTML Tables – rowspan and colspan
<table> <tr>
<tr> <td>Eve</td>
<th colspan="2">Name</th> <td>Jackson</td>
<th>Age</th> <td>57</td>
</tr> </tr>
<tr> </table>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
HTML Tables – <caption> tag
❖ The <caption> tag defines a table caption.
❖ The <caption> tag must be inserted immediately after
the <table> tag.
❖ Tip:
➢ By default, a table caption will be center-aligned
above a table.
➢ The CSS properties text-align and caption-side can be
used to align and place the caption.
HTML Tables – <caption> tag
• <table>
• <caption style="text-align:left">My savings</caption>
• <tr>
• <th>Month</th>
• <th>Savings</th>
• </tr>
• <tr>
• <td>January</td>
• <td>$100</td>
• </tr>
• </table
HTML div element
❖ The <div> tag defines a division or a section in an HTML
document.
❖ The <div> tag is used as a container for HTML elements,
which is then styled with CSS or manipulated with JavaScript.
❖ The <div> tag is easily styled by using the class or id
attribute.
❖ Any sort of content can be put inside the <div> tag!
❖ Note:
➢ The div element is a block-level element, and therefore, by
default, browsers always place a line break before and after
the <div> element.
HTML div element
❖ The <div> tag defines a division or a section in an HTML
document.
❖ The <div> tag is used as a container for HTML elements,
which is then styled with CSS or manipulated with
JavaScript.
❖ The <div> tag is easily styled by using the class or id
attribute.
❖ Any sort of content can be put inside the <div> tag!
❖ Note:
➢ The div element is a block-level element, and therefore, by
default, browsers always place a line break before and after
the <div> element.
HTML div element
●Example
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
