Avatar billede UlrikOne Nybegynder
25. maj 2009 - 23:08 Der er 17 kommentarer

Er tabeller forældet i (X)HTML og XML??

Hej.

Efter at have lagt websideprogrammeringen på hylden i et par år, vil jeg nu starte på frisk igen med at lære XHTML og ASP.Net - da de virker mere fremtidssikrede.

Men jeg har altid opsat mine sites i tabeller. Jeg har så hørt fra en bekendt, at der findes en nyere og smartere måde at lave tabeller på. Nogen der ved hvad han referer til? Er det med XML? CSS? Eller noget helt tredie?

Håber nogen kan opklare det for mig, og evt. bakke op med et godt tutorial-link.

På forhånd tak :-)
Avatar billede Slettet bruger
25. maj 2009 - 23:27 #1
Den nyere og smartere måde kaldes divs.
De virker lidt ligesom tables, men ændres hva. CSS.
Et lille eksempel.

<style type="text/css">
#main {
width:100px;
background-color: #FF0000;
}
</style>

<div id="main">Hej</div>

Nu vil du have en "tabel" som er 100 pixels bred, har rød baggrund og indeholder teksten "Hej".

Du kan læse om CSS på dansk her:
http://www.html.dk/tutorials/css/
eller på engelsk her:
http://www.w3schools.com/Css/default.asp

Flere spørgsmål?
Bare sig til.

God arbejdslyst :D
Avatar billede arne_v Ekspert
26. maj 2009 - 01:47 #2
Bemærk at du stadig kan og bør bruge tabeller til det som tabeller oprindeligt var beregnet til - nemlig rigtige tabeller.
Avatar billede andz Nybegynder
26. maj 2009 - 02:10 #3
Det er sandsynligvis CSS din ven havde i tankerne, som kimsey0 forklarer. Det er klart den bedste løsning til alm. layout opgaver.

Jeg vil dog ikke, som kimsey0, påstå at CSS divs har ret meget tilfælles med traditionelle HTML tables. Hvis der skulle være en vag parallel ville det nærmere være de enkelte celler i tables.
Avatar billede Slettet bruger
26. maj 2009 - 09:19 #4
Ja, det jeg refererede til var deres brugbarhed til arangere data.
4 divs med 50% bredde hver ser ens ud som et 2x2 table.
Avatar billede UlrikOne Nybegynder
26. maj 2009 - 10:17 #5
kimsey0: Tak for det fyldestgørende svar. Jeg er ved at lære mig selv XHTML fra bunden, da jeg altid har kodet en meget sløset HTML. Nu skal alting gøres korrekt, og på nyeste/smarteste måde. Også fordi jeg meget gerne vil arbejde med websites, og have en uddannelse indenfor faget.

Men nok om det. Dit eksempel virker perfekt. Jeg har dog lige et tillægsspørgsmål:

Hvordan får jeg div'en centreret? Jeg har prøvet bare at bruge et <center>-tag, og det virker også fint, men så centrerer den også teksten INDE i div'en.

Så hvordan gør jeg lige det??

Og 1000 tak. for svaret.
Avatar billede UlrikOne Nybegynder
26. maj 2009 - 10:20 #6
kimsey0: Nå ja, jeg glemte selvfølgelig noget: hvordan laver jeg så det der svarede til <tr> og <td> i almindelige tabeller?

Altså hvordan laver jeg rækker og kolonner?

Kan du give mig et lidt mere detaljeret eksempel end det første du gav?
Avatar billede Slettet bruger
26. maj 2009 - 10:54 #7
Man centrerer en div med følgende CSS.

margin-right: auto;
margin-left: auto;

Det betyder dybest set at browseren skal lave lige så meget plads på begge sider af div'en.

Jeg vil lige bikse et lille eksempel sammen på sammenhængen mellem div'er og tabeller.
Avatar billede Slettet bruger
26. maj 2009 - 19:26 #8
Jeg er blevet lidt forsinket, da jeg kom til at glemme hvad jeg havde lavet på en computer jeg ikke kan komme til.
Nu er jeg så startet forfra, og skulle snart have et eksempel klar til dig.
Avatar billede UlrikOne Nybegynder
27. maj 2009 - 21:01 #9
kimsey0: Det lyder rigtig, rigtig godt! Fantastisk af dig at du gider hjælpe mig, da det er noget jeg virkelig har brug for at lære.
Avatar billede Slettet bruger
01. juni 2009 - 23:41 #10
Jeg er ked af at det blev lidt forsinket, men her kommer nogle eksempler på brugen af divs.
http://jacobbundgaard.dk/misc/csstest.html
Jeg vil prøve at forbedre den og tilføje flere eksempler, måske du har noget du gerne vil have vist og forklaret?
Avatar billede Slettet bruger
11. juni 2009 - 11:24 #11
Hvordan ser det ud? Noget der kan bruges? Forbedringer eller flere eksempler?

Er du kommet lidt videre i at lære XHTML?
Avatar billede UlrikOne Nybegynder
12. juli 2009 - 15:29 #12
Så har jeg fået kigget på det, og det er faktisk ekstremt brugbart.

Ja, jeg har lige et spørgsmål, so far.

Hvordan får man lavet afstand mellem div'erne? Altså det der svarer til celleafstand i en tabel? Altså sådan at div'erne ikke ligger klistret op af hinanden.

Jeg har nemlig lavet en border-style: solid, og det ser dumt ud når bokserne lige lige op af i hinanden.

Håber du forstår spørgsmålet :-)

PS: Undskyld den lange svartid! Har ikke været på Eksperten.dk et stykke tid, men det skal til at ændres nu :-)
Avatar billede Slettet bruger
15. juli 2009 - 01:56 #13
Til afstand mellem div'er bruges css-attributerne "margin", "margin-top", "margin-bottom", "margin-right" og "margin-left".

Jeg har indsat eksempler på alle fem.

Desuden har alle main div'er en margin på "10px auto", hvilket betyder 10 pixel i top og bund, auto i begge sider.
Og den nederste div en margin på "10px 20px 30px 40px" hvilket betyder 10 pixel i top, 20 pixel i højre side, 30 pixel i bunden og 40 pixel i venstre side.

Der medfølger også et eksempel på, hvordan man får afstand mellem indholdet og kanten i en div. Det kaldes padding, og kan bruges på samme måde som margin.
Avatar billede UlrikOne Nybegynder
27. juli 2009 - 10:59 #14
Tak. Det virker sørme fint! Er det ok vi holder tråden kørende lidt længere, hvis nu har jeg får lidt flere spørgsmål??

Du skal selvfølgelig nok få point derefter :-)
Avatar billede Slettet bruger
27. juli 2009 - 12:54 #15
Gerne for mig, den er heller ikke mere end to måneder gammel :P
Avatar billede Slettet bruger
22. oktober 2009 - 00:12 #16
Lukke?
Avatar billede UlrikOne Nybegynder
30. januar 2011 - 15:49 #17
kimsey0: ja, læg svar. Tænkte egentlig på... hvorfor svarer I/de fleste med at lægge en 'kommentar' egentlig, og ikke bare som et 'svar' når nu man har en løsning? Så slipper OP for at bede den hjælpende hånd om at lægge 'svar' til sidst. Virker bare som dobbeltarbejde. Især når man som jeg ikke frekventerer e.dk dagligt :-)

Men bare et spørgsmål - ikke kritik...
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester