kaxigt.com

Jag skriver om webben för webben

Hem » HTML-guider » Tabeller med table thead tfoot tbody för bästa parsing!

Tabeller med table thead tfoot tbody för bästa parsing!

Postad: 20 december 2007 | HTML-guider | No Comments
Lästid: 3 minuter

Den här artikeln handlar om tabeller och table thead tfoot tbody parsing flöde

För tillgänglighet och web standards är det bättre att använda thead, tfoot, och tbody-elementen eftersom flödet i denna uppställning dessutom är användarvänligt och tillgängligt.

Flödet parsas som en strukturerad html-sida med just head, body och footer, därtill gynnar detta insticksprogram som talsyntesmoduler och utskrift.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Tabell med thead tfoot och tbody

Syntaxen ser ut så här. Ge akt på ordningen. 

<table><thead><tfoot><tbody> </tbody></tfoot></thead></table>

En komplett uppställning

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

Vad gör då <th> HTML-taggen?

Jo <th> används för att identifiera tabellceller som innehåller kolumnrubrikvärden snarare än tabelldata. En rad med tabellrubrikvärden skapas genom att nästa flera <th> -värden i ett överordnat <tr> -element.

Är det så att det är rubriker du är ute efter att infoga så är <th> med andra ord det rätta alternativet. Inte <td>.

Vi gör tabeller med <table> <tr> och <td>!

Här får du lära dig vad de olika attributen innebär när du ska bygga dina tabeller. Sist får du tips om du hur kan formatera tabellerna med css.

Det första man bör tänka på är i vilken upplösning din sida ska visas. Väljer du att använda procent så anpassar sig tabellen till de olika upplösningarna. Fast det beror ju också helt på hur innehållet i tabellerna är formaterade. En tabell i upplösningen 100% kan ändå bli för stor för en upplösning om man använder sig av stora bilder/tabellceller.

Tänk på det!

Samma sak gäller naturligtvis höjden. Det är lika viktigt om man inte vill att någon ska behöva scrolla upp och ned hela tiden.

Grundkoden och tabellens betydelse är denna – och den ger en tabell med en rad.

<table>     startdeklarationen för en tabell
<tr>        ger en tabellcell
<td>        ger en tabellrad
</td>       avslutar tabellraden
</tr>       avslutar tabellcellen
</table>    avslutar tabellen
I all html-kodning är det viktigt att man inte korsar värdeelementen eller attributen. Att korsa menas när man exempelvis först skriver <tr> <td> och sedan avslutar i samma ordning – </tr></td>. Tittar Ni noga i html-koden så är det precis tvärtom! Det sista attributvärdet man anger, ska man först börja med när man avslutar. Enkelt uttryckt – man kodar baklänges när man avslutar en html-kod.

Tabeller med två rader och fler kolumner – <tr> och <td>

Vill du ha fler tabellceller bredvid varandra? Då upprepar du bara koden.

<td> cell 1 </td><td> ny cell bredvid </td>

Detta gav en tabell med 2 celler bredvid varandra. För varje tabellcell du vill lägga till så upprepar du koden ovanför.

Men du kanske hellre vill ha 4 tabellceller? Två rader och två kolumner?

Samma princip gäller här, istället för att enbart upprepa <td></td> så gör du det också med <tr></tr>. Det som är viktigt att tänka på är att inte glömma att bryta tabellraden.

Det gör du så här.

<tr><td>cell1</td><td>cell2</td></tr>
här avslutar du tabellraden med 2 celler

här börjar en ny rad med ytterligare 2 celler
<tr><td>cell 3</td><td>cell 4</td></tr>

Här är tabell-koden

<table>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>

Så här ser tabellen ut:

cell 1
 cell2
cell3 cell4

Och tillsammans med <th>

Rubrik Rubrik
cell 1
 cell2
cell3 cell4 
<table>
<tr>
<th>Rubrik</th>
<th>Rubrik</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4
</td>
</tr>
</table>

TIPS!

Visste Du att du kan formatera dina tabellceller med css?

Genom att använda class och DIV attributen kan du formatera varje enskild tabellcell, om du vill. Om du lägger in dessa attribut kan du till skillnad från en vanlig bild få bilden till att bli en bakgrundsbild som är exakt formaterad beroende på om du använder en sömlös bakgrundsbild eller en med fasta pixlar. Dessutom – använder du dessa attribut går det att få en löpande text ovanpå bilden istället för under, över eller vid sidorna.

Här är några exempel

Låt oss säga att du vill ha attributen på några enskilda sidor. Då lägger du in denna css-kod i <head> på de sidorna. 

<style type=”text/css”>
<!–
.bild1 { background: transparent url('bg.jpg') no-repeat;}
–>
</style >

Sedan – för de tabellceller som du vill ha denna bakgrundsbild lägger du in denna css-kod i <td>

<div class=”bild1">

Väljer du att lägga in attributet i din css-mall skriver du in detta.

.bild1 { background: transparent url('bg.jpg') no-repeat;}

När du använder css-mall måste du lägga till ditt class-attribut så det ser ut så här: <td class=”bild1″>

Glöm bara inte att om du vill ha olika bilder så måste du döpa varje bild och attribut med ett likadant egna unika namn som .bild1 – .bild2. osv.

<html>
<head>
<title>
</title>
<style type=”text/css”>
<!–
.bild1 { background: transparent url('bg.jpg') no-repeat;}
–>
</style>
</head></html>

I själva tabellen.

<table>
<tr>
<td class="bild1"> du ställer själv in storleken på bilden i din cssmall beroende på hur stor den är eller om den är sömlös
</td>
</tr>
</table>
Minns vad jag skrev i början. Lägger du in bilden med elementet div class inuti cellen (td) så kommer bilden att visas i sin fulla storlek eller den du angav i stilmallen. Används class attributet i td kan bildstorleken däremot kapas och bli mindre. Det hela har dels att göra hur stora tabellcellerna har angivits i stilmallen, därtill om dessa även gjorts så att de följer storleken på webbskärmen – en responsiv design. Tabeller lämpar sig alltid bäst till tab data.

Mer om hur vi använder CSS till utseendet lär du dig i mina CSS-guider.