Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Tworzenie tabel z CSS

Jeżeli nie pamiętasz jak tworzy się tabele w HTML, to powtórz sobie potrzebne wiadomości. W kolejnych ćwiczeniach, będziemy posługiwali się takim samym dokumentem HTML, będziemy zmieniać tylko zewnętrzny arkusz stylów.

<!doctype html>
<html>
  <head>
    <title>Tabele z CSS</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <table>
      <tr>
        <th>Nagłówek 1</th> 
        <th>Nagłówek 2, w tej komórce jest dłuższy tekst</th> 
        <th>Nagłówek 4</th>
      </tr>
      <tr>
        <td>kol 0 wiersz 1</td> 
        <td>kol 1 wiersz 1</td> 
        <td>kol 2 wiersz 1</td>
      </tr>
      <tr>
        <td>kol 0 wiersz 2</td> 
        <td>kol 1 wiersz 2</td> 
        <td>kol 2 wiersz 2</td>
      </tr>
      <tr>
        <td>kol 0 wiersz 3</td> 
        <td></td> 
        <td>kol 2 wiersz 3</td>
      </tr>
    </table>
  </body>
</html>

Wygląd tabeli

Zdefiniować czcionkę tabeli, obramowanie komórek tabeli oraz tło i kolor czcionki komórek nagłówka - ćwiczenie 3_2_14_1

Arkusz stylów:

table
{
  font-family:Arial,sans-sherif;
  font-size:16px;
}
td, th
{
  border:1px solid black;
}
th
{
  background-color:green;
  color:white;
}

Jedna z komórek celowo jest pusta.

Określenie czy jest odstęp między komórkami, czy też go nie ma border-collapse

Domyślnie, komórki tabeli nie przylegają do siebie - właściwość border-collapse jest ustawiona na separate. Taką sytuację mieliśmy w poprzednim ćwiczeniu. Wartość collapse powoduje przyleganie komórek do siebie.

Usuwanie odstępu między komórkami - ćwiczenie 3_2_14_2

Dokument HTML nie ulega zmianie, natomiast w zewnętrznym akusz stylów uzupełnimy selektor table:

table
{
  font-family:Arial,sans-sherif;
  font-size:16px;
  border-collapse:collapse;
}

Dodatkowo wprowadźmy w komórkach marginesy wewnętrzne, aby napisy uddaliły się nieco od krawędzi komórek:

td, th
{
  border:1px solid black;
  padding:4px;
}

Określanie wielkości odstępu między komórkami border-spacing

Określić poziome odstępy między komórkami na 20px, natomiast pionowe na 10px - ćwiczenie 3_2_14_3

Wartość podajemy wraz jednostką długości, Możemy podać jedną wartość dla wszystkich odstępów, lub dwie wartosci oddzielone spacją określających kolejno odstępy poziome i pionowe. Właściwości border-collapse nie piszemy, ma ona wtedy wartość domyślną separate, pozwalajacą na odstęp między komórkami. W zewnętrznym akusz stylów, selektor table, powinien mieć postać:

table
{
  font-family:Arial,sans-sherif;
  font-size:16px;
  border-spacing:20px 10px;
}

W jaki sposób przeglądarka określi szerokość wszystkich komórek table-layout

Domyślną wartością jest auto - dopasowanie szerokości do tekstu znajdującego się w komórkach. Taką sytuację mamy w poprzednich ćwiczeniach - środkowa kolumna jest szersza od pozostałych. Wartość fixed spowoduje określenie jednakowej szerokości wszystkich komórek, przy czym musimy określić szerokość tabeli width.

Określić jednakowe szerokości komórek przy szerokości tabeli 100%- ćwiczenie 3_2_14_4

Selektor table, powinien mieć postać:

table
{
  font-family:Arial,sans-sherif;
  font-size:16px;
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
}

Pokazywanie lub ukrywanie pustych komórkek empty-cells

