HTML => tabeller

Introduktion

Elementet HTML <table> gör det möjligt för webbförfattare att visa tabelldata (som text, bilder, länkar, andra tabeller etc.) i en tvådimensionell tabell med rader och kolumner med celler.

Syntax

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

Anmärkningar

De olika tabellelementen och deras innehållsattribut definierar tillsammans tabellmodellen. Elementet <table> är behållarelementet för tabellmodeller / tabelldata. Tabellerna har rader, kolumner och celler som ges av deras ättlingar. Raderna och kolumnerna bildar ett rutnät; en tabells celler måste täcka det nätet helt utan överlappning. Listan nedan beskriver de olika elementen i tabellmodellen:

<table> - Behållarelementet för tabellmodeller / tabelldata. <table> representerar data med mer än en dimension i form av en tabell.
<caption> - Tabelltexter eller titel (som en figcaption till en figure )
<col> - En kolumn (ett element utan innehåll)
<colgroup> - En gruppering av kolumner
<thead> - Tabellrubrik (endast en)
<tbody> - <tbody> / innehåll (flera är okej)
<tfoot> - Tabellfotfot (endast en)
<tr> - Tabellrad
<th> - Tabellhuvudcell
<td> - <td>

Semantiskt är tabeller avsedda för att hålla tabelldata. Du kan tänka på det som ett sätt att visa och beskriva data som skulle vara vettigt i ett kalkylblad (kolumner och rader).

Att använda tabeller för layout rekommenderas inte. Använd istället CSS-regler för layout och formatering, inklusive display: table .

Ett anmärkningsvärt undantag som vanligtvis visas i branschen när det gäller att använda <table> -layout är när det gäller HTML-e-post: vissa e-postklienter, inklusive Outlook, rullas tillbaka till äldre renderingmotorer efter att Microsoft tappat sitt monopolfall mot EU. För att Microsoft inte ska göra IE till en del av operativsystemet, rullade de bara tillbaka Outlook: s rendemotor till en tidigare version av Trident. Denna rollback stöder helt enkelt inte modern webbteknologi, så att använda <table> baserade layouter för HTML-e-post är det enda sättet att säkerställa kompatibilitet mellan webbläsare / plattform / klient.

Enkel tabell

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Detta kommer att göra en <table> bestående av tre totala rader ( <tr> ): en rad med huvudceller ( <th> ) och två rader med innehållsceller ( <td> ). <th> element är tabellrubriker och <td> element är tabelluppgifter . Du kan lägga vad du vill ha i en <td> eller <th> .

Rubrik 1 / kolumn 1	Rubrik 2 / kolumn 2
Rad 1 datakolumn 1	Rad 1 datakolumn 2
Rad 2 datakolumn 1	Rad 2 datakolumn 2

Spänner över kolumner eller rader

Tabellceller kan sträcka sig över flera kolumner eller rader med colspan och rowspan . Dessa attribut kan tillämpas på <th> och <td> element.

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

Kommer att resultera i

Observera att du inte ska utforma en tabell där både rader och kolumner överlappar eftersom detta är ogiltigt HTML och resultatet hanteras på olika sätt av olika webbläsare.

rowspan = Ett icke-negativt heltal som anger antalet rader spända av en cell. Standardvärdet för detta attribut är ett ( 1 ). Ett värde på noll ( 0 ) betyder att cellen kommer att sträcka sig från den aktuella raden till tabellens sista rad ( <thead> , <tbody> eller <tfoot> ).

colspan = Ett icke-negativt heltal som anger antalet kolumner som spänns av den aktuella cellen. Standardvärdet för detta attribut är ett ( 1 ). Ett värde på noll ( 0 ) betyder att cellen kommer att sträcka sig från strömmen till den sista kolumnen i <colgroup> i vilken cellen är definierad.

Bord med tråd, tbody, tfoot och bildtext

HTML förser också tabellerna med <thead> , <tbody> , <tfoot> och <caption> . Dessa ytterligare element är användbara för att lägga till semantiskt värde till dina tabeller och för att ge en plats för separat CSS-styling.

När du skriver ut en tabell som inte passar på en (papper) sida upprepar de flesta webbläsare innehållet på <thead> på varje sida.

Det finns en specifik ordning som måste följas, och vi bör vara medvetna om att inte alla element faller på plats som man kan förvänta sig. Följande exempel visar hur våra fyra element ska placeras.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

Följande exempel på resultat visas två gånger - den första tabellen saknar några stilar, den andra tabellen har några CSS-egenskaper som används: background-color , color och border *. Stilarna tillhandahålls som en visuell guide och är inte en väsentlig aspekt av det aktuella ämnet.

Element	Stilar gäller
`<caption>`	Gul text på svart bakgrund.
`<thead>`	Fet text på lila bakgrund.
`<tbody>`	Text på blå bakgrund.
`<tfoot>`	Text på grön bakgrund.
`<th>`	Orange gränser.
`<td>`	Röda gränser.

Kolumngrupper

Ibland kanske du vill använda styling på en kolumn eller grupp av kolumner. Eller för semantiska ändamål, kanske du vill gruppera kolumner. För att göra detta använder du <colgroup> och <col> element.

Den valfria <colgroup> -taggen låter dig gruppera kolumner. <colgroup> -element måste vara underordnade element i en <table> och måste komma efter alla <caption> -element och före något tabellinnehåll (t.ex. <tr> , <thead> , <tbody> , etc.).

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

Den valfria <col> -taggen låter dig referera till enskilda kolumner eller ett kolumnintervall utan att tillämpa en logisk gruppering. <col> -element är valfria, men om de finns måste de finnas i ett <colgroup> -element.

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

Följande CSS-stilar kan tillämpas på <colgroup> och <col> element:

border
background
width
visibility
display (som i display: none )
- display: none; kommer faktiskt att ta bort kolumnerna från displayen, vilket gör att tabellen visas som om dessa celler inte finns

Mer information finns i HTML5-tabelldata .

Rubrikomfång

th element används ofta för att indikera rubriker för tabellrader och kolumner, på så sätt:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Detta kan förbättras för tillgänglighet genom att använda attributet scope . Ovanstående exempel skulle ändras på följande sätt:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope kallas ett uppräknat attribut , vilket innebär att det kan ha ett värde från en specifik uppsättning möjliga värden. Denna uppsättning inkluderar:

col
row
colgroup
rowgroup

referenser:

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

HTML
tabeller

Sök…