Jak zrobić piękne tabel w HTML

Piękne tabelach

Style domyślna przeglądarka wyświetla tabelę i jej komórki bez widocznych granic i tła, a wewnątrz komórki tabeli nie przylegają ściśle do siebie. Ze stylów CSS można pięknie zaaranżować stół zgodnie z jego treścią.

Przejdź do strony z przykładami

  • zawartość:
  • 1. Tabela oddzielne linie
  • 2. Kolor stół
  • 3. Stół z zaokrąglonymi narożnikami
  • 4. Tabela oddzielne komórki
  • Kalendarz 5. Tabela
  • 6. Tabela rolety
  • 7. Tabela zebra
  • Menu 8. Tabela
  • Tabela 9 z uwzględnieniem pierwszej kolumnie
  • Tabela 10. Wpływ rzędach rozmycie aktywowanych
  • 11. Tabela Cena
  • 12. Tabela z ciemnym tłem i podkreślony tekst po najechaniu

1. Tabela oddzielne linie

Tabele z przestrzeni między rzędami, aby skupić się na powiązanej informacji zawartych w tym wierszu tabeli, ale w sąsiednich komórkach. W celu oddzielenia tekst znajdujący się umieścić go w innej komórce, a tym samym połączenie dwóch komórek w nagłówku tabeli ( Модель) i prawej granicy komórki usunięte.

tabeli CSS-1

znaczników HTML


  

Модель

Cena Ilość Razem
sukienka z kwiatowym nadrukiem 2500 1 2500
sukienka z panelami bocznymi 3000 1 3000
style CSS
stół {
granicznych rozstaw 0 10px;
font-family: 'Otwórz Sans', bezszeryfową;
czcionki wagi: pogrubienie;
}
th {
Wypełnienie: 10px 20 pikseli;
background: # 56433D;
color: # F9C941;
border-right: 2px stałej; 
czcionki, rozmiar: 0.9em;
}
th: first-child {
text-align: left;
}
th: last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
czcionki, rozmiar: 14px;
text-align: center;
border-top: 2px solid # 56433D;
border-bottom: 2px solid # 56433D;
border-right: 2px solid # 56433D;
}
TD: first-child {
border-left: 2px solid # 56433D;
border-right: none;
}
td: n-ty-dziecka (2) {
text-align: left;
}

2. Kolor stół

Dzięki tej technice możliwe jest, aby skutecznie zorganizować tabeli przy użyciu kontrastujących kolorów, które doskonale pasują do kolorystyki witryny.

tabeli CSS-2

znaczników HTML


  

Firma

Q1 Q2 Q3 Q4
Microsoft 20,3 30,5 23,5 40,3
Google 50,2 40.63 45.23 39,3
Apple 25,4 30,2 33,3 36,7
IBM 20,4 15,6 22,3 29,3
style CSS
stół {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
czcionki, rozmiar: 14px;
border-collapse: collapse;
text-align: center;
}
th, td: first-child {
background: # AFCDE7;
kolor biały;
Wypełnienie: 10px 20 pikseli;
}
TH, TD {
border-style: ciało stałe;
granica szerokości 0 1 piksel 1 piksel 0;
granicznych kolor biały;
}
td {
background: # D8E6F3;
}
th: pierwszego dziecka, td: first-child {
text-align: left;
}

3. Stół z zaokrąglonymi narożnikami

Dodając we właściwościach specyfikacji CSS3 border-radius, możliwość zaokrąglenia rogów stołu bez użycia obrazów tła. Aby osiągnąć ten efekt, konieczne jest, aby zaokrąglić narożniki odpowiednich komórek.

tabeli CSS-3

znaczników HTML

analogicznie jak w przykładzie 2.

style CSS
stół {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
czcionki, rozmiar: 14px;
granicznych promienia 10px;
granicznych rozstaw 0;
text-align: center;
}
th {
background: #BCEBDD;
kolor biały;
text-shadow: 1px 1px 0 # 2D2020;
Wypełnienie: 10px 20 pikseli;
}
TH, TD {
border-style: ciało stałe;
granica szerokości 0 1 piksel 1 piksel 0;
granicznych kolor biały;
}
th: pierwszego dziecka, td: first-child {
text-align: left;
}
th: first-child {
border-top-left-radius: 10px;
}
th: last-child {
border-top-right-radius: 10px;
border-right: none;
}
td {
Wypełnienie: 10px 20 pikseli;
background: # F8E391;
}
tr td last-child: first-child {
granicznych promienia 0 0 0 10px;
}
tr td last-child: last-child {
granicznych promienia 0 0 10px 0;
}
tr td: last-child {
border-right: none;
}

