A bejegyzés elkészítését a munkahelyemen tapasztalt, mindennapos, már megszokottnak mondható hibák miatt készítem. A célom, hogy a junior programozók NE kövessék el ezeket a hibákat, mert könnyen a projektek bukásához vezethetnek!
Nézzük is az első kódrészt: (nekem ez az egyik kedvencem :D )
<TABLE>
<TBODY>
<FORM ACTION="VALAMI">
<TR>
</TR>
</FORM>
<TR>
</TR>
<TR>
</TR>
</TBODY>
</TABLE>
Elég sok helyen találkozok ehez hasonló HTML kóddal, amivel az az alapszintű probléma van, hogy eleve sérti a TABLE szerkezetét. Ennek durvább változata, amikor FOREACH-be rakja a tbody tartalmát... ezt pedig gondolom, már írnom sem kell, hogy mihez vezet....
További probléma a resszponzivitás: ez a szerkezet mindig szét fog esni dolgozzunk bootstrapel, reactel vagy bármi mással.
Ha mindenképp form-ot akarunk tenni a table, azt a td tagek közé tegyük, de ez sem profi megoldás, inkább hagyjuk el, ha tehetjük.
Nálunk rendszeresen szűrök készíteskor követik el a junior programozók ezt a hibás szerkezetet, aminek az az ára, hogy sehogy sem lesz resszponzív a táblázat, ugyanis a nagyon sérti a table tag szerkezetét.
Ha jobban megnézzük, akkor egy sort <tr> fog közzé egy form-al, ami azért baj, mert mondjuk a bootstrap nem tud semmit kezdeni vele. A FORM egy block szintű tag, ami egyen értékű a DIV-el, SECTION-el, TABLE-el és még jó pár block szintű elemmel.
A TR azon kívül, hogy egy sort jelent a táblázaton belül, egy kötött szerkezeti tag, ami a table része.
Ahoz, hogy fent említett kód működjön - tehát resszponzív - CSS hacket kellene írnunk, de még az sem garancia a sikeres működésre, nem beszélve a a front-end oldali technológiákról, ahol ilyen és ehez hasonló szerkezetet nem kezelnek!
10 éves pályafutásom során még egyszer sem láttam ilyen kódot...
Egyébként a projekt vége az lett, hogy több hasonló hibát vétettek a front-enden, a junior kollégáim, ezért a megrendelő nem vette át a weboldalt. 2,5 hónapos projekt, az ilyen szerkezeti hibák miatt (is) 9 hónapos szenvedés lett nekik.
Persze, itt a vezetés is hibás, mert szenior fejlesztőt nem vontak be a projektbe, csak amikor elkezdődött. Viszont utána káosz lett, a jól felépített resszponzív layout-ot hetek alatt szétbombázták, a fenti HTML szintaxisokkal és még jó pár érdekes kóddal.
