Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html/css]zamiana tableki na semantyczny kod
Forum PHP.pl > Forum > Przedszkole
oggylwiatko
11.09.2008, 18:41:19
Jak zamienić poniżą tablkę tak by kod był semantyczny i zgodny z HTML 4.01 ? Niby można na DIV-ach, ale wychodzi strasznie dużo kodu :/ Może macie jakiś pomysł ? Męczę się z tym od paru godzin :/
Kod
<CENTER><TABLE cellpadding="0" cellspacing="0" width="90%">
<TR>
<TD style="width: 20px; height: 20px; background: url(images/page_01.png) no-repeat;"></TD>
<TD style="height: 20px; background-color: #FFFFFF"></TD>
<TD style="width: 28px; height: 20px; background: url(images/page_02.png) no-repeat;"></TD>
</TR>
<TR>
<TD style="width: 20px; background-color: #FFFFFF"></TD>
<TD style="background-color: #FFFFFF">a<br><br><br><br><br><br><br><br><br><br></TD>
<TD style="width: 28px; height: 20px; background: url(images/page_05.png) repeat-y;"></TD>
</TR>
<TR>
<TD style="width: 20px; height: 28px; background: url(images/page_04.png) no-repeat;"></TD>
<TD style="height: 28px; background: url(images/page_06.png) repeat-x;"></TD>
<TD style="width: 28px; height: 28px; background: url(images/page_03.png) no-repeat;"></TD>
</TR>
</TABLE></CENTER>
ferrero2
12.09.2008, 07:20:27
Tak pomysł jest taki jak napisałeś :
Zrobić to na divach.
Jeśli dobrze je porozkładasz to wcale dużo kodu nie ma.
Elementy liniowe możesz dodawać za pomocą <span> , blokowe <div>
Piszesz strukturę strony - style definiujesz w oddzielnym pliku.

Na tabelkach nie powinno się robić układów stron więc jak chcesz mieć zgodny kod to rób na divach.

Pozdrawiam
oggylwiatko
12.09.2008, 08:49:14
Wpadłem na lepszy pomysł.
Kod jak najbardziej semantyczny i zgodny z html 4.01 czyli:
Kod
<DIV id="main">
a<br><br><br><br><br><br><br><br><br><br>
</DIV>

... a resztę zrobię za pomocą css i pseudolementów after i before (chociaż będzie to wymagało innego pocięcia obrazków, ale duży problem to to nie jest) tongue.gif
JoShiMa
12.09.2008, 09:01:13
Cytat(oggylwiatko @ 12.09.2008, 09:49:14 ) *
Wpadłem na lepszy pomysł.
Kod jak najbardziej semantyczny i zgodny z html 4.01 czyli:
Kod
<DIV id="main">
a<br><br><br><br><br><br><br><br><br><br>
</DIV>

... a resztę zrobię za pomocą css i pseudolementów after i before (chociaż będzie to wymagało innego pocięcia obrazków, ale duży problem to to nie jest) tongue.gif


Cudowny pomysł szczególnie ten fragment kodu:
<br><br><br><br><br><br><br><br><br><br>
jest supersemantyczny. O padding w css nie słyszałeś?
Pilsener
12.09.2008, 14:02:41
Cytat
Jak zamienić poniżą tablkę tak by kod był semantyczny i zgodny z HTML 4.01 ? Niby można na DIV-ach, ale wychodzi strasznie dużo kodu :/


Semantyczna tabelka:
[HTML] pobierz, plaintext 
  1. <table>
  2.    <tr><td></td><td></td></tr>
  3.    <tr><td></td><td></td></tr>
  4. </table>
[HTML] pobierz, plaintext


Niesemantyczna tabelka:
[HTML] pobierz, plaintext 
  1. <div><CENTER>
  2.    <div width="20" height="30" size="8" padding="3" margin="5" align="left" valign="bottom"><div></div><div></div></div>
  3.    <div><div></div><div></div></div>
  4. </div></CENTER>
[HTML] pobierz, plaintext
oggylwiatko
12.09.2008, 15:20:04
Cytat(JoShiMa @ 12.09.2008, 09:01:13 ) *
Cudowny pomysł szczególnie ten fragment kodu:
<br><br><br><br><br><br><br><br><br><br>
jest supersemantyczny.

Cytat(oggylwiatko @ 11.09.2008, 18:41:19 ) *
TR>
<TD style="width: 20px; background-color: #FFFFFF"></TD>
<TD style="background-color: #FFFFFF">a<br><br><br><br><br><br><br><br><br><br></TD>
<TD style="width: 28px; height: 20px; background: url(images/page_05.png) repeat-y;"></TD>
</TR>

Nie wiem po co się czepiasz. Jestem po prostu konsekwentny. przecież wiadomo że w ciele tabeli jest coś więcej niż 10x <BR>, a to dałem tylko po to żeby zaznaczyć że w tym miejscu jest dużo linijek tekstu smile.gif

Pilsener, jeżeli ktoś potrzebuje przedstawić dane w tabeli to robi tabelkę i nie bawi się w DIV-y za wszelką cenę. Ale w moim przypadku tabelka byla tylko po to żeby oprawić treść w ładną ramkę. Czyli przerost ilości kodu do treści. Właściwie to zastanawiam się kiedy się przydaje ten display:table/table-row/table-cell. Przecież do ich użycia trzeba urzyć właśnie kodu typu
Kod
<DIV>
   <DIV>
     <DIV></DIV>
     <DIV></DIV>
     <DIV></DIV>
   </DIV>
   <DIV>
      <DIV></DIV>
    </DIV>
</DIV>

A jak sam zauważyłeś semantyczny to on nie jest, więc kiedy się tego używa !? ohmy.gif

BTW dziękuję za zaangażowanie. Problem rozwiązany tongue.gif
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.