Tabel algab sildiga <table> ja lõppeb sildiga </table>
<tr> ... </tr> tähistab rida
<td> ... </td> tähistab andmekasti
Katseta tabeli tegemist siin: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table
Ülesanne!
- Katseta, mida teeb tabelis style="width:300px". Muuda numbrit 300 suuremaks ja väiksemaks. Peale muutmist klõpsa "Submit Code".
- Lisa <table> sildi sisse border="1" (kood peab peale lisamist välja nägema selline: <table style="width:300px" border="1">). Katseta border numbri muutmist. Mida see number näitab?
- Lisa <table> sildi sisse, style määrangule lisaks style="width:300px;background-color:yellow" (kood peab peale lisamist välja nägema selline: <table style="width:300px;background-color:yellow" border="1">). Muuda koodis background-color värve näiteks red, green, blue.
HTML värvikoodid
http://www.w3schools.com/html/html_colornames.asp
Taustale värvi lisamine: <body style="background-color:#FFFF00"> - body sildi sisse saab lisada värvi, mis värvib ära terve tausta.
Loendid
Täpploendit saad katsetada siin: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4
Numbrilist loendit saad katsetada siin: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists
Ülesanne 2
Proovi teha värvilisele taustale värviline tabel!
Spikker:
<!DOCTYPE html>
<html>
<head>
<title>Minu lehekülg</title>
</head>
<body style="background-color:#FFFF00">
<h1>Minu esimene kodulehekülg</h1>
<table style="width:400px" border="1">
<tr style="background-color:red">
<td></td>
<td><b>Esimene veerg</b></td>
<td><b>Teine veerg</b></td>
</tr>
<tr style="background-color:green">
<td>Teine rida</td>
<td>Huvitav</td>
<td>Keeruline</td>
</tr>
<tr style="background-color:blue">
<td>Kolmas rida</td>
<td>Lihtne</td>
<td>Igav</td>
</tr>
</table>
</body>
</html>
Kel aega üle, siis proovige veebilehe koodi õppimist Codecademy lehel!
http://www.codecademy.com/courses/52ab6add1f6cf89a35000026/resume?curriculum_id=52b7bca98c1ccc4e47003d56
http://www.lego.com/en-us/mindstorms/funzone/fixthefactory/
