tabela - Kurs HTML i CSS
Tabele HTML / Struktura tabeli HTML <table, tr, td><table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> Jest to najprostsza tabela, gdzie: <table>...</table> jest znacznikiem tabeli <tr>...</tr> jest znacznikiem wiersza <td>...</td> jest znacznikiem pojedynczej komórki W miejsce kropek należy wpisać treść poszczególnych komórek tabeli. Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez...
Tabele CSS / Rozplanowanie tabeli {table-layout}...możliwych minimalnych i maksymalnych szerokości poszczególnych kolumn wpływają na ostateczną szerokość tabeli w następujący sposób: Jeżeli tabela ma zdefiniowaną szerokość inną niż "auto", ostateczna szerokość tabeli jest określona przez większą z wartości: odgórnie ustalona szerokość tabeli oraz suma minimalnych szerokości poszczególnych kolumn powiększona o odstępy między komórkami i obramwanie. Jeżeli odgórnie ustalona szerokość tabeli jest większą wartością, poszczególne kolumny...
- Tekst CSS / Tryb pisania {writing-mode}
...wieloma kolumnami, w których znajdują się krótkie wartości - np. małe liczby całkowite. Jeśli do takiej tabeli dodamy nagłówek, może okazać się, że tabela stanie się bardzo szeroka, przez co trudno będzie ją czytać. W takiej sytuacji czasami lepiej jest wpisać komórki nagłówkowe pionowo, dzięki czemu cała tabela przyjmie bardziej zwarte rozmiary. Warto pamiętać, że nawet w przypadku pionowego ułożenia tekstu elementy takie jak <img> (obrazki) i <iframe> (ramki lokalne) nadal będą ułożone w...
- Pozycjonowanie CSS / Wyświetlanie {display}
...sformatowany jako "inline" (w linii) w ramach treści brata. W przeciwnym razie element zostanie sformatowany jako "block" (Opera 6, Chrome) table - tabela blokowa: <table>...</table> inline-table - tabela "inline": <table>...</table> table-row-group - grupa wierszy tabeli: <tbody>...</tbody> table-header-group - nagłówek tabeli: <thead>...</thead> table-footer-group - stopka tabeli: <tfoot>...</tfoot> table-row - wiersz tabeli: <tr>...</tr> table-column-group - grupa kolumn tabeli...
- Pozycjonowanie CSS / Widzialność {visibility}
...drugiego wiersza visibility: hidden komórka1 komórka2 komórka3 komórka4 - o szerszej zawartości komórka5 komórka6 Dla porównania ta sama tabela bez zmiany widzialności: komórka1 komórka2 komórka3 komórka4 - o szerszej zawartości komórka5 komórka6 Zwróć uwagę na różnice pomiędzy działaniem "visibility: collapse" a "display: none". W pierwszym przypadku, mimo iż wiersz z szerszą komórką został ukryty, kolumna w której się znajdowała nie zmniejszyła swojej szerokości. W...
- HTML dla zielonych / Edytory HTML
...narzędzie do porównywania plików oraz wyszukiwania i zamiany w wielu plikach jednocześnie. Przydatną funkcją jest także próbnik kolorów ekranu, tabela znaków ASCII oraz sprawdzanie pisowni. Linux Bluefish (darmowy) ★★★☆☆ Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Linuksa. Brackets (darmowy) ★★★★☆ Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Linuksa. gedit (darmowy) ★★★☆☆ Oficjalny edytor środowiska...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...CSS przynajmniej w stopniu zadowalającym? Dlaczego do tworzenia szablonów stron nie należy używać tabelek: Tabele służą do prezentacji danych tabelarycznych, a nie do tworzenia szablonów - jest to poważny błąd semantyczny. Zwiększają rozmiary dokumentów (dłuższe wczytywanie i wyższe opłaty za transfer). Znacznie ograniczają możliwości stylizacji za pomocą CSS. Utrudniają odbiór treści przez osoby niewidome oraz użytkowników przeglądarek tekstowych. Zwykle wpływają negatywnie na...
- Tabele HTML / Komórki nagłówkowe tabeli <th>
...Ułatwi to czytanie, jeśli komórki nagłówkowe znikną już z ekranu, z powodu zbyt długiej tabeli. Jest to bardzo przydatna funkcja zwłaszcza, jeśli tabela posiada dużo kolumn. Przykład <th, td title> Wskaż myszką dowolną zwykłą komórkę poniższej tabeli: A B 1 komórka1 komórka2 2 komórka3 komórka4 Przy okazji: zwróć uwagę na komórkę powyższej tabeli, która znajduje się w jej lewym-górnym rogu (na samym brzegu). Wygląda ona inaczej niż pozostałe, ponieważ nie posiada...
- Tabele HTML / Łączenie kolumn tabeli w grupy <colgroup, col>
...również dla znacznika <col> nadamy ten atrybut. Nawet jeśli kolumna nie wprowadza żadnych atrybutów, musi się znaleźć na liście, w przeciwnym razie tabela zostanie błędnie wyświetlona! Jeśli nie podamy atrybutu span="..." (dla grupy lub kolumny), zostanie przyjęta jego domyślna wartość, równa "1".
- Tabele HTML / Łączenie komórek tabeli <td colspan rowspan>
Poziome łączenie komórek <table> <tr> <td colspan="x">...</td> </tr> </table> gdzie "x" oznacza liczbę komórek do połączenia w poziomie. Pionowe łączenie komórek <table> <tr> <td rowspan="y">...</td> </tr> </table> gdzie "y" oznacza liczbę komórek do połączenia w pionie. Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona) może się rozciągać na kilka komórek pojedynczych. Tabela z połączonymi komórkami zawiera mniej znaczników...