Wartością domyślną jest show - pokazanie pustych komórek. W poprzednich ćwiczeniach nie definiowaliśmy właściwości empty-cells, dlatego środkowa komórka ostatniego wiersza, mimo że jest pusta, była pokazywana.

Właściwość empty-cells możemy dodać do elementu table lub do jego elementów th oraz td.

Ukryć puste komórki tabeli - ćwiczenie 3_2_14_5

Selektor table, powinien mieć postać:

table
{
  font-family:Arial,sans-sherif;
  font-size:16px;
  empty-cells:hide;
}

Narzucenie szerokości tabeli, szerokości wierszy i wysokości kolumn

Tworząc tabele, nie musimy zdawać się na automatyczne ustawianie wymiarów. Możemy określić szerokość całej tabeli, szerokości poszczególnych kolumn oraz wysokości wszystkich lub poszczególnych wierszy.

Zdefiniować szrokości kolumn kolumn kolejno 100px, 400px, 200px oraz wyskokości wierszy 40px, 60px, 80px i 50px - ćwiczenie 3_2_14_6

Selektor table, powinien mieć postać:

table
{
  font-family:Arial,sans-sherif;
  font-size:16px;
  border-collapse:collapse;
}

Wymiary określimy w stylach lokalnych, kod HTML naszej tabeli:

<table>
  <tr style="height:40px;">
    <th style="width:100px;">Nagłówek 1</th> 
    <th style="width:400px;">Nagłówek 2</th> 
    <th style="width:200px;">Nagłówek 3</th>
  </tr>
  <tr style="height:60px;">
    <td>kol 0 wiersz 1</td> 
    <td>kol 1 wiersz 1</td> 
    <td>kol 2 wiersz 1</td>
  </tr>
  <tr style="height:80px;">
    <td>kol 0 wiersz 2</td> 
    <td>kol 1 wiersz 2</td> 
    <td>kol 2 wiersz 2</td>
  </tr>
  <tr style="height:50px;">
    <td>kol 0 wiersz 3</td> 
    <td></td> 
    <td>kol 2 wiersz 3</td>
  </tr>
</table>

Zwróć uwagę, że wystarczy określić szerokość kolumn w pierwszym wierszu.

Wyrównanie tekstu w komórkach tabeli

W celu poziomego wyrównania tekstu stosujemy poznaną już właściwość text-align z wartościami left, center, right, justify.

W celu pionowego wyrównania tekstu stosujemy poznaną już właściwość vertical-align z wartościami top, middle, bottom.

Zmień dokument HTML z poprzedniego ćwiczenia tak, aby zaprezentować różne wyrównanie tekstu w komórkach tabeli - ćwiczenie 3_2_14_7

<table>
  <tr style="height:40px;">
    <th style="width:100px;">Nagłówek 1</th> 
    <th style="width:400px;">Nagłówek 2</th> 
    <th style="width:200px;">Nagłówek 3</th>
  </tr>
  <tr style="height:60px;">
    <td>kol 0 wiersz 1</td> 
    <td style="text-align:left; vertical-align:top;">w poziomie <i>left</i>, 
    w pionie <i>top</i></td> 
    <td>kol 2 wiersz 1</td>
  </tr>
  <tr style="height:80px;">
    <td>kol 0 wiersz 2</td> 
    <td style="text-align:center; vertical-align:middle;">w poziomie <i>center</i>, 
    w pionie <i>middle</i></td> 
    <td>kol 2 wiersz 2</td>
  </tr>
  <tr style="height:50px;">
    <td>kol 0 wiersz 3</td> 
    <td style="text-align:right; vertical-align:bottom;">w poziomie <i>right</i>, 
    w pionie <i>bottom</i></td> 
    <td>kol 2 wiersz 3</td>
  </tr>
</table>

Jak widzimy, domyślnym wyrównaniem w poziomie jest left, natomiast w pionie middle.