Ushtrimet me poshte ilustrojne perdorimin e tabelave ne HTML.
Ushtrim 1:
<!DOCTYPE html>
<html>
<head>
<title>Ushtrim 1 </title>
<head>
<body>
<table border="1">
<tr>
<td>Rreshti 1 Qeliza 1</td>
<td>Rreshti 1 Qeliza 2</td>
</tr>
<tr>
<td>Rreshti 2 Qeliza 1</td>
<td>Rreshti 2 Qeliza 2</td>
</tr>
</table>
</body>
</html>
Rezultati:
Rreshti 1 Qeliza 1
Rreshti 2 Qeliza 1
Rreshti 1 Qeliza 2
Rreshti 2 Qeliza 2
Ushtrim 2:
<!DOCTYPE html>
<html>
<head>
<title>Ushtrimi 2 </title>
<head>
<body>
<table border="1">
<tr>
<td width="50%">
<ul>
<li>Element Liste 1</li>
<li>Element Liste 2</li>
<li>Element Liste 3</li>
</ul>
</td>
<td>
<ol>
<li>Element Liste 4</li>
<li>Element Liste 5</li>
<li>Element Liste 6</li>
</ol>
</td>
</tr>
<tr>
<td>
<p>Ky eshte nje paragraf ne HTML...</p>
</td>
<td>
<a href="http://www.fshn.edu.al" target="_blank" >
<img src="http://www.fshn.edu.al/_/rsrc/1351871461143/config/customLogo.gif?revision=20" width=200 height=60 />
</a>
</td>
</tr>
<tr>
<td>
<p>
<b> Bold </b> <br/>
<i> Italic </i> <br/>
<u> Undelined </u> <br/>
<sub> Subscript </sub> <br/>
<sup> Superscript </sup> <br/>
<strike>Strike </strike> <br/>
<big> BIG </big> <br/>
<small> SMALL </small> <br/>
</p>
</td>
<td bgcolor="silver">
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
</td>
</tr>
</table>
</body>
</html>
Rezultati:
Element Liste 1
Element Liste 2
Element Liste 3
Ky eshte nje paragraf ne HTML...
Bold
Italic
Undelined
Subscript
Superscript
Strike
BIG
SMALL
Element Liste 4
Element Liste 5
Element Liste 6
Heading 4
Heading 5
Heading 6
Ushtrim 3:
<!DOCTYPE html>
<html>
<head>
<title>Ushtrimi 3 </title>
<head>
<body>
<table border="1">
<tr title="Ky eshte rreshti i I-re" bgcolor="silver">
<td>Rreshti 1 Qeliza 1</td>
<td>Rreshti 1 Qeliza 2</td>
</tr>
<tr title="Ky eshte rreshti i II-te" bgcolor="aqua">
<td>Rreshti 2 Qeliza 1</td>
<td>Rreshti 2 Qeliza 2</td>
</tr>
</table>
</body>
</html>
Rezultati:
Rreshti 1 Qeliza 1
Rreshti 2 Qeliza 1
Rreshti 1 Qeliza 2
Rreshti 2 Qeliza 2
Ushtrim 4:
<!DOCTYPE html>
<html>
<head>
<title>Ushtrimi 4 </title>
<head>
<body>
<table border="10" align="left">
<tr align="center" >
<td><b>Kolona 1</b></td>
<td><b>Kolona 2</b></td>
<td><b>Kolona 3</b></td>
</tr>
<tr align="center">
<td rowspan="2">Rreshti 1 Qeliza 1</td>
<td>Rreshti 1 Qeliza 2</td>
<td>Rreshti 1 Qeliza 3</td>
</tr>
<tr align="center">
<td>Rreshti 2 Qeliza 2</td>
<td>Rreshti 2 Qeliza 3</td>
</tr>
<tr align="center">
<td colspan="3" >Rreshti 3 Qeliza 1</td>
</tr>
</table>
</body>
</html>
Rezultati:
Ushtrim 4:
<!DOCTYPE html>
<html>
<head>
<title>Ushtrim 5</title>
<head>
<body>
<table border="1" cellspacing="10" cellpadding="10" bgcolor="red">
<tr>
<td><b>Kolona 1</b></td>
<td><b>Kolona 2</b></td>
</tr>
<tr>
<td>Rreshti 1 Qeliza 1</td>
<td>Rreshti 1 Qeliza 2</td>
</tr>
<tr>
<td>Rreshti 2 Qeliza 1</td>
<td>Rreshti 2 Qeliza 2</td>
</tr>
</table>
</body>
</html>
Rezultati:
Kolona 1
Rreshti 1 Qeliza 1
Rreshti 2 Qeliza 1
Kolona 2
Rreshti 1 Qeliza 2
Rreshti 2 Qeliza 2
Ushtrim 5:
Ndertoni nje faqe te thjeshte HTML e cila permban nje tabele qe paraqet orarin tuaj javor. Cdo kolone e cila perfaqeson ditet e javes do te shfaqet me nje ngjyre te ndryshme.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<colgroup>
<col style="background-color:white">
<col style="background-color:yellow">
<col style="background-color:green">
<col style="background-color:blue">
<col style="background-color:red">
<col style="background-color:silver">
</colgroup>
<tr>
<th>Nr.</th>
<th>E Hene</th>
<th>E Marte</th>
<th>E Merkure</th>
<th>E Enjte</th>
<th>E Premte</th>
</tr>
<tr>
<td>1.</td>
<td>Lenda A1</td>
<td>Lenda A2</td>
<td></td>
<td>Lenda A4</td>
<td></td>
</tr>
<tr>
<td>2.</td>
<td></td>
<td></td>
<td>Lenda B3</td>
<td></td>
<td>Lenda B5</td>
</tr>
<tr>
<td>3.</td>
<td>Lenda C1</td>
<td></td>
<td></td>
<td>Lenda C4</td>
<td>Lenda C5</td>
</tr>
<tr>
<td>4.</td>
<td>Lenda D1</td>
<td>Lenda D2</td>
<td></td>
<td></td>
<td>Lenda D5</td>
</tr>
<tr>
<td>5.</td>
<td>Lenda E1</td>
<td>Lenda E2</td>
<td>Lenda E3</td>
<td>Lenda E4</td>
<td>Lenda E5</td>
</tr>
</table>
</body>
</html>
Rezultati:
Ushtrim 6:
Ndertoni nje faqe HTML layout-i se ciles eshte ndertuar me ane te nje tabele me 3 rreshta ku rreshti pare perfaqeson headerin e faqes dhe brenda tij vendoset nje imazh ne formen e bannerit. Rreshti i dyte, trupi faqes, eshte ndare ne 3 kolona ku ne kolonen e pare kemi paraqitur me ane te listave kater here fjalen menu1. Kjo perfaqeson menune vertikale. Ne rreshtin e trete vendosni copyright e cila eshte dhe footeri i faqes.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td colspan="3"><img src="http://www.fshn.edu.al/_/rsrc/1351871461143/config/customLogo.gif?revision=20" alt="no img" height=70></td>
</tr>
<tr>
<td>Menu kryesore:<ul>
<li>menu 1</li>
<li>menu 1</li>
<li>menu 1</li>
<li>menu 1</li>
</ul></td>
<td><center>Permbajtja e faqes </center></td>
<td><center>Banner</center></td>
</tr>
<tr>
<td colspan="3"><center>Copyright</center></td>
</tr>
</table>
</body>
</html>
Rezultati:
Menu kryesore:
menu 1
menu 1
menu 1
menu 1
Permbajtja e faqes
Banner
Copyright