Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/40-tabela-na-div.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Tabela na div |
Wpisany przez Patryk yarpo Jar | |||
piątek, 18 września 2009 02:58 | |||
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="styleshet" 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: 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: 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.
|