Passagens HTML-guide: Tabeller i HTML-dokument
En tabell påbörjas med taggen:
<TABLE>
Varje ny tabellrad börjar sedan med:
<TR>
Din web-läsare tolkar varje <TR>-tagg som en ny rad, och du behöver därför inte avsluta den taggen.
Sen finns det två olika taggar för nya tabellfält, och de taggarna är:
<TH> - för ett fält med rubrik.
<TD> - för ett nytt datafält.
Vi provar att göra en enkel tabell:
<TABLE BORDER=1>
<TR><TH>En liten rubrik</TH>
<TD>Lite text</TD>
<TD>Text</TD>
<TR><TH>Nästa rubrik</TH>
<TD>Mer text</TD>
<TD>Ännu mer</TD>
</TABLE>
Den tabellen kommer att se ut så här:
| En liten rubrik |
Lite text |
Text |
| Nästa rubrik |
Mer text |
Ännu mer |
För tabellen finns förstås flera tilläggstaggar. För TABLE-taggen finns dessa:
BORDER=x
Ändrar tjockleken på tabellens ramar. Exempel:
| En tabell med ett fält, BORDER=10, och 25% bredd av sidan. |
WIDTH=x
WIDTH=x%
Här kan du ange tabellens bredd i bildpunkter eller i procent av sidan. WIDTH=x kan också användas för separata celler, exempel: <TH WIDTH=25> eller <TD WIDTH=25>.
CELLPADDING=x
Här kan du ange avståndet i bildpunkter från tabellcellens kant till cellens innehållet.
CELLSPACING=x
Här kan du bestämma avståndet mellan cellerna i bildpunkter.
För TR-taggen kan du använda de här tilläggen:
ALIGN=LEFT eller RIGHT eller CENTER
Med den här taggen kan du justera tabellcellernas innehåll.
VALIGN=TOP eller MIDDLE eller BOTTOM eller BASELINE
Här kan du justera cellernas innehåll vertikalt. Om du använder dig av VALIGN=BASELINE, så kommer cellernas innehåll att centreras vid en gemensam baslinje.
Taggarna för själva cellerna TD och TH har också tilläggskommandon, dels kan du använda dig av ALIGN och VALIGN även här, men då bara för enskilda fält. Övriga tillägg som finns är:
WIDTH=x
Här kan du bestämma vidden för en specifik cell i punkter.
COLSPAN=x
Om du vill att en cell ska sträcka sig över flera kolumner i tabellen, så använder du det här kommandot. Om du skriver COLSPAN=3, så sträcker fältet sig över tre kolumner (på bredden).
ROWSPAN=x
Det här kommandot använder du för att göra samma sak som med COLSPAN, men här är det att få fältet att sträcka sig över flera rader det gäller.
NOWRAP
Använder du dig av om du absolut inte vill att texten i en cell ska radbrytas. OBS! Detta kan ge vädigt breda celler.
Nu kan du nästan allt om tabeller. Vad vi inte har tagit upp ännu är om du vill ha en titel över din tabell. Då använder du dig av taggen:
<CAPTION ALIGN=TOP>Rubriktext</CAPTION>
om du vill ha rubriken ovanför din tabell, men om du vill ha rubriken under tabellen så du dig av:
<CAPTION ALIGN=BOTTOM>Rubriktext</CAPTION>
Det här kommandot ska ligga innanför TABLE-taggen, men utanför TR-taggarna.
Ska vi göra ett exmpel på en tabell:
Testtabell
| En liten under rubrik |
| Här används ROWSPAN=2 |
Text |
Mer text |
| Förstår du? |
Ännu mer text |
Taggarna för ovanstående tabell ser ut så här:
<TABLE WIDTH=75% BORDER=3 CELLSPACING=3 CELLPADDING=5>
<CAPTION ALIGN=TOP><H1>Testtabell</CAPTION>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TH COLSPAN=3>En liten underrubrik</TH>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD ROWSPAN=2>Här används ROWSPAN=2</TD>
<TD>Text</TD><TD>Mer text</TD>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>Förstår du?</TD><TD>Ännu mer text</TD>
</TABLE>
|
