On 22-07-2011 15:49, Rune Jensen wrote:
> On 22 Jul., 03:28, Martin<martinprikaarhof@gmailprikcom> wrote:
>> Jeg har et lille problem med
http://jsfiddle.net/ejWEd/
>> Selve designet skal bibeholdes som det er.
>>
>> Mit problem er bare semantikken, som jeg ikke synes om
>>
>> En kamp ser således ud ren semantisk
>>
>> <tr class="">
>> <td rowspan="2">23 Jul<br />17:00</td>
>> <td><img src="hjemmebane billede" /></td>
>> <td>Silkeborg IF</td>
>> <td class="score"></td>
>> </tr>
>> <tr class="">
>> <td><img src="udebane billede" /></td>
>> <td>Sileborg IF</td>
>> <td class="score"></td>
>> </tr>
>>
>> Nogen der har en idé til et flot semantisk korrekt og letlæseligt kode?
>
> Jeg har aldrig været en ørn til tabeller, men uniddelbart i dit
> eksempel, der mangler du en table header. Ellers vil det ikke give
> mening for en skærmlæser (i det mindste ikke ældre udgaver - ved ikke
> med nye)
Hvordan vil du lave en header når du har indhold (som hører sammen) i 2
forskellige rækker?
>
> Ud over det, er du nok nødt til at definere, hvad du gerne vil
> formidle, og hvilke dele af indholdet, som skal hænge sammen. I første
> omgang så tag et kig her:
>
http://www.html.dk/artikler/00005/
Jeg vil netop af med den tabel, men jeg er bare lidt i tvivl om hvordan
jeg kan strukturere det når man har 2 linjer som hører til 1 linje i
første række.
>
> Hvis din IMG er et pyntebillede, skal det i stedet laves med
> background i CSS. Hvis det er betydende for indholdet, må du finde
> noget tekst, som beskriver billedet og give den IMG en sigende alt-
> tekst.
Det har det, gad bare ikke sætte alt ind, det er jo kun et udsnit af et
helt system - som ikke kan gives adgang til - derfor lavede jeg lige
noget hurtigt HTML.
Men ALT og TITLE er skam sat på billederne, men det ændrer jo ikke noget
design mæssigt.
>
> Jeg synes, spørgsmålet er lidt svært at svare på sådan umiddelbart,
> men prøv som sagt at fortælle med ord, hvad du vil med tabellen,
> hvilken funktion den - og dens indhold - har.
Hvordan tabellen ser ud synes jeg nu er ret tydelig i "Result" (højre
nederste) billedet på
http://jsfiddle.net/ejWEd/
Funktionen, er en liste (derfor jeg overvejede en UL liste) men den kan
jo ikke ændrer sig i bredden så den passer perfekt - bemærk at den skal
kunne tilpasse sig til alle størrelser af skærme, inkl iphone/ipad's -
der vil også være forskellig udseende alt efter om iphone/ipad er
horisontal eller vertikalt.
Hvordan tabel data hører sammen er
En dato i venstre kolonne
Så er der 2 hold (Silkeborg IF og Sileborg IF) på 2 linjer