Scribd
Upload
2 views

Lecture 03 - HTML Elements (Lists Tables and Div)

The document covers HTML elements, specifically lists, tables, and the div element. It explains the different types of lists (ordered, unordered, and description), how to create tables with various attributes like rowspan and colspan, and the use of the div tag for structuring content. Examples are provided for each element to illustrate their usage in HTML.

Uploaded by

jkusekwa01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lecture 03 - HTML Elements (Lists Tables and Div)

The document covers HTML elements, specifically lists, tables, and the div element. It explains the different types of lists (ordered, unordered, and description), how to create tables with various attributes like rowspan and colspan, and the use of the div tag for structuring content. Examples are provided for each element to illustrate their usage in HTML.

Uploaded by

jkusekwa01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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>

You might also like