ugrás a tartalomhoz

Miért CSS, miért nem TABLE?

Anonymous · 2006. Feb. 6. (H), 08.40
Üdvözlrt mindenkinek!

Az lenne a kérdésem, hogy miért jobb div -ekkel, meg CSS -el felépíteni az oldalakat, a jól bevált táblázatos megoldások helyett?

Itt a fórumban is állandóan azt írja mindenki, hogy "CSS -s használj, ne táblát!", valamint a igen hosszú cikk is van erről, de számomra nem világos, hogy miért.

Megpróbáltam egy álltalam épített táblázatos oldalt átírni CSS -re, melynek eredményeként, kaptam egy 5x nagyobb forráskódot, valamint rengeteg akadályt, megoldandó problémát, ami nem is lett volna, ha tábázanál maradok.

Kérem valami GURU írja meg legyenszives, hogy akkor ez miért is jó?
‹ csshover -js IE néha nem reagál ›
 ■
1

<Nincs cím>

-zsolti- · 2006. Feb. 6. (H), 10.05
Hát ha a cikk alapján nem volt világos, akkor inkább olvasd el mégegyszer. Egyébként az, hogy 5x nagyobb kódot kaptál, rengeteg akadályba ütköztél, az csak is "magadnak köszönhető" illetve a tapasztalat-hiányodnak, ez nem a technológia negatívuma. Ugyanis egy jól megtervezett css+div oldal tud kisebb forrást adni, mint egy táblázatokkal beállított - pláne "sok html oldal" esetében. De az előnye nem (csak) ez. CSS alapvetően azért, hogy elkülönüljön a megjelenítés a valódi html-től. Másrészt csak egy helyen kelljen áttírni a tulajdonságot, és az hatással lesz az egész oldalra -> az egész sitera. Harmadrészt CSS cachelődik kliensoldalon, ez gyorsítja az oldalletöltődést, ami máris ellensúlyozta az állítólagos "5x nagyobb forráskódot". De ezek tényleg csak a leglényegesebb érvek mellette.
2

table helyett

Gal Kristof · 2006. Feb. 6. (H), 10.38
gondolom azért lehet nagyon nagy a kód, mert minden cella helyett csináltál egy div-et, vagy valami hasonló - tévesen értelmezett - felhasználási módját választottad a css technikának.
3

Néhány előny

suexID · 2006. Feb. 6. (H), 10.40
Így látatlanba meg tudom mondani neked, hogy az 5* nagyobb forráskód valószínűleg a helytelen CSS használat és a táblázatos gondolkodásmód eredménye lehet nálad.

Miért ne táblázattal?
  • A táblázatok arra a célra szolgálnak, hogy táblázatos adatokat (statisztika, névsor, stb.) tároljunk bennük és nem arra, hogy az oldal szerkezetét meghatározzuk vele. Mint ahogy a processzort sem használod tojásrántotta készítésére, úgy a táblázatokat sem kell design kialakítására használni.
  • A táblázatok tulajdonképpen egy rácsos szerkezetet valósítanak meg, ezáltal korlátoznak téged a design kialakításába. Ahhoz, hogy bizonyos hatásokat elérj a táblázatokkal, újabb táblákat kell beszúrni, ezáltal újabb rácsok és korlátok jönnek létre. Végül oda lyukadunk ki, hogy az egész lapod egy pókháló lesz, amiből nem tudsz majd kitörni.
  • A CSS kód tisztább és áttekinthetőbb mint a táblázatos. Ennek oka, hogy a DIV-ekkel megvalósított design esetében a pozíció, a keret tulajdonságai és a háttér nem a HTML kódban tárolódnak, hanem egy külön CSS fájlban.
  • Kellő tapasztalattal az ember sokkal, de sokkal gyorsabban tud CSS alapú lapokat kódolni, mint táblázatos lapokat. Nem kell hozzá egy fél életet rászánni, hogy kitapasztald az apró trükköket. Elég kb. fél év, és szorgalmas gyakorlás, odafigyelés és érezni fogod a javulást.
  • A táblázatos oldalak a designerek poklát jelentik. Egy apró módosítás keresztülviteléhez több tucat sort kell módosítani, míg DIV-es kialakításnál elég lehet 1-2 sornyi CSS kód átírása.


Röviden ennyi, ha van még kérdésed, szívesen válaszolok! ;)
4

CSS vs Táblázatok - szemlélet

