forskellen mellem tables og divs er den samme som den hele tiden har været - divs til design, tabeller til opsætning af tabuleret data. Sådan har specifikationerne været fra W3 i lang tid.
Det er også min opfattelse, divs til design og tabels til indhold. Læste bare lige kort om divs og tabeller og blev i tvivl om jeg gjorder det forkert.
Ville lige hører om andre også gør det på denne måde. :- )
Med tabulær information mener jeg ikke andet end information man normalt ville stille op som en tabel, hvis man gjorde det manuelt, for ensempel en medlemsliste med medlemsnummer, navn, og telefonnummer hvor første linie er overskrifterne og de følgende linier hver indeholder data om et medlem hvert. Der finder jeg brug af html tables mest bekvem. html tables kan derudover misbruges (som jeg selv har gjort) til at formattere en side med flere blokke af information, men det er hvor divs bør bruges.
"Det er også min opfattelse, divs til design og tabels til indhold." >> Det er forkert. Når noget skal stå i tabeller - ligesom i Excel, bruger du tabeller. Ellers bruger du andre elementer.
Lyt ikke til Havelaage, som endnu ikke har forstået, hvordan man koder i dette årtusinde =)
#11 Jeg ville benytte divs. Den dag du så beslutter dig for at nyhederne ikke skal stå ved siden af hinanden ændrer du bare dine styles og ikke din markup. Denne semantiske opsætning gør også, at du har forberedt din side til begrebet "responsive webdesign" - altså automatisk tilpasning til forskellige enheder (mobil, tablets...).
Ja, så bruger jeg DIV - somregel med display:inline-block. Så opfører de sig 'udadtil' som et inline element og 'indadtil' som et block element. Det betyder, de lægger sig ved siden af hinanden, men kan indeholde andre block elementer (og det kan alm. inline elementer som bekendt ikke).
I yderste nødstilfælde bruger jeg float, men det skal 'hackes' med et efterfølgende element med clear. Float er rigtig velegnet, når man f.eks. ønsker tekstomløb omkring et billede, men den er desværre snart mere abused end tabeller nogensinde har været :o|
@keysersoze: Brugen af DIV kan næppe betegnes som 'semantisk', da de netop er karakteriseret som 'anonyme' containere - og derfor intet fortæller om deres indholds karakter. Resten er jeg helt enig i *o)
Da man oprettede det fælles europæiske atomforsøgscenter CERN, var meningen, at højenergiforskere fra hele Europa kunne 'låne' centret. Man opdagede hurtigt, at det ene hold ankom med 20 tomme, røde ringbind - udførte deres forsøg - fyldte ringbindene med data - og tog hjem igen.
Ugen efter kom et nyt hold med 20 gule og ligeså tomme ringbind - lavede deres forsøg (hvoraf halvdelen var de samme som dem med de røde ringbind havde lavet) - fyldte data i ringbindene - og tog hjem igen. Og så fremdeles.
CERN er hundedyrt at have kørende, så den slags duplikerede forsøg er der simpelthen ikke råd til. Det var rent frådseri. Derfor havde man behov for en metode til at dele data med.
Heldigvis var der en kvik ansat ved navn Tim Berners-Lee, som fik en rigtig god idé. Han kombinerede nogle gamle idéer fra 60'erne (hypertext, som er en slags linket tekst) med nogle ting, Apple havde lavet (hyper cards, som var noget letprogrammerbart præsentationssoftware, lidt i stil med PowerPoint) og et tekstopmærkningssystem i stil med det, tekstbehandlingsprogrammet Word Perfect brugte (SGML - Standard Generalized Markup Language). Derved opstod i meget korte træk WWW, HTTP-protokollen og HTML.
Nu havde forskerne et værktøj til vidensdeling over det Internet, alle universiteter i forvejen var koblet op på - bl.a. til e-mail brug.
'Skidtet' er altså i udgangspunktet udelukkende beregnet til at opstille og syndikere forskningsresultater med i form af tekst i tabeller og paragraffer ... intet andet!
Efter et par år fandt en masse californiske potheads ud af, at man kunne bruge tabeller som sætterkasser - og lægge grafik og tekst i de enkelte celler og derved oprette flotte grafiske sider, som ikke lignede støvede paragraffer og tabeller med data. Det moderne WWW havde forsigtigt set dagens gryende lys.
Vi endte ret hurtigt op med sider, som hver især indholdt snesevis af tabeller i tabeller, hvis celler var spilet ud af hundredevis af transparente giffer, som til formålet fik sat passende størrelser.
Selvom dette var muligt, var det naturligvis et hestearbejde at skrive og vedligeholde - og et knokkelarbejde for browserne at holde styr på. Derfor indførte man (Microsoft) en ny teknologi, kaldet CSS, som kunne 'udklæde' og placere mere simple og 'anonyme' containerelementer. Resten er historie =)
Tabeller er med andre ord beregnet og egnet til at opstille data i, som du ellers ville opstille i et Excel ark ... ikke andet.
Håber, denne lille historiske gennemgang giver lidt bedre forståelse for, hvor tingene kommer fra - og hvad de er beregnet og gode til =)
Dejligt historie og det hjalp bestemt. Forstår nu hvad tabllerne bruges til. Men hvis du programmere en almindelig hjemmeside med divs. Vil den så automatisk tilpasse sig til tablet, smartphone osv.?
Ikke nødvendigvis. Somme tider er man nødt til at loade et specielt stylesheet til mobile enheder. Det gøres normalt ved, at man på serveren (f.eks. med PHP) sniffer hvilket styresystem, forspørgslen kommer fra.
Hvis det er fra en alm. PC, loades ét stylesheet - er der tale om en mobil enhed, loades et andet. I rigtig mange tilfælde er der dog ikke brug for at style forskelligt.
Husk altid de tre M'er: "Test, test og .... test"! *D
PS: Når jeg underviser webintegratorer, koketterer jeg altid med, at jeg har et lille Tim Berners-Lee alter stående i mit soveværelse og aldrig går i seng uden at have tændt et lille vokslys - og at de aldrig bliver gode til webkode, hvis ikke de gør det samme! De hold, jeg har haft kørende i juni måned, vil også kunne fortælle om, at den gamle, sære lærer plejer at give lagkage den 6. juni - på TBL's fødselsdag.
For fanden da ... det skal jo være sjovt at lære, og mange kommer med elendige erfaringer fra folkeskolen *D
Gå ind på jyske banks hjemmeside og gør dit browservindue mindre - helt ned til mobilstørrelse - så kan du se hvordan siden efterhånden tilpasses. Det er et eksempel på responsive webdesign.
@keysersoze: Men det er et eksempel på rigtig ineffektiv responsive webdesign =)
Der sker det, at når siden loades, tjekker et script, om det er en mobil enhed. Er det tilfældet, sættes en klasse på BODY elementet, der 'skrumper' en hel del elementer, så hele siden 'skrumper' lidt.
På onresize tjekkes endvidere størrelsen af viewport'en - og hvis målene kommer under en vis grænse, sættes samme klasse på BODY.
Problemet er bare, at når du runtime sætter en klasse på et element, skal browseren - p.gr.a. CSS' regler om kaskade og arv - genberegne alle egenskaber for samtlige underliggende elementer.
Sættes ny klasse på BODY elementet, skal egenskaberne for samtlige sidens elementer altså genberegnes. Det er en yderst ineffektiv måde at skabe responsiveness på.
Klasseskift kan være udmærket, men man skal altid være opmærksom på, at jo flere elementer, det pågældende element indeholder, jo hårdere arbejde sættes browseren på.
Det arbejde bliver hurtigt langt, langt større end det overarbejde, vi alle forsøger at undgå ved ikke at bruge tabeller til layoutformål. Og gør vi det flere gange (f.sks. på onresize), skal dette arbejde jo også udføres flere gange.
Jeg har ikke analyseret koden - kun set det visuelle i det og det var primært det jeg refererede til, men jeg vil da ikke betvivle de tekniske opdagelser du har gjort. A List Apart har også et, visuelt, godt eksempel men heller ikke her har jeg taget et nærmere kig på koden. Referencen til responsive webdesign gik også primært på hvad der ikke kan opnås med forkert brug af tables.
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
Ny bruger
Nybegynder
Opret
Preview
