Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [MySQL][PHP]Tabelka obok tabelki
Forum PHP.pl > Forum > Przedszkole
Barcelona
Witam, aktualnie zastanawiam się nad takim problemem. Chcę na stronie głównej wyświetlać 3 ostatnie dodane rekordy.
Chciałbym aby te rekordy były wyświetlane w 3 osobnych tabelach i aby te 3 tabelki były obok siebie.
Jednak wszystkie moje próby kończą się tym że tabelki są wyświetlane pod sobą:

Niby są to banały ale kombinuje i wykombinować nie mogę:

  1. <table>
  2. <?
  3. $zapytanie = "SELECT * FROM `ogloszenia` LIMIT 3";
  4. $wykonaj = mysql_query($zapytanie);
  5. while ($rekord = mysql_fetch_array($wykonaj))
  6. {
  7. $obrazek = $rekord['obrazek'];
  8. $data = $rekord['data'];
  9.  
  10. echo <<<KONIEC
  11. <tr><td><table width="33%"><tr><td>
  12. <img src="img/mini/$obrazek.jpg"></td><td>Dzień dodania: $data</td></tr>
  13. </table></td></tr>
  14.  
  15. KONIEC;
  16. }
  17. ?>
  18. </table>
Kshyhoo
Pokaż całość, jak robiłeś.
thek
Tabelka to z tego co kojarzę element blokowy... potraktuj więc go jak diva winksmiley.jpg Nadaj floata smile.gif Co prawda nie testowałem tego, ale tak powinno zadziałać.
everth
Display:inline-block powinien wystarczyć
Barcelona
acha, czyli tabelkę umiejscowić w divie i nadać mu Display:inline-block, przetestuje i wrócę z editem
everth
Poczytaj o właściwości display. Po co go divować? Nadaj go tym trzem tabelom. Jedynie IE robi problemy, ale w linku masz opisany hack (przekreślona ikona IE) który powinien temu zaradzić. Float też zadziała, ale jego funkcja jest troszeczkę inna (i może bardziej problematyczna).
Barcelona
Poczytałem dzięki. Jednak sposób z divem okazał się trafny i pomógł smile.gif

Dzięki chłopaki.
thek
Podałem sposób z float bo moim zdaniem jest on mniej problematyczny z racji właśnie IE i jego problemów z display innym niż inline lub block. Moim zdaniem prościej nadać opływanie elementom i na koniec walnąć tylko by następny element po nich miał clear ustawiony, niż kombinować z hackami specjalnie pod IE smile.gif
everth
Z tego co wiem to IE od v7 już nie ma problemu z inline-block, choć jeśli to element table... Do wyboru, do koloru. Z float to mam nieciekawe wspomnienia gdyż w ten sposób bez dodatkowych elementów ciężko się je np. centrowało, czy np. trzeba było dodawać specjalną regułkę do kontenera żeby uznawał ich istnienie. Ale co kto woli.
PeHaPowiec
Może tak:


  1. <table border="0" cellspacing="30" cellpadding="10"><tr>
  2. <?
  3. $zapytanie = "SELECT * FROM `ogloszenia` LIMIT 3";
  4. $wykonaj = mysql_query($zapytanie);
  5. while ($rekord = mysql_fetch_array($wykonaj))
  6. {
  7. $obrazek = $rekord['obrazek'];
  8. $data = $rekord['data'];
  9.  
  10. echo '<td bgcolor="gray"><img src="img/mini/'.$obrazek.'.jpg"><br> Dzień dodania: <b>'.$data.'</b></td>';
  11. }
  12. ?>
  13. </tr></table>



Powinno śmigać
Pozdrawiam
Barcelona
@PeHaPowiec działa ale nie mogę robić kolejnych td tylko muszę korzystać z br, więc bedzie to mało eleganckie rozwiązanie.

@everth mam IE w wersji 7.0 i jak zwykle to ustrojstwo robi problemy. Jak zrobiłem inline-block to i tak pokazało mi w pionie, dopiero musiałem z twojego linka skorzystać i tam było lekarstwo na IE ale to i tak papranina wyszła bo musiałem tabele umiejscowić w li i dodatkowo każde td w span - masło maślane. Życie było by łatwiejsze bez IE winksmiley.jpg

