[XHTML/HTML] Formatovani bez tabulek

Printable View

31.01.2005, 22:21
Lopan

[XHTML/HTML] Formatovani bez tabulek

Vsimam si, ze se stalo "modnim" nemit stranky pomoci <table> a par "uchylnych" jedincu to povazuje za jedine spravne psani stranek.
Docela by me zajimalo jak na to, pokud mam uvedeny <!DOCTYPE>, kdyz toto nefunguje

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <title>aaa</title> </head> <body> <div style="width: 100%"> <span style="width: 50%; text-align: left; border: 1px solid">aaa</span><span style="width: 50%; text-align: right; border: 1px solid">bbb</span> </div> </body> </html>

Bez <!DOCTYPE> to jede v pohode, ale nejsem prase abych neuvadel <!DOCTYPE>

Pokud to zaformatuju do tabulky

Kód:

<table style="width: 100%"> <tr> <td style="width: 50%">aaa</td> <td style="width: 50%">bbb</td> </tr> </table>

tak to jede bez problemu.

Ted, v cem je vyhoda neformatovat pomoci tabulek? Prehlednejsi kod, kdyz <span> musim cpat na jeden dlouhy radek???
Neco me asi unika.....
31.01.2005, 23:30
jedik

To ze to nefunguje je spravne. A presne podle specifikace. To ze to IE v quirk modu(bez DOCTYPE) zobrazuje je jen jeho bug!

Atribut width totiz na radkove elementy nefunguje.

Sirku radkoveho elementu urcis bud tak, ze mu udelas pading(-left/-right) nebo ho oznacis jako blokovy(display:block).

Pokud chces udelat 2 sloupcovy layout tak udelej normalne dva divy jeden jako float:left a druhy jako float:right + upravit dle tvych pozadavku.
31.01.2005, 23:47
PiT

jedik:

Ako potom spravis nieco taketo :?:

Kód:

<table style="width: 100%; background-color: #000000;" cellspacing="1" cellpadding="0" border="0"> <tr> <td style="width: 50%; background-color: #ffffff;">aaa</td> <td style="width: 50%; background-color: #ffffff;">bbb</td> </tr> </table>
01.02.2005, 00:14
jedik

Treba:

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <title>aaa</title> </head> <body> <div style="width: 100%;background-color: red;padding:2px;"> <div style="width: 50%; background-color: blue; float: left; ">aaa</div> <div style="width: 50%; background-color: green; float: right;">bbb</div> <div style="clear:both;"></div> </div> </body> </html>

S podruznostmi jako paddingy a marginy si uz lze hrat dle libosti :)
01.02.2005, 00:43
PiT

jedik:

Sprav plz PRESNE take iste, ako som pozadoval ;)
01.02.2005, 11:26
Lopan

Reseni zajimave, ale nedostatecne. Padding se napr. v Opere a IE chova jinak a pokud mam generovany text v divu, ktery zalamuji a meni se mu vyska, tak se me rozhodi cele formatovani radku, dalsi div se neprizpusobi.

Drobnosti, ktere me stale utvrzuji v tom, ze nepouzivat tabulky je prinejmensim sebemrskacske.

Pak je jeste dalsi problem, ze nekdo nori desitky tabulek do sebe (napr. phpBB :) ) a pak je nemozne se v tom vyznat, ale to je zase druhy extrem.
01.02.2005, 12:50
jedik

2Lopan: Zakldani tvrzeni vychazi z toho ze do tabulek by se meli davat tabulkova data(napr. prispevky zde na 4u). Co jsou a co nejsou tabulkova data je predmetem vecnych sporu, usudek si udelej sam. A nevnimej ty ortodoxni hnupy co prolizaji weby a hledaji nespravne pouzite tabulky ;)

Jinak ty box-modelove chyby IE se musi zelbohu resit CSS hacky. Ale na vine je IE.

2PiT: ty k tomu spatne pristupujes, neni cilem pripodobit CSS pozicovani tabulkam. Mysli v CSS a netransformuj tabulky ;) BTW: tj standardni vymluva ;D Pak se na to mrknu ale ted tizi zkousky :/
01.02.2005, 12:59
howard

Pouziti tabulek je vice kompatibilni i s ohledem na starsi prohlizece. (napr. IE, ze?) To je jejich velike plus.
Ovsem i zde narazite nekdy na problemy, je treba si ty tabulky dobre navrhnout.

V soucasne dobe se jiz nedoporucuje tabulky prilis pouzivat z nekolika duvodu.
Jednim z nich jsou napr. systemy, ktere vam ctou stranku. Pokud mate moc tabulek, tak s tim maji problemy. Kod je prehlednejsi a pomoci stylu se necha delat mnohem vic veci, nez s tabulkama.
Rekl bych, ze DIVy jsou budoucnost.

Jenom se desim toho, kdy M$ nekdy vyda IE7, ktery urcite zase totalne podela vsechny mozny standardy.
01.02.2005, 13:24
PiT

