Táblázatos vagy dives elrendezés?
Emlékeim szerint az akkori még PHP Studio fórumon beszéltek le a táblázatos elrendezésről - amit jól is tettetek - de a HTML tanár a táblázatos elrendezést erőlteti rám, hogy azt használjam, mert neki a div szétcsúszott, mikor próbálta (osztálytársamnak is, de ez az ő bajuk szvsz; meg sok mást is másképp mond (pl. w3cschools.com)). Szerencsére a HTML-t vágom, így nincs rám veszéllyel, de az adatbáziskezelésnél már gondban lehetek ezzel a tanítással. A kérésem, hogy írjátok meg érveléseiteket, hogy ti melyiket használjátok és miért, mert kiváncsi vagyok, hogy tényleg olyan sokan használnak táblázatot-e.
■ 
7 éve nem
+1
Hajrá div
Elgondolkodtató
Kihagytam a lényeget: a HTML tanár fogja tanítani az adatbázis kezelést is. Na és így értettem, hogy ha a HTML-ben is vannak dolgok, amelyeket nem megfelelően tanít, akkor sajnos az adatbázisnál jól megjárom majd.
A legjobb az, ha felkészülsz
Bocs, hogy ide írom, de ezt
Docco stílusú dokumentációt is dives elrendezésbe pakolnátok? Mert én nem, pedig én sem szeretem formatervezésre használni a táblázatokat. Szerintem ez a feladat meghaladja a dives pozicionálás pillanatnyi képességeit.
Határeset
<!DOCTYPE html><html><head>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
width: 400px;
margin: 0 auto;
background: #eeeeee;
background: -moz-linear-gradient(left, #eeeeee 0%, #eeeeee 50%, #cccccc 50%, #cccccc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(50%,#eeeeee), color-stop(50%,#cccccc), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
background: -o-linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
background: -ms-linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
background: linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
}
.clearfix {
clear: both;
}
.documentation {
float: left;
width: 190px;
padding-left: 10px;
}
.code {
float: left;
width: 190px;
padding-left: 10px;
white-space: pre;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="documentation">Lorem ipsum</div>
<div class="code">function () {
var x;
}</div>
</div>
<div class="clearfix">
<div class="documentation">Lorem ipsum dolor sit amet conseteur</div>
<div class="code">function () {}</div>
</div>
</body>
Ügyes! Csak azok a fix
Csak azok a fix szélességű divek az én világnézetemben legalább annyira csúnyák mint a táblázat. Úgyhogy megszázelékosítottam őket és így is stabil. (Firefox, Chrome, Opera.) A háttér kisimítása kevésbé sikerült. (Alul különbség van a háttérszín és a háttérkép között.)
Köszönöm a példát. A jövőben többször fogom átgondolni, mennyire kivitelezhető egy formaterv.
Vigyázni kell az iskolával!
Amikor a HTML-t táblázatokkal tanították (kb.2éve!) én már attól kikészültem. De elviseltem. A tanárunk (és ezért kell vigyázni az iskolával!) nem tudta alkalmazni a DIV-es felépítést és egyértelműen ezért volt annyira oda, hogy ragaszkodik a táblázathoz. De ha nem ragaszkodott volna, a "felsőfokú" programozók akkor is csak saját munkával tanulhatták volna meg, de egy iskolában a saját plusz tanulóórákra nem biztos, hogy van idő.
Végül fél év után eljöttem a suliból, mert kiderült, hogy a "FELSŐFOKÚ" képzésen csak szabadon felvehető tantárgyként tértek volna ki a JavaScriptre, amit azonban nem tudtam felvenni, mert egy kötelező "szabadon felvehető" óra pont egy időben volt vele. Na.. ilyenek vannak!
Az iskolát elvégezni kell, de a legfontosabb a gyakorlás! Nem szabad belenyugodni abba, ha egy-egy vizsgán sikeresen túl vagyunk. Gyakorolni, gyakorolni, gyakorolni kell. Nap mint nap jönnek új kisebb vagy nagyobb (pl.HTML5,CSS3) fejlesztések és ezeket az iskolai tanterv nem képes követni jellegéből adódóan.
Sokan esnek abba a hibába, hogy a napot várják amikor elvégzik az iskolát, mert az a tévhit él bennük, hogy azon a napon programozók lesznek. Ez egyetlen szakmával sincs így! Képzeld csak el ha ott maradok és CSAK a sulira koncentrálok, akkor mára végeztem volna el. És ma a JavaScript nélkül, hát szörnyű lenne...
Én azt ajánlom - amit én is tettem - hogy kezdj el egy saját oldalt építeni, amiből mindenből a legújabb módszereket alkalmazod. És ha emellett még az iskolát is lenyeled, akkor a kettő együtt már megéri a pénzét sztem. A tanárokkal meg nem érdemes vitába szállni...
Teljesen igazad van
Az ajánlatodat nagyon köszönöm, mivel tényleg hasznos. Eddig is csináltam magamnak például jegyzetelő alkalmazást, de azt is csak azért, mert szükség volt rá. Mostantól azt fogom tenni amit javasoltál nekem: a legújabb módszereket alkalmazom egy saját oldalon. Köszönöm ezt az értékes tanácsot!
A tanárokkal meg nem érdemes vitába szállni...
Miért nem? Ha az ember kulturáltan csinálja, még a tanár is tanulhat belőle, vagy egyszerűen kiderül, hogy a tanár nem ért hozzá (és esetleg az iskola is tudomást szerezhet a dologról). Ha a tanár nem képzi magát egy olyan témában, ami naponta változik, akkor nem érdemli meg, hogy ezt tanítsa.
Táblázat vagy CSS DIV ?
A sok tévhit kering, hogy táblázat vagy DIV.
Gyakorlatilag mindkettő kitűnően használható, a legjobb és legegyszerűbb, ha vegyesen építjük fel velük a honlapot.
A középre igazított, képernyőmérethez igazodó honlapoldal átlátható vázszerkezetének felépítéséhez, a forráskódban is egyszerűen követhető táblázatos szerkesztés nagyon egyszerű, míg a belső szövegtartalom stílus paraméterezett DIV-ekkel oldható meg szépen.
Gondolom most áll égnek mindkét szerkesztési eljárás fanjainak a haja, de nézzük át milyen tulajdonságok, előnyök és hátrányok jellemzik e két html tag használatát azon három szempont alapján, amelyek érdemi különbséget jelentenek:
- SEO (webes keresőprogramok találati lista sorrend)
- akadálymentes felület (csökkent látók számára szövegfelolvasás)
- szerkeszthetőség, böngészőfüggetlenség
SEO
Szavak, mondatok sorrendje a forráskódban eltérő.
A DIV-ekben folytonos a szöveg, míg a táblázatsorokban távol kerülhetnek egymástól összetartozó szavak, mondatok. (cellán belül folytonos a szöveg !), így egyes tartalmi elemek sorrendje szabadabban alakítható a kódban CSS-DIV használattal, ezért esetleg nagyobb lehet az esélye, hogy jobban szerepel a találati rangsorban. (Kulcsszótávolság meghatározása, Kulcsszavak súlyozása)
A táblázatos elrendezésű oldal azért nem szükségszerűen rossz a keresőkre optimizálás szempontjából, mint ahogyan a tisztán stíluslapokkal elrendezett oldal sem jelent szükségszerűen előnyt.
AKADÁLYMENTES FELÜLET (csökkent látók számára szövegfelolvasás).
A fogyatékkal élők a forráskód szövegének eltérő sorrendje miatt szembesülhetnek össze nem tartozó mondatokkal, ha felolvastatják maguknak az oldal tartalmát.
SZERKESZTHETŐSÉG, böngészőfüggetlenség.
Ez egy kicsit szőke vagy barna terület .. kinek mi tetszik. A táblázatos szerkesztés esetleg átláthatóbb, így speciális (DW8+) szerkesztőprogram nélkül is létrehozható vele honlapoldal.
Gyakorlatilag egy fontos dolog van, ha szerkesztéskor figyelünk a képernyőméret különbségekre, akkor CSS-DIV-vel összerakott oldalnál például a három oszlopos oldal bomoljon le egy oszloposra, hogyha nem elég széles a képernyő, míg a táblázatos építésnél százalékos cellaszélességgel kerülhetjük el a vízszintes görgetést, vagy üres területek megjelenését.
Ajánlatos figyelni erre, mert kis képernyővel rendelkező mobil eszközökön könnyen olvashatatlanná válik a honlap. (PDA, iPAD, Palmtop, Handheld PC, mobiltelefonok).
Persze vannak ajánlások amelyek igyekeznek néha önönérdekű szabályelvekbe szorítani technikákat, ráadásul a modern böngésző programok készítői, általában multinacionális okokból sajátos html és javascript értelmezést, megjelenítést produkálnak.
Ha valaki szép munkát akar kiadni a kezéből, akkor nem okvetlenül hagyatkozik a szerkesztőprogramok kínálta előgyártott programkódokra, ugyanakkor természetesnek veszi, hogy legalább mind az öt vezető programmal leellenőrzi (IE, FF, GC, O, S) munkáját.
Végezetül két DEMAGÓG, értelmetlen nézet a táblázatos szerkesztés ellen.
1. Nem szemantikus, a táblázatokat arra kell használni, amire kitalálták őket: adattáblák létrehozására, az oldalfelépítésre használt táblázat meg nem adattábla.
(a szabályelvűség mintapéldánya: a járda ott legyen ahova tervezték, nem pedig ahol céljuk érdekében naponta kijárják az emberek a gyepen keresztül)
2. A kód több helyet foglal.
(ezt talán nem is kommentálom .. )
Végre, valaki gondolkodik.
A diveknek viszont van még egy előnye a táblázatokkal szemben: a régebbi böngészőket úgy programozták (követve a szabványokat), hogy a táblázatokat akkor rendereljék le, amikor a teljes tartalmukat letöltötték, míg divek esetén már töltés közben megjelenik az oldal.
Tapasztalataim szerint nagyon ritkán van szükség táblázatok használatára divek helyett (és ebbe most nem számolom bele az eleve táblázatos tartalmakat), de akkor jól jönnek.
A táblázatos szerkesztés
Mitől átláthatóbb? Én nem látok semmi előnyt az átláthatóságban, mivel sokkal több elemet kell végigtekerni, mire megtalálja az ember a neki kellőt.
Poetronak igaza van,
,annyit tennék hozzá: a Komodo Edit asszem nem spéci progi, én azt és szigorúan div-eket használok. Az én forráskódomban egy byte sincs, amit ne én (,hanem valami csili-vili progi, pl. DW) írtam volna oda. Márpedig a táblázat nem jó formázásra.