Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML]Table czy Div
Rysh
post
Post #1





Grupa: Zarejestrowani
Postów: 821
Pomógł: 111
Dołączył: 11.09.2006
Skąd: Biała Podlaska

Ostrzeżenie: (0%)
-----


Mam takie pytanie, wczoraj postanowiłem zrobić sobie mapkę (w sumie nie wiem po co - chyba dla rozrywki - w każdym razie nie ważne). Z początku zrobiłem mapkę ( http://mouse.one.pl/~rysh/mapa.php ) na tabelkach, jednak później postanowiłem wykonać ją na div'ach. Jedna i druga metoda wyglądała identycznie, jednak moje pytanie dotyczy kiedy należy używać div a kiedy table.
Div - tworzenie layoutu
Table - do wyświetlania danych

W jakich okolicznościach jakiej metody używacie, kiedy div a kiedy table?
Co z formularzami? Czym jest np w takim wypadku mapa - i jakiej metody użyć do niej?

I przy okazji, czy dobrze wykonałem to na divach (CSS w źródle strony).
  1. $pion = 0;
  2. while ($pion < 15) {
  3. $poziom = 0;
  4. echo "<div class=\"poziom\">\n";
  5. while ($poziom < 15) {
  6. $co = rand(0,9);
  7. if ($poziom == 7 && $pion == 7) {
  8. echo "<div class=\"ty\"></div>\n";
  9. } else {
  10. if ($co == 0) {
  11. echo "<div class=\"skala\"></div>\n";
  12. } else {
  13. echo "<div class=\"trawa\"></div>\n";
  14. }
  15. }
  16. $poziom += 1;
  17. }
  18. echo "</div>\n";
  19. $pion += 1;
  20. }
  21. ?>


Ten post edytował Rysh 20.03.2010, 14:47:42
Go to the top of the page
+Quote Post
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


Jeśli chodzi o semantykę to w tym przypadku lepsze będą div-y. Poczytaj: http://osiolki.net/tabelki/
Go to the top of the page
+Quote Post
thek
post
Post #3





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D




Najprościej rzecz ujmując... dane tabelaryczne czyli jakieś zestawienia, tabele danych - tabela. Wszystko inne - div. Tak więc formularze podchodzą pod to drugie - div więc jest stosowany. Mapa to także dane nietabelaryczne = div (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Rysh
post
Post #4





Grupa: Zarejestrowani
Postów: 821
Pomógł: 111
Dołączył: 11.09.2006
Skąd: Biała Podlaska

Ostrzeżenie: (0%)
-----


Chciałbym zrobić w divie 'your' tekst był wyśrodkowany w pionie i poziomie. O ile text-align: center; działa to vertical-align: middle; nie.
Kod
div.mapa {
width: 675px;
height: 675px;
margin: 0 auto;
border: 1px solid #000000;
}

div.pole {
width: 45px;
height: 45px;
float: left;
}

#koniec {
background-color: #E0E0E0;
}

#notset {
background-color: #A0FA7F;
}

#your {
background-color: #FF0022;
text-align: center;
}


Oto kod generujący mapkę:
  1. echo "<div class=\"mapa\">\n";
  2. for ($i = 0 ; $i < 225 ; $i++) {
  3. if ($mapa[$i]['wlasciciel'] == 'koniec') {
  4. echo "<div class=\"pole\" id=\"koniec\"> </div>\n";
  5. } elseif ($mapa[$i]['wlasciciel'] == $_SESSION['id']) {
  6. echo "<div class=\"pole\" id=\"your\">". $mapa[$i]['wojsko'] ."</div>\n";
  7. } elseif ($mapa[$i]['wlasciciel'] == null) {
  8. echo "<div class=\"pole\" id=\"notset\"> </div>\n";
  9. }
  10. if ((($i+1)%15) == 0) {
  11. echo "<br />";
  12. }
  13. }
  14. echo "</div>\n";
Go to the top of the page
+Quote Post
DiH
post
Post #5





Grupa: Zarejestrowani
Postów: 251
Pomógł: 34
Dołączył: 7.01.2010

Ostrzeżenie: (0%)
-----


A ja tam z innej beczki. Zamiast męczyć się z takim zapisem:
  1. echo "<div class=\"pole\" id=\"koniec\"> </div>\n";

napisz po prostu:
  1. echo '<div class="pole" id="koniec"> </div>'."\n";


Z vertical-align będziesz miał problemy, bo różnie działa to pod przeglądarkami. Mając jednak stałą wysokość dlaczego po prostu nie ustawisz odpowiedniego marginesu od góry, aby treść znalazła się w połowie wysokości? Żeby nie było, sposób typu vertical-align, też jest możliwy, ale wymaga to więcej zachodu, niż jest warte.
Go to the top of the page
+Quote Post
Rysh
post
Post #6





Grupa: Zarejestrowani
Postów: 821
Pomógł: 111
Dołączył: 11.09.2006
Skąd: Biała Podlaska

Ostrzeżenie: (0%)
-----


Próbowałem zrobić tak jak mówisz. Efekt:
http://wstaw.org/w/2tU/
Go to the top of the page
+Quote Post
DiH
post
Post #7





Grupa: Zarejestrowani
Postów: 251
Pomógł: 34
Dołączył: 7.01.2010

Ostrzeżenie: (0%)
-----


Kod css podałeś. Mógłbyś też wynikowy html dać, zamiast tej papki w php? Choćby link to tego, czego screen wkleileś.
Go to the top of the page
+Quote Post
Rysh
post
Post #8





Grupa: Zarejestrowani
Postów: 821
Pomógł: 111
Dołączył: 11.09.2006
Skąd: Biała Podlaska

Ostrzeżenie: (0%)
-----


edit: adres usunięty - z powodu braku zabezpieczeń (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował Rysh 21.03.2010, 01:01:42
Go to the top of the page
+Quote Post
DiH
post
Post #9





Grupa: Zarejestrowani
Postów: 251
Pomógł: 34
Dołączył: 7.01.2010

Ostrzeżenie: (0%)
-----


Ach, w tym problem. W takim razie, nie margin-top, a padding-top. Jeżeli Twój div ma mieć 40px wysokości, a ustawisz mu padding-top:14px, to jego wysokość wyniesie 54px. Dlatego też powinieneś zmienić na np. padding-top:14px, height: 26px;

Pozdrawiam
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 23.08.2025 - 23:50