Citace:

Původně odeslal jedik

2PiT: ty k tomu spatne pristupujes, neni cilem pripodobit CSS pozicovani tabulkam. Mysli v CSS a netransformuj tabulky ;) BTW: tj standardni vymluva ;D Pak se na to mrknu ale ted tizi zkousky :/

Njn, lenze pomocou tabuliek si spravim pomerne jednoducho akukolvek (aj zlozitu) kostru stranky... Pomocou DIVov resp. CSS tazko....

Citace:

Původně odeslal howard

Rekl bych, ze DIVy jsou budoucnost.

Stojim si za tym, ze to, co zobrazis tabulkou (+ stylom aplikovanym na nu), sa ti DIVom (+ akokolvek nastavenym stylom) nepodari.

Uz len ten moj hlupy priklad... mas predel medzi bunkami (kazda je ohranicena 1nym pixlom, pricom dotykova plocha (stred) je tiez len jeden pixel)...
01.02.2005, 13:49
jedik

2PiT:
Samozrejme, ze pozicovani neni vsemocne. Stejne tak jako tabulky. Tu vetu, ze to co pomoci tabulek udelas neudelas pomoci pozicovani, lze velmi lehce obratit a uvest protipriklady. Casto to nejde, nebo to jde velice tezko :)

Nemam rad deleni tabulky a pozicovani. IMHO by to melo jit ruku v ruce.

Ja pozicovani nepouzivam protoze je to "moderni" ale proste kdyz se to hodi a do jiste miry je to i pohodlnejsi.
01.02.2005, 14:54
howard

Citace:

Původně odeslal jedik

2PiT:
Samozrejme, ze pozicovani neni vsemocne. Stejne tak jako tabulky. Tu vetu, ze to co pomoci tabulek udelas neudelas pomoci pozicovani, lze velmi lehce obratit a uvest protipriklady. Casto to nejde, nebo to jde velice tezko :)

A jeste k tem problemum muzes priradit ruzne zobrazeni v ruznych browserech - u obou zpusobu jsou vselijake problemy.
01.02.2005, 15:39
PiT

Citace:

Původně odeslal jedik

Ja pozicovani nepouzivam protoze je to "moderni" ale proste kdyz se to hodi a do jiste miry je to i pohodlnejsi.

Kedy sa hodi ???
01.02.2005, 16:44
jedik

Citace:

Původně odeslal PiT

Citace:

Původně odeslal jedik

Ja pozicovani nepouzivam protoze je to "moderni" ale proste kdyz se to hodi a do jiste miry je to i pohodlnejsi.

Kedy sa hodi ???

Tabulkami nasimulujes obtekane boxy?
Tabulkama prekryjes dva boxy?
Tabulkama nasimulujes umisteni nejakeho prvku na danou pozici(to sice i jo ale jakmile to budes chtit zmenit tak to ma vetsinou navaznost na celou tabulku)?

A to jsem vyjmenoval jen co me rychle napadlo.
01.02.2005, 16:46
Jezevec

2PiT: Tu mas upravene to css tak aby to vypadalo (az na drobny posun) uplne stejne ;) .

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <title>aaa</title> </head> <body> <div style="width: 100%;background-color: black;padding:1px;"> <div style="width: 50%; background-color: white; float: left; ">aaa</div> <div style="width: 50%; background-color: white; float: right;"> <div style="width: 1px; background-color: black; float: left; "></div> bbb</div> <div style="clear:both;"></div> </div> </body> </html>

EDIT: Samo ze se to chova ponekud jinak nez tabulka, ale ono delat web jen proto aby "vypadal" je taky blbost.

EDIT2: Jo, kdyby nekoho napadlo napsat vice radku, tak ten sloupec s mene radky bude pak doplnen cernou, coz jde osetrit zabalenim do dalsiho divu.
01.02.2005, 17:44
Lopan

4jedik: ale jak jsme uz psal, s promenlivou vyskou boxu si uz div neporadi. Na staticky obsah se hodi, ale na dynamicky bych to neriskoval.

Jinak pro zajemce
http://www.pixy.cz/dogma/dogmaw41/cs/

Nektere myslenky jsou dobre, nektere zcestne... ale stoji to za precteni.
01.02.2005, 18:39
jedik

Citace:

Původně odeslal Lopan

4jedik: ale jak jsme uz psal, s promenlivou vyskou boxu si uz div neporadi. Na staticky obsah se hodi, ale na dynamicky bych to neriskoval.

Nj to je nevyhoda pozicovani, vyska. A nejak nechapu cos myslel tim dynamickym webem. Pokud to chapu spravne tak to zas muzu obratit a ukazat ti priklady ktere by sly tabulkama resit velmi krkolome.
01.02.2005, 22:33
Lopan

Nemyslel jsem dynamicky web, jen dynamicky obsah (napr. e-noviny).

Myslim, ze tady plati rozumny kompromis, cpat vsude div stejne jako cpat vsude tabulky je spatne reseni.