Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: układ tabelaryczny na div
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
@rtur
22.03.2009, 13:23:38
Mam taki kod dla danych w tabeli, którą to tabele dla wygody chciałbym zamienić na divy:

[HTML] pobierz, plaintext 
  1. <table width="500" cellspacing="0" cellpadding="0" border="1">
  2. <tr>
  3. 	<td width="30" height="20" style="background-color: #99FF33">&nbsp;</td>
  4. 	<td width="130" height="20" style="background-color: #99FF33">&nbsp;</td>
  5. 	<td width="230" height="20" style="background-color: #99FF33">&nbsp;</td>
  6. 	<td width="30" height="20" style="background-color: #99FF33">&nbsp;</td>
  7. 	<td width="50" height="20" style="background-color: #99FF33">&nbsp;</td>
  8. 	<td width="20" height="20" style="background-color: #99FF33">&nbsp;</td>
  9. 	<td width="10" height="20" style="background-color: #99FF33">&nbsp;</td>
  10. </tr>
  11. <tr>
  12. 	<td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  13. 	<td width="130" height="20" style="background-color: #CCFF99">&nbsp;</td>
  14. 	<td width="230" height="20" style="background-color: #CCFF99">&nbsp;</td>
  15. 	<td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  16. 	<td width="50" height="20" style="background-color: #CCFF99">&nbsp;</td>
  17. 	<td width="20" height="20" style="background-color: #CCFF99">&nbsp;</td>
  18. 	<td width="10" height="20" style="background-color: #CCFF99">&nbsp;</td>
  19. </tr>
  20. <tr>
  21. <td width="30" height="20">&nbsp;</td>
  22. 	<td width="130" height="20">&nbsp;</td>
  23. 	<td width="230" height="20">&nbsp;</td>
  24. 	<td width="30" height="20">&nbsp;</td>
  25. 	<td width="50" height="20">&nbsp;</td>
  26. 	<td width="20" height="20">&nbsp;</td>
  27. 	<td width="10" height="20">&nbsp;</td>
  28. </tr>
  29. <tr>
  30. <td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  31. 	<td width="130" height="20" style="background-color: #CCFF99">&nbsp;</td>
  32. 	<td width="230" height="20" style="background-color: #CCFF99">&nbsp;</td>
  33. 	<td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  34. 	<td width="50" height="20" style="background-color: #CCFF99">&nbsp;</td>
  35. 	<td width="20" height="20" style="background-color: #CCFF99">&nbsp;</td>
  36. 	<td width="10" height="20" style="background-color: #CCFF99">&nbsp;</td>
  37. </tr>
  38. <tr>
  39. <td width="30" height="20">&nbsp;</td>
  40. 	<td width="130" height="20">&nbsp;</td>
  41. 	<td width="230" height="20">&nbsp;</td>
  42. 	<td width="30" height="20">&nbsp;</td>
  43. 	<td width="50" height="20">&nbsp;</td>
  44. 	<td width="20" height="20">&nbsp;</td>
  45. 	<td width="10" height="20">&nbsp;</td>
  46. </tr>
  47. <tr>
  48. <td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  49. 	<td width="130" height="20" style="background-color: #CCFF99">&nbsp;</td>
  50. 	<td width="230" height="20" style="background-color: #CCFF99">&nbsp;</td>
  51. 	<td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  52. 	<td width="50" height="20" style="background-color: #CCFF99">&nbsp;</td>
  53. 	<td width="20" height="20" style="background-color: #CCFF99">&nbsp;</td>
  54. 	<td width="10" height="20" style="background-color: #CCFF99">&nbsp;</td>
  55. </tr>
  56. <tr>
  57.   <td width="30" height="20">&nbsp;</td>
  58. 	<td width="130" height="20">&nbsp;</td>
  59. 	<td width="230" height="20">&nbsp;</td>
  60. 	<td width="30" height="20">&nbsp;</td>
  61. 	<td width="50" height="20">&nbsp;</td>
  62. 	<td width="20" height="20">&nbsp;</td>
  63. 	<td width="10" height="20">&nbsp;</td>
  64. </tr>
  65. <tr>
  66. <td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  67. 	<td width="130" height="20" style="background-color: #CCFF99">&nbsp;</td>
  68. 	<td width="230" height="20" style="background-color: #CCFF99">&nbsp;</td>
  69. 	<td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  70. 	<td width="50" height="20" style="background-color: #CCFF99">&nbsp;</td>
  71. 	<td width="20" height="20" style="background-color: #CCFF99">&nbsp;</td>
  72. 	<td width="10" height="20" style="background-color: #CCFF99">&nbsp;</td>
  73. </tr>
  74. <tr>
  75. <td width="30" height="20">&nbsp;</td>
  76. 	<td width="130" height="20">&nbsp;</td>
  77. 	<td width="230" height="20">&nbsp;</td>
  78. 	<td width="30" height="20">&nbsp;</td>
  79. 	<td width="50" height="20">&nbsp;</td>
  80. 	<td width="20" height="20">&nbsp;</td>
  81. 	<td width="10" height="20">&nbsp;</td>
  82. </tr>
  83. <tr>
  84. <td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  85. 	<td width="130" height="20" style="background-color: #CCFF99">&nbsp;</td>
  86. 	<td width="230" height="20" style="background-color: #CCFF99">&nbsp;</td>
  87. 	<td width="30" height="20" style="background-color: #CCFF99">&nbsp;</td>
  88. 	<td width="50" height="20" style="background-color: #CCFF99">&nbsp;</td>
  89. 	<td width="20" height="20" style="background-color: #CCFF99">&nbsp;</td>
  90. 	<td width="10" height="20" style="background-color: #CCFF99">&nbsp;</td>
  91. </tr>
  92. </table>
[HTML] pobierz, plaintext

Nie bardzo wiem jak zamienić 7 kolumn na divy, znalazłem wersje 3 kolumny na divy ale tu mam ich dużo więcej sad.gif((
Mozecie mi pomóc podpowiadając jak powinien wyglądać kod html/css dla takiego układu tabelarycznego?

Z góry dziękuje.
Mephistofeles
22.03.2009, 13:51:42
Jeśli w tej tabeli trzymasz dane, to jest to jak najbardziej poprawne semantycznie. Tabele właśnie do tego służą przecież. Lepiej usuń width, height itd. z kodu, a daj do cssa, tabeli nadaj odpowiednią klasę i będzie to bardziej czytelne od divów.
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.