Jak stylizować stół z CSS

To badanie będzie prowadzone z tabelami stylizacji z CSS.

Jak stylizować stół z CSS?

Aby zastosować style do stołu, przejdziemy przez serię kroków podanych poniżej.

Krok 1: Utwórz tabelę w HTML

Aby utworzyć tabelę w HTML, wykorzystywane są następujące elementy HTML:

• "”Element służy do utworzenia tabeli w HTML.
  "„Element jest wykorzystywany do dodania podpisu do tabeli.
  "”Jest wykorzystywany do określenia nagłówka stołu, który zwykle zawiera nagłówki.
  "
  ”Służy do dodawania rzędu.
  "
  ”Określa część ciała tabeli.

  Utworzony stół obecnie wygląda tak:

  Idźmy naprzód, aby zobaczyć, jak stylizować ten stół.

  Krok 2: Element „Body” stylu

  ciało
  Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
  kolor tła: RGB (233, 233, 233);
  

  Element jest stosowany z następującymi właściwościami stylizacji CSS:

  • "rodzina czcionek„Własność o wartości”Verdana, Genewa, Tahoma, Sans-Serif”Jest wykorzystywany do zastosowania czcionki obsługiwanej przez przeglądarkę. Jeśli przeglądarka nie obsługuje pierwszego stylu czcionki, druga zostanie użyta.
  • "kolor tła”Właściwość ustawia kolor tła elementu.

  Krok 3: Element stylu „podpisu”

  podpis
  Rozmiar czcionki: 25px;
  Text-Align: Center;
  kolor tła: #1C6758;
  Kolor: Cornsilk;
  

  Element jest stylizowany w następujący sposób:

  • "rozmiar czcionki„Własność jest wykorzystywana do ustawienia rozmiaru czcionki.
  • "tekst-align„Właściwość określa wyrównanie tekstu elementu.
  • "kolor„Własność odnosi się do koloru czcionki elementu.

  Oto dane wyjściowe wyżej wymienionego kodu:

  Krok 4: Dodaj granicę do stołu
  „„granica„Własność jest wykorzystywana do dodania granicy wokół elementu. Jest to krótka właściwość, która określa szerokość obramowania, styl graniczny i kolor graniczny.

  Zastosujmy granicę wraz z wyściółką i marginesem do stołu:

  Tabela, th, td
  granica: 2px solid #1C6758;
  Wyściółka: 1px 6px;
  Margines: Auto;
  

  Tutaj:

  • "granica„Obiekt dostosowuje granicę wokół stołu, określając szerokość granicy, styl graniczny i kolor graniczny.
  • "wyściółka”Określa przestrzeń wokół zawartości elementu, w której pierwsza wartość określa miejsce w górnym dnie, a druga wartość dodaje miejsce po prawej stronie zawartości.
  • "margines„Własność o wartości”automatyczny”Dodaje równe miejsce wokół elementu.

  Wyjście
  

  Notatka: Jeśli nie chcemy przestrzeni między granicami tabeli, użyj właściwości z kołysaniem granicznym.

  Krok 5: Odstępy graniczne z tabeli
  Przestrzenie między granicami tabeli można usunąć za pomocą „Zakładanie granic„Własność z wartością„ zawalenie się ”:

  Zakładanie granic: upadek;

  Krok 6: Dostosuj rozmiar tabeli
  Zobaczmy, jak dostosować rozmiar tabeli:

  thad th
  Szerokość: 160px;
  

  Dodano „szerokość”Obiekt z

  Teraz uzyskaj dostęp do komórki za pomocą nazwy klasy w pliku CSS:

  .podkreślenie
  kolor tła: #0f90d5;
  

  „„.atrakcja”Odnosi się do najważniejszego wydarzenia klasy

  ”Określ zawartość kierunkową. "
  element automatycznie dostosuje rozmiar tabeli zgodnie z nim :: Możemy również zastosować style do określonej komórki tabeli. Omów jemy! Krok 7: Komórki tabeli specyficzne dla stylu Aby stylizować określoną komórkę tabeli, określ nazwę klasy tej konkretnej komórki. Na przykład poniższy kod reprezentuje, że trzecią komórkę drugiego rzędu przypisuje się nazwę klasy „atrakcja”:	99	element. Ten element jest stosowany z „kolor tła„Właściwość, aby określić kolor na tle. Jak widzimy, określona komórka tabeli jest pomyślnie stylizowana: Krok 8: Ustaw rodzinę czcionki i rozmiar stołu tabela FONT-FAMILY: Kursywna; Rozmiar czcionki: 18px; Text-Align: Center; Do elementu tabeli stosuje się następujące właściwości CSS: "rodzina czcionek„Właściwość ustawia styl czcionki elementu. "rozmiar czcionki„Własność jest wykorzystywana do ustawienia czcionki elementu. "tekst-align„Właściwość służy do dostosowania wyrównania tekstu. Oto wyjście: Krok 9: Kolorowe sekwencje Może również stosować style do określonych wierszy lub kolumn. Na przykład równomierne rzędy są stylizowane, postępując zgodnie z poniższym formatem: \ TBody TR: NTH-Child (nawet) kolor tła: #FFB200; Tutaj: „„: Nth-Child (nawet)„Pseudo selektor jest wykorzystywany do przyjęcia jednego argumentu, który określa wzór, na którym ma zastosować stylistykę. "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu. Można zauważyć, że kolor tła jest z powodzeniem stosowany do równych wierszy: Chodziło o styl stolików z CSS Wniosek Tabele są ważnym narzędziem do organizowania danych. Tabela można utworzyć za pomocą HTML , , i więcej elementów. Kilka właściwości CSS jest wykorzystywanych do stylizacji tabeli, takich jak granica, właściwość koloru tła, właściwość rodziny i wiele innych. Aby lepiej zrozumieć, ten zapis wyjaśnił procedurę krok po kroku w celu stylizowania tabeli z CSS. « Jak oznaczyć starsze zatwierdzenie w Git? Jak rozwiązać „-Squash jest obsługiwany tylko w Docker Daemon z wymogiem funkcji eksperymentalnych” » Jawa Przykłady strumienia Java Przewodnik po różnych zastosowaniach strumienia Java w programowaniu Java, takich jak generowanie ta... Albert Szcześniak C ++ Jak używać odniesień do funkcji w C ++ Odniesienia do funkcji, w porównaniu z konwencjonalnymi wywołaniami funkcji, pozwól programistom wys... Albert Szcześniak Programowanie bash Jak używać komendy Znajdź w skrypcie Bash Znajdź polecenie można użyć do znalezienia plików na podstawie nazwy, grupy użytkowników, rozmiaru i... Renata Borowiec Pyton Python Oserror Oliwia Makowski Golang Jak używać czasu.Teraz funkcja w Golang - przykłady Pani Alicja Szafrański AWS Co to jest wieża kontrolna AWS i jak z niej korzystać? Maja Kucharski AWS Jak korzystać z cyklu życia instancji w AWS? Maja Kucharski Jawa Jak policzyć liczbę słów w ciągu za pomocą Java? Maja Kucharski Doker Jak mogę wymienić wszystkie polecenia Docker? Albert Szcześniak Fedora Jak włączyć repozytorium Fusion RPM na Fedorze Albert Szcześniak Pyton Co to jest strun B w Pythonie? Maja Kucharski php Jak używać funkcji php str_split Maja Kucharski C ++ Jak znaleźć rozmiar sznurka w C++? Makary Stasiak ,