189 Shares 4099 views

CSS: projektowanie stół. przykłady rejestracji

Dokonywanie stoły z CSS – z lekcji ciekawe i odpowiedzialne. Podejście do tej branży trzeba umiejętnie, ze świadomością wszystkich możliwych stylach. Ponadto konieczne jest, aby mieć poczucie piękna, aby nie odstraszyć swoich gości kreatywności.


Tabele mogą przekształcić prawie wszystko. Piękne wzornictwo obejmuje zastosowanie granice tabel CSS projektowych, stół, tło komórek, różnica między nimi a bardziej. Rozważmy najbardziej podstawowe.

table border

CSS styl stół projekt zawsze wiąże się z gry z granicy (ramki). Wszystkie tabele domyślne nie są kontury ramki. Oznacza to, że jest ona równa 0 pikseli. Ale to może być skorygowana przy granicy nieruchomości.

Możesz określić zewnętrzną ramę dla całej tabeli:

Tabela {graniczne: 3px wypełnione; }

Dzięki tej linii na wszystkich tabel na stronie, która używa tego stylu jest czarna ramka. Należy pamiętać, że tylko ta granica na brzegach, ale nie w środku tabeli. W przypadku linii komórkowych i ramy nie podano inaczej.

TH, TD {graniczne: 3px wypełnione;}

Grubość i kolor, można podać dowolny. Należy pamiętać, że granice nie są podwojone, gdy składanie komórek.

Słowo oznacza solidną ciągłą rejestrację. Można określić inne wartości.

Jest to najczęściej używany solidną ramę, jak to wygląda bardziej atrakcyjne i nie odwracać uwagi od głównej zawartości witryny.

Własność border można określić również na pokładzie. Granicę można ustawić tylko na górze, na dole, lewej lub prawej stronie. Ponieważ w niektórych przypadkach nie jest realną opcją z ramą dla całej tabeli na raz.

Tabela {granicy wierzchołek: 1 piksel na czerwono; }

Więc można ustawić ramkę na górze tylko stół. Podobnie do innych stron, zamiast po prostu napisać: górny prawy, lewy lub dolny.

nagłówek tabeli

Nagłówek tabela może być określona za pomocą znacznika . Ten znacznik może być w CSS zarejestrować wiele mieszkań do dostrajania. Konstrukcja tabeli CSS jest dobre, ponieważ możliwe jest manewrowanie elementy tak, jak chcesz.

Tytuł ten jest wyświetlany w taki sam sposób jak w standardowych książkach (na przykład „Tabela 1”).

Można określić lokalizację tytułowego i właściwość Caption-side (górnej lub dolnej). Wyrównywanie w lewo lub prawo jest określony przez właściwość text-align.

stoły tła

Tło tabeli może być dowolnego koloru albo wzoru. Kolor określa właściwość background-color. Nazwy właściwości w pełni zgodne z zastosowaniami w mowie. To ułatwia przechowywanie wielokrotnie.

Kolor może być określony jako nazwa i różnych kodowań. Ponadto, można określić następujące elementy:

  • Przejrzyste – przezroczysty.
  • Dziedziczyć – kolor jest taki sam, jak w przypadku elementu nadrzędnego.
  • Początkowa – domyślna.

Opcja z przejrzystości mogą być stosowane w tych przypadkach, gdzie wszystkie tabele w tekście w pliku CSS są wykonane w jednym kolorze, ale w tym przypadku nie ma potrzeby.

Ponadto, w tle może być obraz. Aby to zrobić, w stylu przepisane własności background-image. Ścieżka jest tak:

url ( 'URL')

Ścieżka do pliku może być względny lub bezwzględny.

Bardziej skomplikowane napełnienia można zrobić z gradientem:

  • liniowym gradientem ();
  • promieniowego gradientu ();
  • powtarzanie liniową gradiencie (i) powtarzania promieniowe gradiencie () – nachylenie powtarzany.

tło komórki

Poza doświadczeniem w ogóle, można określić tła rozłożony w kolumnach lub wierszach. Do rejestracji nieruchomości jest używany bardzo często, ponieważ wizualne oddzielenie linii czytelność informacji.

