OFFLINE
HTMLinfo => Alapfokú weblecke => Táblázatok
Táblázatok
Stéger András ©
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 3x2-es Táblázat kitöltése:
<TABLE>
<TR>
<TD>Ed</TD>
<TD></TD>
<TD</TD>
</TR>
<TR>
<TD</TD>
<TD</TD>
<TD</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 ugyanúgy, mint a képeknél: a
szélességre és a magasságra vonatkozik.
|
1 |
2 |
3 |
|
A |
B |
C |
Ahhoz, hogy középre kerüljenek:
<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>
|
|
Képet BACKGROUND="hatter.gif" módon is be lehet tenni (ez az általános).
Ha a TABLE ... lezdetű sorba teszed, akkor az egész táblázat mögött lesz.
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> </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 3x2-es:
Azaz az első kettő oszlop helyett csak egy látszik:
<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 |
Kicsit más:
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN="center">< A HREF="http://htmlinfo.fw.hu/" >Ed</A></TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>
|
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 | |