|
|||||||||||||||||||||||||||||||||||||||||||||||||
Nagłówek
W E B D E S I G N przykłady tabel
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD ALIGN=""right">W E B D E S I G N</TD>
<TD>przykłady tabel</TD>
</TR>
</TABLE>
Podział strony na kolumny
1
2 3
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="132" VALIGN="top">1</TD>
<TD WIDTH="18" VALIGN="top">2</TD>
<TD WIDTH="310" VALIGN="top">3</TD>
</TR>
</TABLE>
Atrybut VALIGN w kolumnach
top
middle bottom baseline
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD VALIGN="top">top</TD>
<TD VALIGN="middle">middle</TD>
<TD VALIGN="bottom">bottom</TD>
<TD VALIGN="baseline">baseline</TD>
</TR>
</TABLE>
Dla łatwiejszej orientacji, podczas konstruowania tabeli warto używać atrybutu BORDER="1", a po skończeniu zmienić na "0" albo zostawić, w zależności od potrzeb.Atrybuty szerokości i światła ramek
CELLSPACING="0"
CELLPADDING="0"
CELLSPACING="0"
CELLPADDING="5"
CELLSPACING="5"
CELLPADDING="0"
CELLSPACING="5"
CELLPADDING="5"
<TABLE BORDER="1" CELLSPACING="n" CELLPADDING="n">
<TR>
<TD>CELLSPACING="n"</TD>
</TR>
<TR>
<TD>CELLPADDING="n"</TD>
</TR>
</TABLE>
Atrybut COLS
1 2
1 2 3
<TABLE COLS="3" BORDER="0" CELLSPACING="n" CELLPADDING="n">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
</TABLE>
Atrybut ROWSPAN
0 1 2 3 4 5 6
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD ROWSPAN="6">0</TD>
</TR>
<TR>
<TD>1</TD>
</TR>
<TR>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
</TR>
<TR>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
</TR>
</TABLE>
Atrybut COLSPAN
1 2 3 4 5 6 7 8
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD COLSPAN="2">1</TD>
<TD COLSPAN="4">2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
</TR>
</TABLE>
Ilustracja w tle tabeli
Przeglądarki w wersji od 4.0 umożliwiają oglądanie ilustracji podłożonej w tle całej tabeli lub w pojedynczej celi.
<TABLE BACKGROUND="tlo.jpg" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD>
<IMG WIDTH="170" HEIGHT="193" ALIGN="right" BORDER="0" SRC="mole.gif">
Tekst </TD>
</TR>
</TABLE>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD BACKGROUND="tlo.jpg">
<IMG WIDTH="170" HEIGHT="193" ALIGN="right" BORDER="0" SRC="mole.gif">
Tekst </TD>
</TR>
</TABLE>
Pozornie niezauważalne drobiazgi mogą stworzyć ciekawą kompozycję; tabele z definicjami zakończone są delikatną linią z pikselowego GIFa. Inny GIF posłużył do zrobienia bloku.
<TABLE WIDTH="440" BGCOLOR="#EEEEEE" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD><IMG WIDTH="40" HEIGHT="1" ALIGN="left" SRC="clear.gif">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD>tekst</TD>
</TR>
</TABLE>
<IMG WIDTH="440" HEIGHT="1" SRC="black.gif"></TD>
</TR>
</TABLE>