4. Tabela oddzielne komórki

tabeli CSS-4

znaczników HTML

analogicznie jak w przykładzie 2.

style CSS
stół {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
text-align: left;
granicznych zwijania: oddzielne;
granicznych rozstaw 5PX;
background: # ECE9E0;
color: # 656665;
border: 16px solid # ECE9E0;
granicznych promienia 20 pikseli;
}
th {
czcionki, rozmiar: 18px;
padding: 10px;
}
td {
background: # F5D7BF;
padding: 10px;
}

Kalendarz 5. Tabela

tabeli CSS-5

znaczników HTML


  
  
  
  
  
  
Moje tygodni roboczych, marzec 2015
Poniedziałek Wtorek środa Czwartek Piątek
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30 31
style CSS
stół {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
text-align: center;
border-collapse: collapse;
granicznych rozstaw 5PX;
background: # E1E3E0;
granicznych promienia 20 pikseli;
}
th {
czcionki, rozmiar: 22px;
czcionki masa: 300;
Wypełnienie: 12 pikseli 10px;
border-bottom: 2px solid # F56433;
color: # F56433;
}
tbody tr: n-ty-dziecka (2) {
border-bottom: 2px solid # F56433;
}
td {
padding: 10px;
color: # 8D8173;
}

6. Tabela rolety

tabeli CSS-6

znaczników HTML






Pracownik Zarobki Bonus Inspektor
Stephen C. Cox $ 300 50 $ Bob
Josephin Tan $ 150 - Annie
Joyce Ming $ 200 $ 35 Andy
James A. Pentel $ 175 $ 25 Annie
style CSS
stół {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
czcionki, rozmiar: 14px;
text-align: left;
border-collapse: collapse;
granicznych promienia 20 pikseli;
skrzynkowej cień 0 0 0 10px # F2906B;
color: # 452F21;
}
th {
Wypełnienie: 10px 8 pikseli;
background: white;
}
table th: first-child {
border-top-left-radius: 20px;
}
table th: last-child {
border-top-right-radius: 20px;
}
td {
border-top: 10px solid # F2906B;
padding: 8 pikseli;
background: white;
}
Stół td: first-child {
border-bottom-left-radius: 20px;
}
Stół td: last-child {
border-bottom-right-radius: 20px;
}

7. Tabela zebra

Pionowe zebra w konstrukcji stołu pozwala skupić się na kolumnach, a efekt, gdy wskazując na ciąg dodać atrakcyjności takiej tabeli.

Czytaj więcej:   Jak dostosować kolory do drukarki CANON MG

tabeli CSS-7

znaczników HTML


  

Q1 Q2 Q3 Q4
Microsoft 20,3 30,5 23,5 40,3
Google 50,2 40.63 45.23 39,3
Apple 25,4 30,2 33,3 36,7
IBM 20,4 15,6 22,3 29,3
style CSS
stół {
granicznych rozstaw 0;
empty-cells: hide;
}
td {
Wypełnienie: 10px 20 pikseli;
text-align: center;
border-bottom: 1px solid # F4EEE8;
Przejście: wszystkie 0,5s liniowy;
}
TD: first-child {
text-align: left;
color: # 3D3511;
czcionki wagi: pogrubienie;
}
th {
Wypełnienie: 10px 20 pikseli;
color: # 3D3511;
border-bottom: 1px solid # F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td: nth-child (parzyste) {
background: # F6D27E;
}
td: nth-child (nieparzyste) {
background: # D1C7BF;
}
th: nth-child (nawet) {
background: # F6D27E;
}
th: nth-child (nieparzyste) {
background: # D1C7BF;
}
.round-góry {
border-top-left-radius: 5px;
}
.Okrągłe dno {
border-bottom-left-radius: 5px;
}
tr: aktywowania td {
background: # D1C7BF;
czcionki wagi: pogrubienie;
}

Menu 8. Tabela

