HTML Táblázatok

Egy táblázat elkészítéséhez az alábbi “keret” kell:

<HTML>
 <HEAD>
  <TITLE>Honlapcím</TITLE>
 </HEAD>
 <BODY>
  <TABLE>
  </TABLE>
 </BODY>
</HTML>



Minden táblázatnak kell,hogy legyen egy sora:

<TABLE>
 <TR>
 </TR>
</TABLE>

És egy oszlopa:

<BODY>
 <TABLE>
  <TR>
   <TD></TD>
  </TR>
</TABLE>

Egy 3×2-es Táblázat kitöltése:

<TABLE>
 <TR>
  <TD>1</TD>
  <TD>2</TD>
  <TD>3</TD>
 </TR>
 <TR>
  <TD>A</TD>
  <TD>B</TD>
  <TD>C</TD>
 </TR>
</TABLE>

Ahhoz, hogy megjelenítsük, változtassuk meg a táblázat kezdetét:

<table BORDER=3 WIDTH="330" HEIGHT="75">

Ezzel a keret vastagságát és max. szélességét is definiáltuk.

A BORDER a táblázat keretvastagságát határozza meg (ha 0 (nulla), nem látszik;
A WIDTH és a HEIGHT pedig hasonlóan, mint a képeknél: a szélességre és a magasságra vonatkozik.

1 2 3
A B C

Ahhoz, hogy a cella tartalma vízszintesen és függőlegesen is középre kerüljön:

<TD ALIGN=center VALIGN=middle>Ed</TD>

ALIGN lehet: left, center, right (vízszintes igazítás)
VALIGN lehet: top, middle, bottom (függőleges igazítás)

Egyedi oszlopszélességek:

<TABLE BORDER="3" WIDTH="300" HEIGHT="75">
 <TR>
  <TD ALIGN="left" VALIGN="top" WIDTH="40%">Ed</TD>
  <TD WIDTH="60%">Tom</TD>
 </TR>
</TABLE>
Ed Tom

Kép beszúrása cellába:

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle"> <IMG SRC="ed.gif"
WIDTH=32 HEIGHT=32 ALT="Ed"> </TD>
</TR>
</TABLE>
Ed

Kép lehet cella, vagy táblázat háttere is; ebben az esetben a BACKGROUND="hatter.gif" kódot kell alkalmazni.

  • Ha a táblázatot definiáló (TABLE …) sorba illesztjük, akkor az egész táblázat mögött lesz,
  • Ha a cellát definiáló (TD) sorba illesztjük, akkor csak a cella mögött.

Ha egy cellát üresen akarsz hagyni:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
 <TR>
  <TD WIDTH=60%>Ed</TD>
  <TD WIDTH=20%>Tom</TD>
  <TD WIDTH=20%>Rick</TD>
 </TR>
 <TR>
  <TD>Larry</TD>
  <TD>Curly</TD>
  <TD> &nbsp;</TD>
 </TR>
</TABLE>

Ha nagyobb üres helyet akarsz hagyni a keret és a szöveg között:

<TABLE BORDER="3" CELLPADDING="12">
 <TR>
  <TD>Ed</TD>
  <TD>Tom</TD>
  <TD>Rick</TD>
 </TR>
 <TR>
  <TD>Larry</TD>
  <TD>Curly</TD>
  <TD>Moe</TD>
 </TR>
</TABLE>
Ed Tom Rick
Larry Curly Moe

Ha a keretet akarod vastagítani:

<TABLE BORDER="3" CELLSPACING="12">
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>
Ed Tom Rick
Larry Curly Moe

Szinezés:

<TABLE BORDER=3 BGCOLOR="#FF0000">
 <TR>
  <TD>Ed</TD>
  <TD>Tom</TD>
  <TD>Rick</TD>
 </TR>
 <TR>
  <TD>Larry</TD>
  <TD>Curly</TD>
  <TD>Moe</TD>
 </TR>
</TABLE>
Ed Tom Rick
Larry Curly Moe

Vagy kicsit másképp:

<TABLE BORDER=3 BGCOLOR="#FF0000">
 <TR BGCOLOR="#009900">
  <TD BGCOLOR="#9999FF">Ed</TD>
  <TD>Tom</TD>
  <TD>Rick</TD>
 </TR>
 <TR>
  <TD>Larry</TD>
  <TD>Curly</TD>
  <TD>Moe</TD>
 </TR>
</TABLE>
Ed Tom Rick
Larry Curly Moe

Természetesen a TABLE … sorból elhagyható a szín definició és “bárhová” lehet tenni.

Ha a táblázat nem 3×2-es:

Azaz az első sor első két cellája össze van vonva:

<TABLE BORDER=3>
<TR>
<TD COLSPAN="2" >Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>
Ed Rick
Larry Curly Moe

Az első sor összes celláját is összevonhatjuk:

<TABLE BORDER=3>
 <TR>
  <TD COLSPAN="3" ALIGN="center">
   <A HREF="http://htmlinfo.hu/">Ed</A>
  </TD>
 </TR>
 <TR>
  <TD>Larry</TD>
  <TD>Curly</TD>
  <TD>Moe</TD>
 </TR>
</TABLE>
Ed
Larry Curly Moe

Vagy, ha függőlegesen akarunk több cellát összevonni:

<TABLE BORDER="3">
 <TR>
  <TD ROWSPAN="2" >Ed</TD>
  <TD>Tom</TD>
  <TD>Rick</TD>
 </TR>
 <TR>
  <TD>Curly</TD>
  <TD>Moe</TD>
 </TR>
</TABLE>
Ed Tom Rick
Curly Moe

Illetve így is, úgy is:

<TABLE BORDER="3">
 <TR>
  <TD ROWSPAN="2" >Ed</TD>
  <TD COLSPAN="2">Tom</TD>
 </TR>
 <TR>
  <TD>Curly</TD>
  <TD>Moe</TD>
 </TR>
</TABLE>
Ed Tom
Curly Moe

Megjegyzés: a HTML 4.01 ajánlás szerint a formázó attribútumok használata nem javasolt. Helyettük a W3C a stíluslapok használatát ajánlja.

9 válasz

  1. Szabó Katalin - 2009. 08. 14.

    Szia!

    Nekem nagyon tetszik a leírásod, nagyo részletes, áttekinthető.
    Egy kérdésem volna, hogy a táblázat keret színét hogyan lehet megváltoztatni, hogy ne szürkés-fehér legyen.
    Ugyanakkor a táblázat hátterét nem akarom színezni.
    Segítséged előre is köszönöm: Kata

  2. htmlinfo - 2009. 08. 14.

    A szegélyek színezéséről hamarosan a stíluslapok ismertetésekor szó fog esni.

  3. torch - 2009. 12. 06.

    Üdv!
    Nagyon jó kis leírás, könnyen értelmezhető, jól kivehető informatív írás, köszönet érte.

  4. Gyurkó Attila - 2010. 02. 09.

    Szia
    Szeretném ha tudnál segíteni hogy, hogy tudom azt megcsinálni, ha írok egy táblázat cellájába akkor a cella szélessége fix marad, és ha esetleg betelik a cella akkor csak függőlegesen változzon a mérete.

    Köszi előre is.
    Szia, Attila

  5. htmlinfo - 2010. 02. 12.

    @Attila,
    Meg kell adnod az oszlop szélességét. Mondjuk az első sor adott cellájánál.

  6. Gyurkó Attila - 2010. 02. 12.

    azt is csináltam de ugyan úgy, ha írok a cellába akkor a cella szélessége nő

  7. HTML Info » Cellaszélesség - 2010. 02. 20.

    [...] HTML Táblázatok [...]

  8. htmlinfo - 2010. 02. 20.

    @Attila,
    Írtam egy kis magyarázatot. Remélem, segít.

  9. Gyurkó Attila - 2010. 02. 20.

    Köszönöm szépen

Szólj hozzá!

  • Kezelés