8. lecke - táblázatok

Az adatokat rendezzük táblázatba (tabla1.html)

Készítsük el a vaz.html felhasználásával az alábbit, s mentsük tabla1.html néven!

Figyeld meg alaposan a táblázat felépítését, mert ez már nem egyszerű (de logikus)!

table, tr, th,td

<h2>Iskolai órarendem</h2>
<table>
	<tr>
		<th>Óra</th>  <th>Hétfő       </th>  <th>Kedd</th>
	</tr>
	<tr>
		<th> 1.</th>  <td>Testnevelés </td>  <td>Olvasás</td>
	</tr>
	<tr>
		<th> 2.</th>  <td>Olvasás     </td>  <td>Olvasás</td>
	</tr>
	<tr>
		<th> 3.</th>  <td>Matematika  </td>  <td>Rajz</td>
	</tr>
	<tr>
		<th> 4.</th>  <td>Ének        </td>  <td>-</td>
	</tr>
</table>

Fejlesszünk egy kicsit rajta!

• Szúrd be a border='1' kiegészítést a <table> belsejébe! Mi történt? (Mentsd el!)
• Javítsd át border='0'-ra! Mi történt? (Lehetne akár 10 is.)

A <table> </table> a táblázat kezdetét végét, a <tr> </tr> (table row) a sorok elejét végét, a <th> </th> illetve <td> </td> pedig az adatok (table header ill. table data) kezdetét végét határolják.
A <th> </th> közé zárt adat vastagítva és középre igazítva jelenik meg.
A border='1' 1px vastag keretet húz a cellák köré (lehet növelni!).

Fejlesszünk még egy kicsit rajta!

• Legyen hétfőn 5. óra is! (Kedden nincs.) Mentsd tabla2.html néven!
• Még alakítsunk egyet rajta: legyen benne a szerdai órarend is (ekkor négy órád van)! Mentsd tabla3.html néven!

Ez is táblázat (csak egy kicsit szebb és bonyolultabb), a cellákban képek is vannak, sőt linkek (a gyümölcsökre lehet kattintani)! Befőzési naptár