tabeli CSS-8

znaczników HTML

  
    
    
    
    
    
    
zimne przekąski
Nazwa Wyjście g. Cena, RBL.
Różne warzywa, zielonych i sera 250 190
Różne Mięso 250 300
Różne ryby (z łososia / c, pstrąg A / C) 250 350
Różne grzyby 120 150
Pickles z cylindra (pomidory, ogórki, papryka, czosnek, kapusta) 250 180
style CSS
stół {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
  border-collapse: collapse;
  color: # 686461;
}
podpis {
  padding: 10px;
  kolor biały;
  background: # 8FD4C1;
  czcionki, rozmiar: 18px;
  text-align: left;
  czcionki wagi: pogrubienie;
}
th {
  border-bottom: 3px solid # B9B29F;
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
}
tr: nth-child (nieparzyste) {
  background: white;
}
tr: nth-child (nawet) {
  background: # E8E6D1;
}

Tabela 9 z uwzględnieniem pierwszej kolumnie

table_col

znaczników HTML

  
      
  
  
    
    
    
    
    
Komedia Przygodowe Działanie dzieci
Straszny film Indiana Jones Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagaskar
Spartan LOTR Szklana pułapka Gdzie jest Nemo?
dr. Dolittle Mumia 300 Dawno temu w trawie
style CSS
{.table_col
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
  czcionki, rozmiar: 14px;
  szerokość: 660px;
  background: white;
  text-align: left;
  border-collapse: collapse;
  color: # 3E4347;
}
.table_col th: pierwszego dziecka, .table_col TD: first-child {
color: # F5F6F6;
border-left: none;
}
.table_col p {
czcionki wagi: normalny;
border-bottom: 2px solid # F5E1A6;
border-right: 20px koloru białego;
granicznych lewej: 20 pikseli białe ciało stałe;
Wypełnienie: 8 pikseli 10px;
}
.table_col td {
border-right: 20px koloru białego;
granicznych lewej: 20 pikseli białe ciało stałe;
Wypełnienie: 12 pikseli 10px;
color: # 8b8e91;
}

Tabela 10. Wpływ rzędach rozmycie aktywowanych

table_blur

znaczników HTML

  
    

Firma

