Kurs z HTML dla początkujących

Formatowanie zawartości tabeli w HTML i CSS

kursy, tutoriale

Kategoria wpisu Kurs CSS, Kurs HTML, Kursy, Table Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Zbudowanie tabeli 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 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:

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.

przykład:

1 Tekst w komórce2 Tekst w komórce
3 Tekst w komórce4 Tekst w komórce

W powyższym przykładzie 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:

Tak to wygląda w praktyce:

1 Tekst w komórce2 Tekst w komórce
3 Tekst w komórce4 Tekst w komórce

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

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

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

1 Tekst w komórce2 Tekst w komórce
3 Tekst w komórce4 Tekst w komórce

Zmiana położenia tekstu w tabeli – 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 tego celu atrybut valign.
Atrybut ten możemy używać na:

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

Valign posiada ustawienia – top,middle,bottom, i baseline.
deklaracja wygląda następująco

Niestety ja mam dodaną do bloga bibliotekę Bootstrap wiec u mnie ta własność nie działa. Co prowadzi nas do wniosku, że CSS ma wyższy priorytet.

Zmiana położenia tekstu z CSS

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

 

1 za długi teks w komórce2 Tekst w komórce3 Tekst w komórce4 Tekst w komórce5 Tekst w komórce

W praktyce wygląda to tak:

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

Obramowanie 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.

Przykłady:

1 Tekst w komórce2 Tekst w komórce
3 Tekst w komórce4 Tekst w komórce

Drugi przykład:

1 Tekst w komórce2 Tekst w komórce
3 Tekst w komórce4 Tekst w komórce

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 to dosyć ciekawe obiekty. 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:

 

Cień pod obrazkiem, tekstem z użyciem CSS

 

Właściwość CSS empty-cells