Formatowanie zawartości tabeli w HTML i CSS na stronie

Zbudowanie tabeli na stronie internetowej w HTML z pewnością dla większości z was nie stanowi dużego problemu.

Schody zaczynają się dopiero w momencie kiedy chcemy ją sformatować. Nie wiem jak w waszym przypadku, ale mnie zawsze przeszkadzała zbyt mała przestrzeń między komórkami.  Zapewne część z was powie „to trzeba opuścić komórkę lub od razu cały rząd”.

Zapewne pomysł niegłupi, ale np. w sytuacji kiedy budujemy z pomocą tabel mailing to niekoniecznie się sprawdzi (niektóre programy pocztowe wizualnie usunęły by pusty obiekt).

UWAGA: Wartości stosowane w HTML mierzone są w PX. Czyli np. cellspacing=”15″ oznacza że chodzi nam o 15px.

Przerwy między komórkami w tabeli z pomocą HTML

HTML dosyć dobrze radzi sobie z tworzeniem przestrzeni między pojedynczymi komórkami. W celu dodania odstępów stosujemy atrybut cellspacing. Deklarujemy go następująco:

<table border="1" cellspacing="x">...</table>Gdzie zmienna cellspacing posiada wartość „x” którą zamieniamy na dowolną w zależności od tego jaka ma być odległość poszczególnych komórek liczona w pikselach. (border="1" – oznacza, że mamy ramkę o szerokości 1px)

przykład:

W powyższym przykładzie cellspacing=”15″

<table border="1" cellspacing="15">

Wadą (a może i zaletą) tej metody jest to, że przestrzenie wszędzie są równe. Dodatkowo powinna być interpretowana przez praktycznie wszystkie przeglądarki. ?

Przerwy między komórkami z pomocą CSS

Oczywiście cellspacing posiada swój odpowiednik w CSS. I podobnie jak w przypadku innych atrybutów mamy tu o wiele większe pole do manewru. Odpowiednikiem tego atrybutu w CSS jest border-spacing. W luźnym tłumaczeniu „przestrzeń obramowania”.

Deklaracja wygląda następująco:

    border-spacing: 10px;

Tak to wygląda w praktyce:

Przydatna z pewnością będzie tutaj też właściwość border-collapse. Trzeba ją ustawić na:

table{   
      border-collapse: separate;
}

Jeżeli jednak chcemy zabronić tworzeniu się przestrzeni między komórkami w takim przypadku przyda nam się:

table{ 
   border-collapse: collapse;
}

Przy takim ustawieniu nawet jeśli będziemy posiadać cellspacing, border-spacing nasza tabele nie będzie miała pustych przestrzeni.

Zmiana położenia tekstu, zawartości w tabeli w HTML

Zapewne zwróciliście uwagę na to, że różne teksty mieszczące się w tabelach czasem są u góry kiedy indziej na środku lub u dołu. W HTML służy do pozycjonowania w komórce atrybut valign.
Z jego pomocą możemy manipulować położeniem zawartości elementów takich jak:

• COL,
• COLGROUP,
• TBODY,
• TD,
• TFOOT,
• TH,
• THEAD,
• TR

Valign posiada ustawienia –

• top – do góry
• middle – po środku
• bottom – na dół
• baseline – do linii bazowej

deklaracja wygląda następująco

<table border="1">
<tbody>
<tr>
<td>1 za długi teks w komórce</td>
<td valign ="top">2 Tekst w komórce</td>
<td valign ="middle">3 Tekst w komórce</td>
<td valign ="bottom">4 Tekst w komórce</td>
<td valign ="baseline">5 Tekst w komórce</td>
</tr>
</tbody>
</table>

Niestety ja mam dodaną do bloga bibliotekę Bootstrap wiec u mnie ta własność nie działa. U was również może to nie działać ze względu na obecne na stronie kaskadowe style. Co prowadzi nas do wniosku, że CSS ma wyższy priorytet (przynajmniej w tym przypadku).

Zmiana położenia tekstu wewnątrz tabeli z CSS

W CSS osiadamy właściwość vertical-align. Posiada ona analogiczne cechy jak jej odpowiednik w HTML.

W praktyce wygląda to tak:

<table style="border-collapse: collapse;" border="1"> 
<tbody> 
<tr> 
  <td style="height: 170px;">1 za długi tekst w komórce</td> 
  <td style="vertical-align:top">2 Tekst w komórce</td> 
  <td style="vertical-align:middle">3 Tekst w komórce</td> 
  <td style="vertical-align:bottom">4 Tekst w komórce</td> 
  <td style="vertical-align:baseline">5 Tekst w komórce</td> 
</tr> 
</tbody> 
</table>

Jak widać mamy całkiem spore pole do popisu.

Dodawanie obramowania tabeli w HTML i CSS

Jak pewnie zauważyliście w powyższych przykładach używam atrybutu border="1". Z pomocą tego atrybutu otrzymuję grubość tabeli. Szerokość taka jest najmniejsza, jeśli chcemy uzyskać grubsze obramowanie w HTML musimy zmienić border na większą wartość.

Przykłady:

<table style="border-spacing: 10px; border-collapse: collapse;" border="5">
<tbody>
<tr>
<td>1 Tekst w komórce</td>
<td>2 Tekst w komórce</td>
</tr>
<tr>
<td>3 Tekst w komórce</td>
<td>4 Tekst w komórce</td>
</tr>
</tbody>
</table>

Drugi przykład:

<table style="border-spacing: 10px; border-collapse: collapse;" border="15">
<tbody>
<tr>
<td>1 Tekst w komórce</td>
<td>2 Tekst w komórce</td>
</tr>
<tr>
<td>3 Tekst w komórce</td>
<td>4 Tekst w komórce</td>
</tr>
</tbody>
</table>

W przypadku CSS z kolei wystarczy nam dobrze sprawdzona własność border. Możecie o nim poczytać pod linkiem.

Kolorowanie tabeli

O kolorowaniu tabeli pisałam już w innym wpisie dlatego zachęcam was do jego przeczytania.

Podsumowanie

Jak widać tabele na stronach internetowych potrafią być dosyć ciekawymi obiektami. Ten wpis z pewnością nie wyczerpał ich tematu ale może być wstępem do nauki. Poniżej zamieściłam inne ciekawe wpisy:

• Dodanie cienia pod obrazkiem
• Dodanie obramowania
• Właściwość CSS empty-cells