@thek mógłbyś zaprezentować jakiś przykład jak by to miało wyglądać?

Już niby działa ale wiem że to jest dobre rozwiązanie.

Pozdrawiam
----------------------------------
EDIT:

Adres strony: http://vikor.eu/index.php?strona=main

Na stronie głównej w "Ostatnio dodane" jest właśnie ta tabelka. Jak pewnie zauważycie jest ona oddalona od lewej krawędzi co psuje wizerunek. Dodatkowo musiałem wykorzystać styl white-space: nowrap; bo łamało mi linie na ostatniej tabelce.

  1. <div class="nobr">
  2. <ul>
  3. <?
  4. $zapytanie = "SELECT * FROM `ogloszenia` LIMIT 3";
  5. $wykonaj = mysql_query($zapytanie);
  6. while ($rekord = mysql_fetch_array($wykonaj))
  7. {
  8. $obrazek = $rekord['obrazek'];
  9. $data = $rekord['data'];
  10. $marka = $rekord['marka'];
  11. $model = $rekord['model'];
  12. echo <<<KONIEC
  13. <li class="test"><span>
  14.  
  15. <table width="200px" class="ogloszenie"><tr><td colspan="2" align="center">
  16. <img src="img/mini/$obrazek.jpg"></td><td></td></tr>
  17. <tr><td class="og">Data:</td><td>$data</td></tr>
  18. <tr><td class="og">Marka:</td><td>$arka</td></tr>
  19. <tr><td class="og">Model:</td><td>$model</td></tr>
  20. </table>
  21. </span></li>
  22. KONIEC;
  23. }
  24. ?>
  25. </ul></div>


  1. .nobr {white-space: nowrap;}
  2. .test {display:inline;}
  3. .test span {display:inline-block;}


Pozdrawiam
everth
Trochę pokombinowałeś. Spróbuj tak:
  1. <ul>
  2. <li>
  3. <a href=''><img src='' /></a>
  4. <table>...</table>
  5. </li>
  6. </ul>

Gdzie li ma inline-block, a obrazek i tabela mają block. W IE możesz dopisać hack nadający li właściwość float zamiast inline np
  1. * float:left

Pisane na szybko więc nie wiem czy zadziała
Barcelona
@everth Zrobiłem coś w tym właśnie stylu i działa. Tylko znowu mam mały problem estetyczny. W operze ta tabelka z ostatnimi ogłoszeniami jest opuszczona pare mm a w IE tabelka pokrywa się z górnym marginesem fieldset. Wiem że można to zrobić za pomocą margin-top ale jak zwiększe to wtedy w IE się poprawi ale za to w operze się wtedy za nisko opuści sciana.gif
Dlaczego to IE jest takie kłopotliwe

http://vikor.eu/index.php?strona=main
everth
Całe szczęście IE wie że jest ułomne i udostępnia różne sposoby dzięki którym tylko ona widzi pewne wartości CSS. Pierwszy lepszy opis. Dopisz sobie
  1. * margin-top:costam
dla IE
PeHaPowiec
Zagniezdzaj tabele w tabeli i mozesz rozwijac jak chcesz.

  1. <table border="0" valign="top" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td valign="top">
  4. <table valign="top" border="0" cellspacing="0" cellpadding="0">
  5. <tr>
  6. <td height="200" width="200" bgcolor="aqua"></td>
  7. </tr>
  8. <tr>
  9. <td height="200" width="200" bgcolor="red"></td>
  10. </tr>
  11. <tr>
  12. <td height="200" width="200" bgcolor="green"></td>
  13. </tr>
  14. </td>
  15. <td valign="top">
  16. <table border="0" cellspacing="0" cellpadding="0">
  17. <tr>
  18. <td height="200" width="200" bgcolor="black"></td>
  19. </tr>
  20. <tr>
  21. <td height="200" width="200" bgcolor="yellow"></td>
  22. </tr>
  23. </td>
  24. <td valign="top">
  25. <table border="0" cellspacing="0" cellpadding="0">
  26. <tr>
  27. <td bgcolor="gray" height="200" width="200" bgcolor="aqua"></td>
  28. </tr>
  29. </td>
  30. </tr>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.