Otwórz notatnik systemowy (np. Notepad ++) i wpisuj do tworzonych plików kolejno pojawiający się kod. W przeglądarce obserwuj pojawiające się zmiany. Rozpoczynamy od wpisania minimalnego kodu strony internetowej w języku html:
<html>
<head>
<title>Marek jest moim kumplem</title>
</head>
<body>
</body>
</html>
Zachowaj plik pod nazwą table1.html w folderze .../Pulpit/tabele. Odtąd będzie to nasz folder roboczy. Otwórz utworzony plik w domyślnej systemowej przeglądarce WWW. Pracuj interaktywnie w dwóch aplikacjach Notatniku++ i przeglądarce WWW. Po modyfikacji plików html i zachowaniu zmian (ctrl + s), odświeżaj informację w przeglądarce (ctrl + r lub F5).
Wpisz do pliku tagi <table>. Będą one oznaczały początek i koniec tabeli.
<html>
<head>
<title>Marek jest moim kumplem</title>
</head>
<body>
<table>
</table>
</body>
</html>
Każda tabela składa się z co najmniej jednego rzędu.
<html>
<head>
<title>Marek jest moim kumplem</title>
</head>
<body>
<table>
<tr>
</tr>
</table>
</body>
</html>
i oczywiście każdy rząd musi zawierać co najmniej jedną komórkę.
<html>
<head>
<title>Marek jest moim kumplem</title>
</head>
<body>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
Wszystkie modyfikacje, które będą dokonywane, będą się znajdowały wewnątrz tagu table. Wszystkie pozostałe elementy (head, body, title, etc) pozostają na swoich miejscach.
<table>
<tr>
<td></td>
</tr>
</table>
Teraz musimy coś włożyć do wnętrza tabeli. Wpiszmy słowo "Iza" do wnętrza tagu <td> (komórki).
<table>
<tr>
<td>Iza</td>
</tr>
</table>
Właśnie wykonałeś pierwszą, w pełni funkcjonalną tabelę html! Otwórz plik w przeglądarce i sprawdź efekty swojej pracy! Jeżeli wszystko przebiegło pomyślnie, powinieneś zobaczyć taki obraz:
| Iza | ||
he, he żartowałem! To jest to, co tak naprawdę stworzyłeś:
| Iza |
Tabela nie jest widoczna, w niewidocznej komórce widoczne jest jednak słówko "Iza"