wiersz - Kurs HTML i CSS
Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type...i zostaną opisane w dalszych rozdziałach. W celu poprawienia czytelności danych, często spotyka się obszerne tabele, w których kolejne nieparzyste wiersze są pokolorowane w odmienny sposób niż parzyste. Taki rodzaj formatowania można oczywiście uzyskać dodając co drugiemu wierszowi odpowiednią klasę. Gdy jednak wierszy jest sporo, zaczyna to być niewygodne. A co jeśli jutro zażyczymy sobie inny sposób kolorowania wierszy tej tabeli - w cyklu co trzy, a nie co dwa elementy? Dzięki...
Tabele HTML / Łączenie komórek tabeli <td colspan rowspan>...komórek, tym samym eliminując je. Każdy atrybut colspan="x" lub rowspan="y" eleminuje n-1 komórek pojedynczych (w przyległych kolumnach lub wierszach). Potrzebujesz pomocy? Przy tworzeniu tabel HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ wierszy i kolumn, a także zdefiniujesz estetyczny wygląd poprawiający prezentację treści. ✅ Rozpocznij konfigurację tabeli...
- Tabele HTML / Struktura tabeli HTML <table, tr, 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 wpisanie dodatkowych znaczników <td>...</td>) lub wierszy...
- Tabele HTML / Komórki nagłówkowe tabeli <th>
...(wyśrodkowany). Dlatego właśnie - jak sama nazwa wskazuje - komórka taka nadaje się do tworzenia nagłówka tabeli. Może się ona znajdować w dowolnym wierszu - nie tylko w pierwszym. Dodatkowo w wierszu takim mogą się znajdować również inne zwykłe komórki <td>...</td>. Dzięki temu możemy stworzyć pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli. Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td align="center"><b>...</b></td>)...
- Tabele HTML / Tytuł tabeli <caption>
...skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ wierszy i kolumn, a także zdefiniujesz estetyczny wygląd poprawiający prezentację treści. ✅ Rozpocznij konfigurację tabeli Przykład <caption> To jest tytuł tabeli komórka1 komórka2 komórka3 komórka4 Pytania i odpowiedzi <caption> Co to jest CAPTION w HTML? Jest to znacznik odpowiadający za tytuł (podpis) tabeli. Jak zrobić...
- Tekst CSS / Tryb pisania {writing-mode}
(CSS 3 - interpretuje Firefox 41, Opera 35, Chrome 48) selektor { writing-mode: tryb } Selektorem może być każdy znacznik z wyjątkiem grup wierszy tabeli (thead, tbody, tfoot), grup kolumn tabeli (colgroup), wierszy tabeli (tr) i kolumn tabeli (col) [zobacz: Wstawianie stylów]. Natomiast jako "tryb" należy podać: horizontal-tb - linijki tekstu ułożone poziomo jedna pod drugą (domyślnie) vertical-rl - linijki tekstu ułożone pionowo obok siebie od prawej do lewej strony (ang. right-to-left)...
- Tekst CSS / Orientacja tekstu {text-orientation}
(CSS 3 - interpretuje Firefox 41, Opera 35, Chrome 48) selektor { text-orientation: orientacja } Selektorem może być element z ustawionym pionowym trybem pisania, tzn. "writing-mode: vertical-lr" lub "writing-mode: vertical-rl". Natomiast jako "orientacja" należy podać: mixed - znaki tekstu ułożone pionowo na boku czyli obrócone o kąt 90° (domyślnie), chyba że użyta czcionka obsługuje pionową orientację upright - znaki tekstu ułożone pionowo zawsze jeden pod drugim sideways - znaki tekstu...
- Komendy CSS3 / Układ siatki CSS
...[ row | column ] || dense Inicjalizacja row Zastosowanie kontenery układu siatki Dziedziczenie nie Procenty nie grid-auto-rows Automatyczne wiersze układu siatki Wartość <track-size>+ Inicjalizacja auto Zastosowanie kontenery układu siatki Dziedziczenie nie Procenty zobacz grid-template-columns i grid-template-columns grid-column Atrybuty mieszane kolumny układu siatki Wartość <grid-line> [ / <grid-line> ]? Inicjalizacja auto Zastosowanie dzieci kontenera układu siatki i...
- Ikony (symbole) / Formatowanie tekstu
...na przód flip_to_front flip_to_front Linia kształtu shape_line shape_line Wszystkie obramowania border_all border_all Formatuj odstępy między wierszami format_line_spacing format_line_spacing Grubość linii line_weight line_weight Podział poziomy horizontal_split horizontal_split Połącz z prawej join_right join_right Zmniejsz wcięcie format_indent_decrease format_indent_decrease Funkcja function function Napisy wyłączone subtitles_off subtitles_off Wyrównanie poziome do środka...
- Znaki specjalne HTML / Encje HTML
...(odstęp), zwana również twardą spacją. W normalnym tekście nie mogą stać obok siebie dwie spacje. Nie może się także od niej rozpoczynać żaden wiersz. Dzięki symbolowi dodatkowej spacji, możesz pozbyć się wszystkich tych ograniczeń. Ponadto jeśli rozdzielisz dwa wyrazy symbolem dodatkowej spacji, masz pewność, że w tym miejscu nigdy nie zostanie przełamany wiersz (czyli nie zdarzy się tak, że pierwszy wyraz znajdzie się na końcu linii, a drugi na początku następnej). Właściwym...