[html/css]zamiana tableki na semantyczny kod Opcje

[oggylwiatko]

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>

Ten post edytował oggylwiatko 11.09.2008, 18:43:18

[ferrero2]

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]

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) (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

[JoShiMa]

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) (IMG:http://forum.php.pl/style_emoticons/default/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]

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 
<table>
   <tr><td></td><td></td></tr>
   <tr><td></td><td></td></tr>
</table>
[HTML] pobierz, plaintext 

Niesemantyczna tabelka:

[HTML] pobierz, plaintext 
<div><CENTER>
   <div width="20" height="30" size="8" padding="3" margin="5" align="left" valign="bottom"><div></div><div></div></div>
   <div><div></div><div></div></div>
</div></CENTER>
[HTML] pobierz, plaintext 

[oggylwiatko]

Cudowny pomysł szczególnie ten fragment kodu:
<br><br><br><br><br><br><br><br><br><br>
jest supersemantyczny.

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 (IMG:http://forum.php.pl/style_emoticons/default/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 !? (IMG:http://forum.php.pl/style_emoticons/default/ohmy.gif)

BTW dziękuję za zaangażowanie. Problem rozwiązany (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Ten post edytował oggylwiatko 12.09.2008, 15:23:41