Scribd
Upload
10 views10 pages

Lecture 03 - HTML Elements (Tables and Div)

learn HTML element with easy way

Uploaded by

husseinfreelancer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views10 pages

Lecture 03 - HTML Elements (Tables and Div)

learn HTML element with easy way

Uploaded by

husseinfreelancer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Lecture 03: HTML Elements

(tables and Div)


❖ 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