Q1 Q2 Q3 Q4
Microsoft 20,3 30,5 23,5 40,3
Google 50,2 40.63 45.23 39,3
Apple 25,4 30,2 33,3 36,7
IBM 20,4 15,6 22,3 29,3
style CSS
.table_blur {
  background: # f5ffff;
  border-collapse: collapse;
  text-align: left;
}
.table_blur p {
  border-top: 1px solid # 777777;	
  border-bottom: 1px solid # 777777; 
  skrzynkowej cień: wstawka 0 1 piksel 0 # 999999, wstawka 0 -1px 0 # 999999;
  Tło: liniowym gradientem (# 9595b6, # 5a567f);
  kolor biały;
  Wypełnienie: 10px 15 pikseli;
  Pozycja: względna;
}
.table_blur th Po {
  zawartość: "";
  Blok wyświetlacza;
  Pozycja: bezwzględne;
  left: 0;
  top: 25%;
  Wysokość: 25%;
  Szerokość: 100%;
  Tło: liniowym gradientem (rgba (255, 255, 255, 0), rgba (255,255,255, 0,08));
}
.table_blur tr: nth-child (nieparzyste) {
  background: # ebf3f9;
}
.table_blur th: first-child {
  border-left: 1px solid # 777777;	
  border-bottom: 1px solid # 777777;
  skrzynkowej cień: wstawka 1 piksel 1 piksel 0 # 999999 wstawki 0 -1px 0 # 999999;
}
.table_blur th: last-child {
  border-right: 1px solid # 777777;
  border-bottom: 1px solid # 777777;
  skrzynkowej cień: wstawka -1px 1 piksel 0 # 999999 wstawki 0 -1px 0 # 999999;
}
.table_blur td {
  border: 1px solid # e3eef7;
  Wypełnienie: 10px 15 pikseli;
  Pozycja: względna;
  Przejście: wszystkie 0,5s łatwość;
}
.table_blur tbody: aktywowania td {
  Kolor: przezroczysty;
  text-shadow: 0 0 3px # a09f9d;
}
.table_blur tbody: aktywowania tr: aktywowania td {
  color: # 444444;
  tekstu cień: brak;
}

11. Tabela Cena

table_pricing

znaczników HTML


  
  
  
  
  
Plany i cennik
Plan Cena
podstawowe 10 $ Wybierz
Profesjonalne 20 $ Wybierz
Premium 30 $ Wybierz
Platinum 60 $ Wybierz
style CSS
.table_price {
  border-collapse: collapse;
  border-left: 3px solid # F79361;
  border-right: 3px solid # F79361;
  border-bottom: 3px solid # F79361;
  font-family: 'Lucida Grande', bezszeryfową;
 }
.table_price Tytuł {
  background: # F79361; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  skrzynkowej cień 0 2 piksele 4 piksele 0 rgba (0,0,0, 0,3);
  kolor biały;
  font-family: "Roboto Slab", serif;
  font-style: normal;
  czcionki, rozmiar: 26px;
  text-align: center;
  margin: 0;
}
.table_price td, .table_price p {
  padding: 10px;
}
.table_price p {
  text-align: left;
  czcionki, rozmiar: 18px;
}
.table_price tr: n-ty-dziecka (2n) {
  background: # E5E5E5;
}
.table_price td: last-of-type {
  text-align: center;
}
.table_price a {
  Wyświetlacz: inline bloku;
  Wypełnienie: 5PX 10px;
  background: # F79361;
  skrzynkowej cień: 2 piksele 2 piksele 0 0 # a22800;
  Pozycja: względna;
}
.table_price się: umieszczenie {
  skrzynkowej cień: brak;
  top: 2px;
  left: 2px;
}

12. Tabela z ciemnym tłem i podkreślony tekst po najechaniu

table_dark

znaczników HTML

  
    

Firma

Q1 Q2 Q3 Q4
Microsoft 20,3 30,5 23,5 40,3
Google 50,2 40.63 45.23 39,3
Apple 25,4 30,2 33,3 36,7
IBM 20,4 15,6 22,3 29,3
style CSS
.table_dark {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', bezszeryfową;
  czcionki, rozmiar: 14px;
  Szerokość: 640;
  text-align: left;
  border-collapse: collapse;
  background: # 252F48;
  margin: 10px;
}
.table_dark p {
  color: # EDB749;
  border-bottom: 1px solid # 37B5A5;
  Wypełnienie: 12 pikseli 17px;
}
.table_dark td {
  color: # CAD4D6;
  border-bottom: 1px solid # 37B5A5;
  border-right: 1px solid # 37B5A5;
  Wypełnienie: 7px 17px;
}
.table_dark tr: last-child {td
  border-bottom: none;
}
.table_dark td: last-child {
  border-right: none;
}
.table_dark tr: aktywowania td {
  text-decoration: podkreślenia;
}

Podziel się:

Tabela HTML gotowy

tabela html (gotowy schemat)

wiadomość autor  Dana Domirani do 11 czerwca 2010 01:18

Schemat gotowe tabele html.

instalacja

Każda tablica składa się z dwóch części:
1) kod HTML , które mogą być umieszczone w powitania na stronie głównej: PA> Wygląd> Strona główna - Informacje ogólne> Witam na stronie głównej (z alternatywną opcją w widgecie lub HTML strony).
Po tym wypełni tekst, obrazy, komórek itp, a następnie -. Zapisz zmiany

Czytaj więcej:   JAK OPERA wyszukiwarce Komputer

2) kod CSS , który musi zostać skopiowany do Pa> Wygląd> Kolory> stylów CSS Kaskadowe

Kod:
table.tbglav {
border-collapse: collapse;
}
table.tbglav td {
border: 1px solid #000;
background-color: #fff;
padding: 3px;
}

Domyślnie tabela jest przypisana białe tło i czarny kontur.

Ustawienia CSS tabela:
Aby wypełnić tło komórek nie jest kolor, ale obraz, zmienić ciąg w kodzie źródłowym

Kod:
background-color: #fff;

na

Kod:
background: #fff url(http://i63.servimg.com/u/f63/12/33/62/17/df514.png) top left repeat;

https://i.servimg.com/u/f63/12/33/62/17/df514.png link, aby zastąpić link tło obrazu

Aby zmienić kolor obrysu , linia

Kod:
border: 1px solid #000;

