Day 3 Lab - HTML Tables and Images

This lesson introduces HTML tables for organizing data into rows and columns and the HTML image element for displaying pictures on webpages.

Learning Outcomes

Create HTML tables.
Use <thead>, <tr>, <th> and <td>.
Merge cells using colspan and rowspan.
Display local and online images.

HTML Tables

Tables display information in rows and columns.

<table> : Creates a table
<thead> : Header section
<th> : Header cell
<tr> : Table row
<td> : Table data

<table border="1">
  <thead>
    <tr>
      <th>ENO</th>
      <th>ENAME</th>
      <th>ESAL</th>
      <th>EADDR</th>
    </tr>
  </thead>
  <tr>
    <td>100</td>
    <td>DURGA</td>
    <td>1000</td>
    <td>Hyd</td>
  </tr>
</table>

ENO	ENAME	ESAL	EADDR
100	DURGA	1000	Hyd
200	SUNNY	2000	Mumbai
300	Bunny	3000	Chennai

Merging Cells

colspan merges columns (left to right).

<th colspan="2">Student Details</th>

Student Details
Name	Alex

rowspan merges rows (top to bottom).

<td rowspan="2">Alex</td>

Alex	Maths
	Science

Images in HTML

Images are displayed using the <img> tag.

Attribute	Purpose
src	Image path or URL
alt	Alternative text
width	Image width
height	Image height

<img src="flower.jpg" alt="Flower">

<img src="flower.jpg"
     alt="Flower"
     width="300"
     height="200">

<img src="https://example.com/image.jpg"
     alt="Online Image">

<a href="https://www.google.com">
   <img src="google.png" alt="Google">
</a>

Path Types

Relative Path - Image in the current project folder.
Absolute Path - Complete URL from the Internet.

Lab Practice

Create an education details table.
Create a student details table using colspan.
Create a timetable using rowspan.
Insert a local profile image.
Insert an online image.
Create a clickable image.

Summary

Tables organize information.
thead, tr, th and td build table structure.
colspan merges columns.
rowspan merges rows.
img displays images using src, alt, width and height.