Na stronie używamy cookies. Korzystanie z witryny oznacza zgodę na ich wykorzystywanie. Szczegóły znajdziesz w Polityce Prywatności.

Nie możesz znaleść dodatku który chciałbyś umieścić na swojej stronie lub blogu? Napisz do nas - postaramy się przygotować taki dodatek i poinformujemy Cię o tym na maila:

Dodatki
Liczniki
Pogoda

Jak sformatować tabele wykorzystując style CSS?

Stosowanie niesformatowanych tabel według schematu
<table><tr><td></td></tr></table> i skazywanie się w całości na rozwiązania defaultowe, jest zupełnie nieefektywne i tak naprawdę uniemożliwia nam skuteczne i odpowiednie wizualnie zarządzanie tabelami.

Za pomocą znaczników takich jak width: x; , height: x; padding x; margin x; czy border x; (np. border:1px solid black;) możemy określić prostą strukturę tabeli. Dzięki eksperymentowaniu z wartościami tych cech dopasujemy tabelę do szerokości i wysokości np. diva, w którym ma się znajdować, oraz optymalnie rozmieścimy w niej tekst.

Wydaje się jednak, że operowanie tymi podstawowymi znacznikami CSS nie jest wystarczające, aby stworzyć tabele o odpowiednim layoucie. Aby tworzone tabele wyglądały efektownie i jednocześnie spełniały w sensie merytorycznym swoje funkcje, można odwołać się do znaczników CSS3, tworząc profesjonalnie wyglądające projekty.

Przykład elegancko wyglądającej tabeli
, wykorzystującej rozwiązania CSS3:

  <head>
    <style type="text/css">
      table
      {
        width: 75%;
        /* określa szerokość tabeli na 75%*/
        height:100px;
        /* określa wysokość tabeli na 100px*/
        padding: 10px;
        /* określa margines wewnętrzny na 10 px */
        margin: 15px auto 15px auto;
        /* określa margines zewnętrzny- tabela zostaje wyśrodkowana */
        background-color: white;
        /* określa background tabeli */
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        /* określa zaokrąglenie rogów tabeli za pomocą CSS3*/
        box-shadow: 5px 5px 50px grey;
        -moz-box-shadow: 5px 5px 50px grey;
        -webkit-box-shadow:5px 5px 50px grey;
        /* określa oceniowanie tabeli za pomocą CSS3*/
      }
</style>
</head>
<body>
<table>
<tr>
<td>Tekst</td>
<td>Tekst</td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
<td>Tekst</td>
<td>Tekst</td>
</tr>
</table>
</body>
</html>

Oczywiście w powyższym przykładzie można wprowadzić odpowiednie zmiany modyfikując szerokość i wysokość tabeli, kolor albo obszar ocieniowania. Problemów nie sprawia oczywiście zmienianie ilości wierszy oraz komórek w wierszach i dostosowywanie ich do potrzeb generowanych przez specyfikę prezentowania danych.

CSS daje jednak możliwość określania nie tylko całych tabel, ale również komórek (td) oraz wierszy (tr). Rozwiązaniem, które przyporządkowuje w CSS wybrane cechy i tabelom i komórkom jest:
<style type="text/css">
table, td
{
border:1px solid black;
}
td
{
background-color: grey;
color:white;
}
</style>

Zauważmy, że tło komórek nie wynika z tła całej tabeli (w powyższym przykładzie specjalnie nieokreślonym). Zostało określone jedynie dla elementów <td> za pomocą znacznika css: background-color: grey; .

Pamiętajmy, że formatowanie tabel za pomocą stylów CSS nie różni się w używanych znacznikach CSS od formatowania elementów typu <div>.

Ocena:
2.875
Twoja ocena:
Więcej w tej kategorii

Powiadomienia o nowych dodatkach