W uzupełnieniu do przemian, można określić liczbę określonej kolumny lub wiersza. Na przykład tak:

  • tr: nth-child (nawet) {…} – określ przeplotem;
  • tr: n-ty-dziecka (1) {…} – zestawienie własności danego rzędu;
  • td: nth-child (nawet) {…} – wskazanie naprzemienne kolumny;
  • td: n-ty-dziecka (1) {…} – określenie właściwości danej kolumnie.

Poza tym kolejność i numery można określić – pierwszy (td: first-child) lub ostatni (td: last-child).

Szczelina pomiędzy komórkami

W CSS, projektowanie stół pozwala usunąć przestrzenie między komórkami. Domyślnie są. Na przykład, jeśli ustawić ramkę w tabeli bez określania odległości między granicami, to będzie tutaj ten wynik.

Zgadzam się, to nie wygląda bardzo ładnie i nie jest to wygodne, aby czytać. Użytkownicy będą mieć tętnienia w oczach tego powodu. Usuń te braki mogą być pisząc właśnie taką linię w stylu tabeli:

border-collapse: collapse

Ale zdarza się, że odległość, wręcz przeciwnie, powinna zostać zwiększona. Ponadto wielkość szczelin można określić jako między kolumnami i między wierszami. Aby wskazać, że wartość (zamiast zwinąć):

border-collapse: oddzielna

Ale takie działanie wskazuje, że konieczne jest oddzielenie komórek. Jako, że było ich akcji, podano dodatkową właściwość:

granicznych rozstaw 20 pikseli.

Jeśli chcesz określić inny odstęp między wierszami i kolumnami, oznacza to dwie rzeczy:

granicznych rozstaw 10px20px.

Różnica w przeglądarkach

Należy pamiętać, że w CSS projektowania tabel może wyglądać inaczej, w zależności od przeglądarki. Szczególnie źle jest w przypadku starszych wersji, że innowacje w CSS nie jest obsługiwany.

Powyższe jest przykładem grubości ramy na wartości cyfrowe.

W tym przykładzie grubość ramek dla stałych.

border style różnią się też znacznie.

Dlatego rozwój zawsze zobaczyć wynik w różnych przeglądarkach.

W CSS tabele projektowania zaleca się sprawdzenie typ przeglądarki. Szczególnie dużym problemem kiedyś do użytkowników ze starszymi wersjami programu Internet Explorer.

Bardzo zaawansowani programiści mogą, w zależności od przeglądarki, aby połączyć całkowicie różne pliki CSS. A ktoś robi kontrolę w każdej lub jakiś konkretny styl (klasa).

Większość problemów wynika z cienia.

CSS: Format Tabela Przykłady

Rejestracja może być dość zróżnicowane. To wszystko zależy od całego terenu i jego konstrukcji. Wszystko powinno być łączone i barwne kolory. Także to sprawia, że wielką rolę i smak dewelopera. Poczucie piękna jest różne.

Dajemy kilka przykładów różnych tabelach. Powyższy rysunek pokazuje zastosowanie pochylenia i bawić się z kolorem tła i obramowania.

Wiele będzie interesującym przykładem pięknej zadbanej projekt, który nie obniży użytkowników oczu. Ta postać jest odpowiednia w niemal każdej sytuacji.

Krawędzie mogą być zaokrąglone. To wygląda całkiem ładnie.

wniosek

Jak widać, dla wyglądu tabel w CSS istnieje wiele narzędzi. Każdy parametr jest również ogromna ilość opcji wartości. Jeśli używasz to wszystko na raz, można tworzyć arcydzieła. Zwłaszcza jeśli nie adaptacyjne projektowanie dla wszystkich przeglądarek.

Najważniejszą rzeczą w projektowaniu – nie przesadzaj z efektami. Wszystko powinno być wykonane z umiarem. Początkowo układ lubią eksperymentować i od razu wykorzystać całą swoją wiedzę. W wyniku tej tabeli są właściwości przesycone. Staraj się unikać tych błędów.

Ponadto, niektóre parametry mogą kolidować ze sobą nawzajem. Na przykład, nie ma potrzeby, aby określić kolor tła tabeli, a jeśli nie jest jeszcze ustawić obraz tła, która będzie pokrywać określony kolor.