Dualon · 2006. Feb. 6. (H), 12.11
A többiek már elég sok dolgot leírtak, csak kiegészíteném őket. A CSS, XHTML alapú, szabványkövető technikákra pontatlanul csak "CSS-es arculat"-ként fogok hivatkozni.
A "modern honlapépítésben" a törekvések (többek közt):
  • a lehető legjobb user experience, felhasználói élmény: a gyorsan töltődő lapok ennek egy aspektusát képviselik, egy letisztult CSS-XHTML megoldás akár 50-60%-kal is csökkentheti a letöltendő adatmennyiséget (ezáltal egyébként a sávszélességet is kímélve).
  • accessibility: e téren nincs túl sok tapasztalatom, de úgy hiszem, kényelmesebb egy szabványkövető lapot hallgatni pl. felolvasóprogramokban, jobban lehet rajt navigálni, stb.
  • a fentiek eléréséhez is a szemantika szem előtt tartására törekszünk, vagyis igyekszünk olyan kódot írni, amelyből a gép értheti, hogy miről van szó (a szemantikus webnek bőven utána tudsz olvasni akár itt is). A Mona Lisa mosolya is rosszul nézne ki egy táblázatba összeharcolászva - ha belegondolsz, a táblázat nekünk, embereknek sem ezt jelenti. Itt utalnék suexID tojássütős hasonlatára. :) Ez elsőre lényegtelen elvi kérdésnek tűnhet, később hamar rászokik az ember. Ahol lehet, használj az XHTML-ben arra a célra kitalált elemeket: címekhez h1-h6-ot, szövegparagrafusokhoz p-t, stb. Gyakori hiba, hogy mindent div-ekkel és span-okkal akarnak megoldani.
  • fejlesztés, karbantartás: erre is utaltak már; ég és föld a különbség (CSS-es lapnál lehet, hogy két sornyi CSS átírásával megúszod pl. az oszlopok teljes inverzióját - gondolj bele, táblázatoknál ez mit jelent...)
  • keresők: tapasztalataim szerint jobban szeretik a szabványkövető, CSS+XHTML lapokat. Sokkal jobban.


A táblázatos oldalak elhagyása nem divat, egyszerűen kötelező elem. Érdemes XHTML-t használni, de egy szabványos HTML 4.01 is jobb a semminél. :)

A vakbarát lapfelépítésnek, a táblázatos oldalak hátrányainak, a webfejlesztés irányelveinek bőséges irodalma van akár itt, a Weblaboron is.

(Szerk.: Elgépelés)

Dúalon
http://e-arc.hu/
5

CSS kontra tábla

comp · 2006. Feb. 6. (H), 18.34
Nekem CSS-ben egy komoly problémám akadt eddig, amit nem tudtam megoldani eddig táblák használata nélkül: mégpedig az hogy valami középre kerüljön valamihez viszonyítva, a használt felbontástól és ablakmérettől függetlenül. Ismertek erre a problémára CSS megoldást/trükköt?
6

Középre

Cirby · 2006. Feb. 6. (H), 18.37
http://users.hszk.bme.hu/~hj130/css/elmelet/center/
7

Center

PogiG · 2006. Feb. 6. (H), 18.49
Éppen mostanában bajlódtam ezzel én is, de megvan, és egyszerű:

<html>
<head>
<style type="text/css">
<!--
body {
margin:0px;
overflow: hidden;
}
DIV.inner{
position:absolute;
top :50%;
width: 100%;
height: 300px;
margin-top: -150px;
background: blue;
}
-->
</style>
</head>
<body>
<div class="inner">
</div>
</body>
</html>

vagy:

<html>
<head>
<style type="text/css">
<!--
body {margin:0px;
overflow: hidden;
}
DIV.inner {position:absolute;
top :50%;
left:50%;
width: 200px;
height: 300px;
margin-top: -150px;
margin-left: -100px;
background: blue;}
-->
</style>
</head>
<body>
<div class="inner">
</div>
</body>
</html>

Remélem segítettem.
8

Elérhetetlen tartalom

Jano · 2006. Feb. 6. (H), 19.25
Ez a módszer nálad még elmegy de általános esetben nem!

A negatív margó hatására a tartalom túl kicsi ablak esetén felfelé is kiloghat es a felfelé, illetve balra kilogo reszekhez a bongeszo nem ad gorgetosavot és a tartalom egyresze igy elerhetetlen lesz!!
9

Megoldás?

PogiG · 2006. Feb. 6. (H), 19.38
Kezdő vagyok a témában, és ezt a negatív margós témát a
http://milov.nl/code/css/verticalcenter.html oldalon láttam.
Ezek szerint van jobb megoldás is.

Mit lehet ilyen esetben tenni?
10

ez is egy megoldas

Anonymous · 2006. Júl. 21. (P), 09.11
<html>
<head>
<title>DIV center</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #ffffff;
background: #1e1a48;
text-align: center;
}
div#container {
background: #fff;
height: 100%;
width: 770px;
padding: 0;
margin: 0 auto 0 auto;
position: relative;
border: none;
}
</style>
</head>
<body>
<div id="container">center</div>
</body>
</html>