Tabele (3)
Tomasz Bartuś
Wróćmy do tabelki z Izą.
<table border="3" width="100" height="75">
<tr>
<td align="left" valign="middle">Iza</td>
</tr>
</table>
I ze względu na jasność i przejrzystość kodu usuńmy atrybuty wyrównania. Wiemy, co się stanie, ponieważ wiemy, jakie są wartości domyślne.
Przy okazji, tag mówi przeglądarce, by coś zrobić. Zaś atrybut precyzuje przeglądarce, jak to zrobić.
<table border="3" width="100" height="75">
<tr>
<td>Iza</td>
</tr>
</table>
Uczynimy teraz naszą tabelkę nieco większą
<table border="3" width="300" height="75">
<tr>
<td>Iza</td>
</tr>
</table>
Kumpel Izy - Marek wraca do gry i chce swoją własną komórkę.
<table border="3" width="300" height="75">
<tr>
<td>Iza</td>
<td>Marek</td>
</tr>
</table>
Jeżeli nie podamy żadnych instrukcji co do szerokości kolejnych komórek tabeli, przeglądarka najczęściej (ale nie zawsze) nada każdej komórkom inną szerokość - proporcjonalną do szerokości trści znajdującej się w ich wnętrzach. Dobrym zwyczajem jest deklarowanie szerokości każdej komórki tabeli. Zawsze upewnij się, że suma szerokości wszystkich komórek odpowiada szerokości tabeli
<table border="3" width="300" height="75">
<tr>
<td width="150">Iza</td>
<td width="150">Marek</td>
</tr>
</table>
Atrybuty width mogą być także zadeklarowane w sposób procentowy.
<table border="3" width="300" height="75">
<tr>
<td width="50%">Iza</td>
<td width="50%">Marek</td>
</tr>
</table>
Nadajmy komórce Iza większą szerokość.
<table border="3" width="300" height="75">
<tr>
<td width="80%">Iza</td>
<td width="20%">Marek</td>
</tr>
</table>
Rysiek powrócił i oczywiście chce swojej osobnej komórki. Musimy zdecydować jaką szerokość powinna mieć jego komórka. Przypuśćmy, że 20%. Upewnij się, że zmieniłeś także szerokość komórki Izy.
<table border="3" width="300" height="75">
<tr>
<td width="60%">Iza</td>
<td width="20%">Marek</td>
<td width="20%">Rysiek</td>
</tr>
</table>
Dołóżmy drugi wiersz z trzema komórkami: Asią, Emilią i Wojciechem.
<table border="3" width="300" height="75">
<tr>
<td width="60%">Iza</td>
<td width="20%">Marek</td>
<td width="20%">Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Atrybut width zadeklarowany dla pierwszego rzędu obowiązuje także dla rzędu drugiego i rzędów następnych.
Jeżeli Wojciech nas opuści, nasz tabela ciągle będzie dobrze wyglądała. pozostanie po prostu puste miejsce
<table border="3" width="300" height="75">
<tr>
<td width="60%">Iza</td>
<td width="20%">Marek</td>
<td width="20%">Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Ponownie dodajmy komórkę Wojciecha i usuńmy wszystkie atrybuty z wyjątkiem border.
<table border="3">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Teraz zajmiemy się parą atrybutów cellpadding i cellspacing. Obie zmienne są używane wewnątrz tagu <table>. cellpadding definiuje odległość (przestrzeń) pomiędzy krawędzią komórki, a jej zawartością.
<table border="3" cellpadding="12">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Domyślna wartość atrybutu wynosi "1". Właśnie "1" a nie "0" ponieważ w znajdował się w pewnej odległości od krawędzi komórki tabeli. (Jakkolwiek można także zadeklarować wartość "0").
Zadeklarowanie atrybutu cellpadding, daje efekt widoczny poniżej.
<table border="3" cellspacing="12">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
Domyślną wartością atrybutu cellspacing jest "2".
Oczywiście jesteśmy w stanie wykorzystywać kombinacje obu atrybutów.
<table border="3" cellspacing="12" cellpadding="12">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