Wymień # 000 na odpowiednim kodem kolorów.

Aby ukryć kontur , linię

Kod:
border: 1px solid #000;

zastąpić

Kod:
border: 1px solid transparent;

kody tabele

Kolumna tabeli 3


wariant I
komórka 1
komórka 2 komórka 3
komórka 4 komórka 5

HTML

Kod:









Ячейка 1
Ячейка 2Ячейка 3
Ячейка 4Ячейка 5


wariant II
komórka 1
komórka 2 komórka 3 komórka 4
komórka 5
Kod:









Ячейка 1
Ячейка 2Ячейка 3Ячейка 4
Ячейка 5


wariant III
komórka 1 komórka 2 komórka 3
komórka 4 komórka 5
komórka 6
Kod:










Ячейка 1Ячейка 2Ячейка 3
Ячейка 4Ячейка 5
Ячейка 6


opcja IV
komórka 1
komórka 2 komórka 3 komórka 4
komórka 5
komórka 6 Ramka 7 Box 8
Kod:













Ячейка 1
Ячейка 2Ячейка 3Ячейка 4
Ячейка 5
Ячейка 6Ячейка 7Ячейка 8

komórka 1
komórka 2 komórka 3 komórka 4
komórka 5 komórka 6 Ramka 7
Box 8 Box 9 komórka 10

Kod:



















Ячейка 1
Ячейка 2Ячейка 3Ячейка 4
Ячейка 5Ячейка 6Ячейка 7
Ячейка 5Ячейка 6Ячейка 7
Ячейка 8Ячейка 9Ячейка 10


wersja V
komórka 1 komórka 2
komórka 3 komórka 4 komórka 5
komórka 6 Ramka 7
Kod:











Ячейка 1Ячейка 2
Ячейка 3Ячейка 4Ячейка 5
Ячейка 6Ячейка 7

Kolumna tabeli 4


wariant I
komórka 1 komórka 2
komórka 3 komórka 4 komórka 5
komórka 6 Ramka 7 Box 8
Kod:












Ячейка 1Ячейка 2
Ячейка 3Ячейка 4Ячейка 5
Ячейка 6Ячейка 7Ячейка 8


wariant II
komórka 1
komórka 2 komórka 3 komórka 4
komórka 5 komórka 6 Ramka 7 Box 8
Kod:















Ячейка 1
Ячейка 2Ячейка 3Ячейка 4
Ячейка 5Ячейка 6Ячейка 7Ячейка 8


wariant III
komórka 1 komórka 2 komórka 3
komórka 4
komórka 5 komórka 6
Kod:










Ячейка 1Ячейка 2Ячейка 3
Ячейка 4
Ячейка 5Ячейка 6


opcja IV
komórka 1 komórka 2 komórka 3 komórka 4
komórka 5
komórka 6

Kod:










Ячейка 1Ячейка 2Ячейка 3Ячейка 4
Ячейка 5
Ячейка 6


wersja V
komórka 1 komórka 2 komórka 3 komórka 4
komórka 5 komórka 6
Ramka 7
Kod:











Ячейка 1Ячейка 2Ячейка 3Ячейка 4
Ячейка 5Ячейка 6
Ячейка 7

Gdzie jest CSS ?
PA> Wygląd> Kolory> style kaskadowe CSS

Gdzie szukać podstawowych szablonów ?
PA> Wygląd> Szablony> Ustawienia ogólne

Gdzie jest punkt do podłączenia skryptów
PA> Moduły> Zarządzaj kodu JavaScript

Ciekawe rozwiązania do forów | przez PA Navigator | Ustawienia Poradniki ogólne

Wybierz swój język

polskiangielski niemiecki hiszpański francuski włoski portugalski turecki arabski ukraiński szwedzki węgierski bułgarski estoński Chiński (uproszczony) wietnamski rumuński tajski słoweński słowacki serbski malajski norweski łotewski litewski koreański japoński indonezyjski hinduski hebrajski fiński grecki holenderski Czech duński chorwacki Chiński (tradycyjny) Filipińska urdu Azeybardzhansky ormiański Białoruski bengalski gruziński kazachski Kataloński mongolski rosyjski Tadzhitsky Tamil'skij telugu Uzbetsky


Dodaj komentarz

Twój e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *