Globe Views
500 things that everyone should know ...
Home | About Us

HTML tabeller kokebok

Stephen Ferg, Bureau of Labor Statistics Revidert: 2003-02-06 - Innholdsfortegnelse lagt inn: 2012-02-05 For de beste resultatene når du skriver denne siden, stille inn nettleseren skriftstørrelsen til MINSTE.

Creative Commons Attribution 3.0 Unported License

1. Innledning Denne siden presenterer en beskrivelse av et sett med prosedyrer som en føderal etat kan bruke i designarbeidet HTML datatabeller. Det er Steve Ferg personlige tro på at å følge disse prosedyrene vil resultere i produksjon av HTML-tabeller som er kompatible med bestemmelsene i § 508. 2 Begrepene som brukes i dette dokumentet 2,1 tom celle En tom celle i en HTML-tabell er en TD eller TH celle som inneholder ingen presentasjon innhold. I den underliggende HTML-koden, inneholder cellen bare blanktegn eller elementer. Uttrykket cellen som inneholder tekst refererer til en celle som ikke er tom, det vil si til en celle som inneholder presentasjon innholdet. 2.2 Regelmessig Tabell En vanlig tabell er en tabell hvor overskriftene er plassert langs toppen av tabellen (som kolonneoverskrift celler) og ned på venstre side av tabellen (som radtittel celler). Hvis tabellen inneholder flere nivåer til raden eller kolonneoverskrifter, så rad og kolonne overskriftene er ordnet i streng hierarkisk orden. Mer presist, er et vanlig bord definert som en tabell med følgende egenskaper.
  • En data celle kan ikke forekomme over, eller til venstre for, en topptekst celle.
  • En celle som inneholder tekst kan ikke spenner flere kolonner enn en celle som oppstår over den.
  • En celle som inneholder tekst kan ikke spenner flere rader enn en celle som oppstår til venstre.
  • Innrykk av radoverskrifter indikerer nøyaktig den hierarkiske orden av disse overskriftene.
2,3 Uregelmessig Tabell En uregelmessig er et bord som bryter en eller flere av reglene for vanlige bord. Legg spesielt merke til at bruken av en ikke-tom celle som spenner flere kolonner enn en celle som oppstår over den, vil gjøre en tabell uregelmessig. 2.4 Interne identifikatorer Interne identifikatorer er identifikatorer som er usynlig for brukerne. De brukes i HTML-koden for websider til støtte hyperkoblinger. Flere av teknikker som omtales i denne artikkelen krever bruk hvis interne identifikatorer. Interne identifikatorer brukes i ID og header attributter av "TH" og "TD" tags, og i HREF, ID og navnet attributter "A" (anker) koder. Formatet for interne identifikatorer er:

<table_identifier>.<identifier_type>.<period-separated-list>

  1. Den første del av en intern identifikatoren må være en tabell identifikator. Tabellen identifikatoren må begynne med en lavere bokstav, og kan kun inneholde sifre, små bokstaver og understrek.
  2. Den andre del av en intern identifikator er en identifikator attraksjon. Det må være en av følgende:
  • lavere bokstav "c" for kolonneoverskriften celler
  • lavere bokstav "r" for radtittel celler
  • små bokstaver bokstaven "f" for fotnoter

3. For kolonne eller rad header celler, må den tredje del av en intern identifikator være en periode-separert liste av heltall. Heltallene må være i hierarkisk rekkefølge, begynner med det høyeste nivået og går videre til det laveste nivået. 4. For en spire header celle, må den tredje del av en intern identifikator være "0". 5. For en fotnote, må del 3 være et heltall eller en enkelt små bokstaver brev.

Her er noen eksempler.

ID Kommentar
tablex.c.2 kolonneoverskrift i tablex for en kategori som er den andre kategorien i den første raden med kolonneoverskrifter
tablex.r.1.2.13.2 radoverskriften i tablex for en kategori som er fire nivåer dypt i kategorien struktur
tablex.r.0 stub header i tablix
tablex.f.1 fotnote 1 i tablex
tablex.f.p fotnote p i tablex
3. Regler for HTML-tabeller 3.1 Regler for vanlige tabeller
  1. Alle tabeller må samsvare med HTML 4.01 anbefaling.
  2. Lag en <caption> element for å holde tittelen på tabellen.
  3. Lagre hver bit av data i en TD celle.
  4. Lagre hver rad og kolonne header i en TH celle.
  5. Greenbar - Hvis tabellen er generert av et menneske ("for hånd") og deretter bruk av greenbar er valgfritt. Hvis tabellen er generert automatisk, da bruk av greenbar er nødvendig, og må følge reglene for greenbar (se nedenfor).
  6. Radene som inneholder kolonnen tittelrader vil være inneholdt av en THEAD element.
  7. Radene inneholder kroppen tittelrader vil være inneholdt av en TBODY element.
  8. Hvis radoverskrifter er nestet (er brutt ned i flere nivåer), og følg deretter fremgangsmåten for nestede radoverskrifter (se nedenfor).
  9. Hvis filen inneholder fotnoter, deretter følger prosedyrene for fotnoter (se nedenfor).
3.2 Regler for uregelmessige Tabeller Reglene for irregulære tabeller er de samme som reglene for vanlige tabeller, med følgende tilføyelser. Bruken av en AKSSANKEMASKINER attributt kreves for TD celler som dekker flere kolonner. Topptekstene attributt på TD-cellene må inneholde interne identifikatorer for alle overskriftene som inneholder hodeinformasjon for cellen. Merk at dette inkluderer radoverskrifter samt kolonneoverskrifter, og (hvis tabellen inneholder nestede overskrifter) interne identifikatorer for nestede overskrifter hele veien opp til roten. 4 Noen Eksempel Tabeller 4.1 Eksempel Tabell 1a

Eksempel Tabell 1a: Ruritanian Ore Produksjon

2000
jernmalm 999.99
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1">
<CAPTION><SPAN>Example Table 1a: Ruritanian Ore
Production </SPAN></CAPTION>
<THEAD>
    <TR>
    <TH>&nbsp;</TH>
    <TH>2000</TH>
    </TR>
</THEAD>
<TBODY>
    <TR>
    <TH><P>Iron Ore</P> </TH>
    <TD><P>999.99</P> </TD>
    </TR>
</TBODY>
</TABLE>
4.2 Eksempel Tabell 1b
Eksempel Tabell 1b: ruritanian malm produksjon
2000 2001 2002
jernmalm 999.99 999.99 999.99
kobbermalm 999.99 999.99 999.99
tinn malm 999.99 999.99 999.99
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1" >
<CAPTION><SPAN>Example Table 1b: Ruritanian Ore
Production </SPAN></CAPTION>
<THEAD>
    <TR>
    <TH>&nbsp;</TH>
    <TH>2000</TH>
    <TH>2001</TH>
    <TH>2002</TH>
    </TR>
</THEAD>

<TBODY>
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Iron ~~~~~~~~~~~~~~~~~~~~~ -->
    <TR>
    <TH><P>Iron Ore</P> </TH>
    <TD>
    <P>999.99</P> </TD>
    <TD><P>999.99</P> </TD>
    <TD><P>999.99</P> </TD>
    </TR>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Copper ~~~~~~~~~~~~~~~~~~~~~ -->
    <TR>
    <TH><P>Copper Ore</P> </TH>
    <TD><P>999.99</P> </TD>
    <TD><P>999.99</P> </TD>
    <TD><P>999.99</P> </TD>
    </TR>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Tin ~~~~~~~~~~~~~~~~~~~~~ -->
    <TR>
    <TH><P>Tin Ore</P> </TH>
    <TD><P>999.99</P> </TD>
    <TD><P>999.99</P> </TD>
    <TD><P>999.99</P> </TD>
    </TR>

</TBODY>
</TABLE>
4,3 Eksempel Tabellen 1c
Eksempel Tabellen 1c: Ruritanian Malm Produksjon
Ruritanian Råvareproduksjon etter vekt ved Verdi
justert ujustert justert ujustert
2001 2002 2001 2002 2001 2002 2001 2002
jernmalm 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99
kobbermalm 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99
tinn malm 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99

<table cellspacing="0" cellpadding="0" border="1" >
<caption><span>Example Table 1c: Ruritanian Ore Production </span></caption>

<thead>
<tr>
    <th rowspan="3">Ruritanian Raw Materials Production</th>
    <th colspan="4">By Weight</th>
    <th colspan="4">By Value</th>
</tr>

<tr>
    <th colspan="2">Adjusted</th>
    <th colspan="2">Unadjusted</th>
    <th colspan="2">Adjusted</th>
    <th colspan="2">Unadjusted</th>
</tr>

<tr>
    <th>2001</th>
    <th>2002</th>
    <th>2001</th>
    <th>2002</th>
    <th>2001</th>
    <th>2002</th>
    <th>2001</th>
    <th>2002</th>
</tr>
</thead>

<tbody>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Iron ~~~~~~~~~~~~~~~~~~~~~ -->
<tr>
    <th><p>Iron Ore</p></th>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
</tr>

<... snip ...>

</tbody>
</table>
5 Regler for Fotnoter For å diskutere fotnoter klart, må vi innføre noen tekniske termer. 5.1 Base Fotnote ID En base fotnote ID er bokstaven, tallet eller ord som brukes for å identifisere en fotnote. Eksempler på basen fotnote IDer er "1", "2", "p", og "Note". 5.2 Presentasjon Fotnote ID En presentasjon fotnote ID er hva brukeren ser når han ser på en fotnote identifikator. En presentasjon fotnote ID består av basen fotnote ID, omsluttet av parenteser, og deretter omsluttet spankoder med en egenskap av class = "fotnote". Her er et eksempel:
du ser HTML kode kommentar
1 1 base fotnote ID
(1) (1) base fotnote ID i parentes
(1) <span class="footnote">(1)</span> presentasjonen fotnote ID.
Basen fotnote ID kan ikke inneholde mellomrom, og ingen mellomrom er tillatt mellom base fotnote ID og omsluttende parenteser, heller ikke mellom parentesene og omslutter spankoder. 5.3 to forskjellige roller for presentasjon Fotnote IDer - som Fotnote Referanser og fotnote Targets En presentasjon fotnote ID kan spille to forskjellige roller, eller utføre to forskjellige funksjoner, avhengig av plassering i en tabell.
  • Når den vises i kroppen av en tabell, utfører den funksjonen til en fotnote, med henvisning til en fotnote.
  • Når den vises i fotnoter del av en tabell, utfører den funksjonen av en fotnote mål.

A picture of a table. The picture labels visible footnote IDs in the body of the table as 'footnote references', and visible footnote IDs in the footnotes section as 'footnote targets'.

  5,4 Fotnote Referanser
  1. HTML koder for en fotnote er en presentasjon fotnote identifikator innpakket i anker ("A") koder. Ankerkoden må inneholde et HREF attributt hvis verdi er den pundtegn (#) etterfulgt av presentasjonen fotnote ID. For eksempel, hvis HTML for presentasjonen fotnote er: <span>(1)</span> deretter en HTML for fotnotereferansenummeret er <a href="#table6.f.1"><span>(1)</span></a>
  2. I en header celle, må fotnote referanser skje på høyre side, eller etterfølgende, slutten av teksten i cellen. I en header celle, må hver fotnote innledes med mellomrom.
  3. I en data celle, må fotnote referanser skje til venstre, eller ledende, slutten av teksten i cellen. I en datacelle, må hver fotnote bli etterfulgt av mellomrom.
  4. Vi vil at teksten i en tabell for å kunne bryte, hvis det er den beste måten å vise tabellen. I tråd med det målet, brukte mellomrom innenfor en tabell må "bryte" mellomrom (bruk av "" er forbudt) og bruk av "NOWRAP" er forbudt.
  5. Hvis en celle inneholder flere fotnote referanser, må hver fotnote innledes (eller følges, som passer) med mellomrom.
  6. Oppmerksom på at praksisen med å formatere flere fotnote referanser som en kommaseparert liste, omgitt av en enkelt parenteser (1,2,3) er foreldet.
5,5 Fotnote Targets
  1. HTML koder for en fotnote mål er en presentasjon fotnote identifikator innpakket i anker ("A") koder. Ankerkoden må inneholde en ID-attributt hvis verdi er den fotnote intern identifikator. Ingen mellomrom er tillatt mellom <SPAN tags> og omslutter <a> koder. For eksempel, hvis HTML for presentasjonen fotnote er: <span>(1)</span> deretter en HTML for fotnotereferansenummeret er <a id="table6.f.1"><span>(1)</span></a>
  2. Hvis et bord har fotnoter vil fotnotene bli plassert i en enkelt celle ved bunnen av tabellen. Denne "fotnoter celle" vil spenne over hele bredden på tabellen.
  3. Den første linjen med tekst i fotnoter cellen vil være Fotnote: omsluttet STERKE koder. <strong>Footnotes:</strong><br>
  4. Hver fotnote vil bestå av en fotnote mål, etterfulgt av en bryte mellomrom, etterfulgt av teksten i fotnoten, etterfulgt av en <br> tag. <A ID="table3.f.1" NAME="table3.f.1"> <SPAN>(1)</SPAN></A> 1869=100 <BR>
  5. Hvis en fotnote inneholder flere avsnitt, vil avsnittene skilles med to <BR> koder, produsere presentasjonen effekten av en blank linje mellom avsnittene. (Se eksempel tabell 3.)
5,6 Sluttnoter Den fotnoter delen kan inneholde sluttnoter. En sluttnote er en spesiell type fotnote som gjelder for tabellen som helhet. Definisjonen av en sluttnote er: en fotnote som tabellen inneholder ingen fotnote referanser. Fordi tabellen inneholder ingen eksplisitte referanser til sluttnoter, gjør fotnote målet for en sluttnote ikke krever en vedlagt ankerkode å gi sin HTML ID. I utgangspunktet består fotnote målet for en sluttnote bare for fotnoten presentasjon fotnote ID. Basen fotnote ID for sluttnoter er typisk "Note". Andre regler sluttnoter er:
  • En tabell kan inneholde flere sluttnoter med samme base fotnote ID. For eksempel kan det være flere sluttnoter med base fotnote ID "Note".
  • Basen fotnote ID av en sluttnote kan inneholde flere søkeord adskilt med mellomrom. For eksempel: "Legg merke til brukere".
5.7 Eksempel Tabell 2
Eksempel Tabell 2: Ruritanian Malm Produksjon (med fotnoter) (1)
Ruritanian Råvareproduksjon 2001 2002 (p)
jernmalm (2) 999.99 999.99
tinn (2) (3) (4) 999.99 -
Fotnote: (1) 1869 = 100 (2) I Ruritanian riksdaler. (3) Vulkansk tinn anses ikke rent tinn. (4) anslått (p) foreløpig (MERK) Dette er et eksempel på en sluttnote.Dette er den andre ledd av en multi-punkt notat. abcdef og ghijkl, eller kanskje qxyz. abcdef og ghijkl, eller kanskje qxyz. abcdef og ghijkl, eller kanskje qxyz. (MERK) Dette er en andre sluttnote med en base fotnote ID "MERK". (Merknad til brukere) blah blah blah.
 
<table cellspacing="0" cellpadding="0" border="1" align="center">
<caption><span>Example Table 2: Ruritanian Ore Production (a table with footnotes)<a href="#table3.f.1"><span>(1)</span></a></span></caption>

<thead>
    <tr>
    <th>Ruritanian Raw Materials Production</th>
    <th>2001</th>
    <th>2002 <a href="#table3.f.1"><span>(p)</span></a></th>
    </tr>
</thead>

<tbody>
<tr>
    <th id="table3.r.1"><p>Iron Ore <a href="#table3.f.2"><span>(2)</span></a></p></th>
    <td><p>999.99</p></td>
    <td><p>999.99</p></td>
</tr>

<tr>
    <th><p>Tin <a href="#table3.f.2"><span>(2)</span></a>
       <a href="#table3.f.3"><span>(3)</span></a></p></th>
    <td><p><a href="#table3.f.4"><span>(4)</span></a> 999.99</p>
    </td><td><p>-</p></td>
</tr>
</tbody>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTNOTES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<tbody>
<tr><td colspan="3">
    <p><span>Footnotes:</span><br />
    <a id="table3.f.1" name="table3.f.1"><span>(1)</span></a> 1869=100<br />
    <a id="table3.f.2" name="table3.f.2"><span>(2)</span></a> In Ruritanian thalers.<br />
    <a id="table3.f.3" name="table3.f.3"><span>(3)</span></a> Volcanic tin is not considered pure tin.<br />
    <a id="table3.f.4" name="table3.f.4"><span>(4)</span></a> estimated<br />
    <a id="table3.f.p" name="table3.f.p"><span>(p)</span></a> preliminary<br />
    <span>(NOTE)</span> This is an example of an <i>endnote.</i><br />
    <br />
    This is the second paragraph of a multi-paragraph note. abcdef and ghijkl, or maybe qxyz. .snip..<br />
    <span>(NOTE)</span> This is a second endnote with a base footnote ID of "NOTE".<br />
    <span>(Note to Users)</span> blah blah blah.<br />
    </p>
</td></tr>
</tbody>
</table>
6 Regler for Nestede radoverskrifter I noen tilfeller rad (eller spire) overskrifter i en tabell kan ordnes i bare et enkelt nivå. I andre tilfeller kan de være nestet, som fordypningen oppføringer i en disposisjon. Eksempel bord 1a gjennom 1c er eksempler på tabeller med single-level radoverskrifter. I dette kapittelet diskuterer vi tabeller med radoverskrifter er nestet. Når en tabell inneholder nestede radoverskrifter kan topptekstene sees som danne et sett av en eller flere trær. Hvert tre har en topp-nivå radtittel som ikke rykket i det hele tatt. Under det øverste nivået header det kan være en eller flere subheaders. Subheaders igjen kan inneholde et sett av subheaders, og så videre. En overskrift som ikke har noen subheaders kalles en bunn-nivå header. Her er reglene for nestede radoverskrifter
  1. TH tag for en rad header celle må ha en HTML ID-attributt, med mindre det radoverskrift er en bunn-nivå header.
  2. TH tag for en bunn-nivå radtittel celle er lov til å ha en HTML ID-attributt, men det er ikke nødvendig å ha en.
  3. TH tag for en rad header celle må ha en AKSSANKEMASKINER attributt, med mindre det radoverskrift er en topp-nivå header.
  4. TH tag for en topp-nivå radtittel celle er lov til å ha en HTML AKSSANKEMASKINER attributt, men det er ikke nødvendig å ha en.
  5. Hvis en TH celle har en AKSSANKEMASKINER attributt, må AKSSANKEMASKINER attributtet inneholde interne identifers av alle de høyere nivå overskrifter i treet. Identifikatorene må være oppført i rekkefølge, går oppover til øverste nivå header.
Diagram showing relationships in HEADERS attributes of TH cells
6.1 Eksempel Tabell 3
Eksempel Tabell 3
Ruritanian Råvareproduksjon 2001
jernmalm 999.99
raffinert 999.99
uraffinert 999.99
Mindre enn 40% rent 999.99
40% eller mer ren 999.99
tinn malm 999.99
raffinert 999.99
<table cellspacing="0" cellpadding="0" border="1" align="center">
<caption><span>Example Table 3: Ruritanian Ore Production
(a table with multi-level row headers)</span></caption>
<thead>
    <tr>
    <th>Ruritanian Raw Materials Production</th>
    <th>2001</th>
    </tr>
</thead>

<tbody>
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Iron ~~~~~~~~~~~~~~~~~~~~~ -->
    <tr>
    <th id="table2.r.1"><p>Iron Ore</p></th>
    <td><p>999.99</p></td>
    </tr>

    <tr>
    <th id="table2.r.1.1" headers="table2.r.1">
    <p>Refined</p></th>
    <td><p>999.99</p></td>
    </tr>

    <tr>
    <th id="table2.r.1.2" headers="table2.r.1">
    <p>Unrefined</p></th>
    <td><p>999.99</p></td>
    </tr>

    <tr>
    <th id="table2.r.1.2.1" headers="table2.r.1.2 table2.r.1 ">
    <p>Less than 40% pure</p></th>
    <td><p>999.99</p></td>
    </tr>

    <tr>
    <th id="table2.r.1.2.2" headers="table2.r.1.2 table2.r.1 ">
    <p>40% or more pure</p></th>
    <td><p>999.99</p></td>
    </tr>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Tin ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <tr >
    <th id="table2.r.2">
    <p>Tin Ore</p></th>
    <td><p>999.99</p></td>
    </tr>

    <tr>
    <th id="table2.r.3.1" headers="table2.r.2"><p>Refined</p></th>
    <td><p>999.99</p></td>
    </tr>
</tbody>
</table>
7 Regler for Visual Skilleark Rader Det er noen ganger ønskelig å anvende tomme celler i en tabell for de formål av visuell formatering. Slike celler vanligvis over flere colums, skaper en helt eller delvis tom rad som fungerer som en visuell separator mellom den delen av tabellen ovenfor, og den delen av tabellen under. Tilstedeværelsen av visuelle separator rader i et vanlig bord vil ikke føre til bordet for å bli uregelmessig, så lenge separator cellene i samsvar med reglene for vanlige bord. For å samsvare med den første regelen for vanlige tabeller (Et datacelle kan ikke forekomme over, eller til venstre for, en header celle) separator celler må være TD (ikke TH) celler. Eksempel tabell 4 inneholder tre separator rader. Den første separator raden strekker seg over hele bordet og er helt tomt. Radene for "Separator B" og "Separator C" har tekst i sine radtittel celler, og tomme dataceller som spenner bredden på tabellen kroppen. "Separator B" og "Separator C" skiller seg bare i justeringen av innholdet. 8 Regler for Greenbar I tabeller laget av mennesker, er bruken av greenbar valgfritt. I tabeller som genereres automatisk, er bruken av greenbar kreves. Plassering av greenbar bestemmes av en imaginær greenbar rad teller som er satt til 0 ved den siste kolonneoverskriften rad, og tilbakestilt til 0 av en separator rad. Partall radene i tabellen (basert på greenbar rad counter) må inneholde en class = "greenbar»-attributtet på TR-koden. Denne klassen vil produsere en skyggelagt rad (se eksempel tabellene 1b, 1c, og 4). 8.1 Eksempel Tabell 4
Eksempel Tabell 4: Ruritanian malm produksjon
Ruritanian Råvareproduksjon 2001 2002 2003 2004
jernmalm 999.99 999.99 999.99 999.99
kobbermalm 999.99 999.99 999.99 999.99
tinn malm 999.99 999.99 999.99 999.99
kobbermalm 999.99 999.99 999.99 999.99
Separator B
tinn malm 999.99 999.99 999.99 999.99
kobbermalm 999.99 999.99 999.99 999.99
Separator C
tinn malm 999.99 999.99 999.99 999.99
kobbermalm 999.99 999.99 999.99 999.99
tinn malm 999.99 999.99 999.99 999.99
  Oversatt s http://accessiblehtml.sourceforge.net/html_tables_cookbook.html#table_of_contents_1 Hjemmeside
Globe Views

Copyright™ 2014: «QRATOR Creative Technologies»