Budujemy tabelę - tworzenie nowych tagów

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: div kurs css

Na tej lekcji odejdziemy od wykonywanego projektu [potem wrócisz do niego sam i pozmieniasz, co będziesz uważał za konieczne], aby dokładniej zapoznać się z zastosowaniem "DIV-ów".

Spróbujemy wykonać stronę z tabelą, ale nie tą zdefiniowaną w HTML - <TABLE> - tylko taką z DIV.

Kod HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div> // 1
<div class="linia"> // 2
<div class="komorka">To jest jedna komorka</div> // 3
<div class="komorka">To jest druga komorka</div> // 3
</div> // 4
</div> // 5

</body>
</html>

Opis:

1 - Otwieram pierwszą warstwę - można by to przetłumaczyć na 'TABLE', gdyż będzie pełnić identyczne funkcje
2 - Otwieram kolejną warstwę - będzie zastępować tr
3 - Warstwy zastępujące td
4, 5 - zamykam warstwę 'linia' i ogólną

Póki co - bez kodu css to jest to będzie to jedna warstwa - posiadająca w sobie warstwę, która ma dwie warstwy w sobie - jedna pod drugą. I gdzie ten efekt! To nie wygląda jak tabela.. Ale dodajmy trochę CSS.

Plik CSS:

div {
border: 1px solid black;    // 1

margin: 0;                  // 1
padding: 2px;               // 1
width: 300px;               // 1
vertical-align: top;}       // 1

div.linia {                 // 2
width: inherit;             // 3
padding: 4px 0 4px 0;    // 2
border: 0; }                // 2

div.komorka {               // 4
display: inline;            // 5
width: 142px; }             // 4

Opis:

1 - tworzę regułę dla zwykłego div. Właśnie ten div "zastępuje" nam <TABLE>
2 - tworzę regułę dla klasy 'linia', która ma zastąpić <tr>
3 - nowość 'właściwość: inherit' oznacza, że ten element ma mieć identyczną właściwość jak element nadrzędny dla niego - w tym wypadku zwykły div [i tak odziedziczył by to, ale chciałem pokazać inną możliwość - w ten sposób można nadawać kolor linkom <a> umieszczonym w akapicie. W regule opisującej akapit musi być zawarta definicja koloru textu]
4 - tworzę regułę dla klasy 'komorka'
5 - zmieniam sposób wyświetlania na 'inline', czyli w linii. Dzięki temu dwa divy będą umieszczone obok siebie.

Popróbuj jeszcze dodając po raz kolejny cały div 'linia' zaraz po zamknięciu tego pierwszego, ale jeszcze w obszarze warstwy ogólnej. Powinieneś otrzymać efekt identyczny do dodania nowego wiersza do tabeli.

Mam nadzieję, że już teraz widzisz, że DIV jest jakby pustą kartką na której możemy narysować co chcemy - tworzyć jakby własne tagi! Powyższy przykład nie stworzył żadnego nowego tagu - bo przecież tabele już są, ale dobrze zobrazował możliwości warstw - a to dopiero początek. Zapraszam dalej.

PS. Jeśli chcesz wprowadzić jakiekolwiek zmiany w poprzednim projekcie możesz to teraz zrobić. Tamten projekt jest już zamknięty. Teraz zajmiemy się czym innym.

Patryk 'yarpo' Jar

szukaj: div div kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!