Inne działy

 

 

CSS - tabele

 

Ten poradnik nauczy Cię, jak ustawić różne właściwości dla tabeli HTML za pomocą stylu CSS. Można ustawić następujące właściwości tabeli:

  • border-collapse  określa czy przeglądarka powinna kontrolować wygląd granic sąsiadujących, które dotykają się wzajemnie lub czy każda komórka powinna utrzymać swój styl
  • border-spacing  określa szerokość, która powinna pojawić się między komórkami tabeli.
  • caption-side  podpisy są przedstawiane w elemencie <caption>. Domyślnie są renderowane powyżej tabeli w dokumencie. Właściwość caption-side umożliwia kontrolę położenia nagłówka tabeli.
  • empty-cells  określa, czy obramowania powinny być wyświetlane, jeśli komórka jest pusta.
  • table-layout  pozwala przeglądarkom przyspieszyć wczytywanie układu tabeli przy użyciu właściwości szerokości pierwszej kolumny, którą napotka przed resztę kolumn, zamiast konieczności ładowania całej tabeli przed renderingiem.

Teraz zobaczymy jak zastosować te właściwości za pomocą przykładów.

Właściwość border-collapse:

Ta właściwość może mieć dwie wartości, collapse i separate. Poniżej znajduje się przykład, który pokazuje zastosowanie obydwu wartości: 

<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
      border-style:dotted; 
      border-width:3px; 
      border-color:#000000; 
      padding: 10px;
}
td.b {border-style:solid; 
      border-width:3px; 
      border-color:#333333; 
      padding:10px;
}
</style>
<table class="one">
<caption>Wspólne obramowanie przykład</caption>
<tr><td class="a"> Komórka A wspólne obramowanie</td></tr>
<tr><td class="b"> Komórka B wspólne obramowanie</td></tr>
</table>
<br />
<table class="two">
<caption> Osobne obramowanie przykład </caption>
<tr><td class="a"> Komórka A odzielona przykład</td></tr>
<tr><td class="b"> Komórka B odzielona przykład</td></tr>
</table>

 

Właściwość border-spacing

Własność border-spacing określa odległość, która oddziela sąsiednie komórki. granice. Może ona przybrać jedną lub dwie wartości; powinny to być jednostki długości.

Jeśli podasz jedną wartość, to dotyczy ona zarówno pionowej i poziomej krawędzi, lub można określić dwie wartości, w którym to przypadku pierwsza odnosi się do odstępów w poziomie, a druga do pionowych odstępów:

Uwaga: Niestety, Właściwość ta nie działa w IE 6 lub Netscape 7.

 

<style type="text/css">
/* Jeśli podasz jedną wartość */
table.example {border-spacing:10px;}
/* To, jak można podać dwie wartości */
table.example {border-spacing:10px; 15px;}
</style>

 Teraz zmodyfikujmy poprzedni przykład i zobaczmy efekt:

<style type="text/css">
table.one {
   border-collapse:separate;
   width:400px;
   border-spacing:10px;
}
table.two {
   border-collapse:separate;
   width:400px;
   border-spacing:10px 50px;
}
</style>
<table class="one" border="1">
<caption> Przykład oddzielne granice z border-spacing</caption>
<tr><td> Komórka A wspólne obramowanie </td></tr>
<tr><td> Komórka B wspólne obramowanie </td></tr>
</table>
<br />
<table class="two" border="1">
<caption> Przykład oddzielne granice z border-spacing</caption>
<tr><td> Komórka A odzielona przykład </td></tr>
<tr><td> Komórka B odzielona przykład </td></tr>
</table>

 

Właściwość caption-side

Właściwość caption-side pozwala na określenie, gdzie zawartość elementu <caption> powinna być umieszczona w relacji do tabeli. W tabeli poniżej przedstawiono możliwe wartości.

Ta właściwość może mieć jedną z czterech wartości top, bottom, left or right. Zobaczmy zastosowanie wszystkich wartości na przykładach pokazanych poniżej:

Uwaga: Właściwości te mogą nie działać z przeglądarką IE.

 

<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>

<table style="width:400px; border:1px solid black;">
<caption class="top">
Ten podpis pojawi się na górze 
</caption>
<tr><td > Komórka A</td></tr>
<tr><td > komórka B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">
<caption class="bottom">
Ten podpis pojawi się na dole 
</caption>
<tr><td > Komórka A</td></tr>
<tr><td > Komórka B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">
<caption class="left">
Ten podpis pojawi się po lewej stronie 
</caption>
<tr><td > Komórka A</td></tr>
<tr><td > Komórka B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">
<caption class="right">
Ten podpis pojawi się po prawej stronie 
</caption>
<tr><td > Komórka A</td></tr>
<tr><td > Komórka B</td></tr>
</table>

 

Właściwość empty-cells

Właściwość empty-cells wskazuje, czy komórki bez jakichkolwiek treści powinny mieć wyświetlane obramowanie.

Ta właściwość może mieć jedną z trzech wartości show (pokaż), hide (ukryj) lub inherit (dziedzicz).

Właściwość empty-cells, może ukryć granice pustych komórek w Tagu <table>.

<style type="text/css">
table.empty{
    width:350px;
    border-collapse:separate;
    empty-cells:hide;
}
td.empty{
    padding:5px;
    border-style:solid;
    border-width:1px;
    border-color:#999999;
}
</style>
<table class="empty">
<tr>
<th></th>
<th>Tytuł pierwszy</th>
<th>Tytuł drugi</th>
</tr>
<tr>
<th> Tytuł wiersza </th>
<td class="empty">wartość</td>
<td class="empty">wartość</td>
</tr>
<tr>
<th> Tytuł wiersza </th>
<td class="empty">wartość</td>
<td class="empty"></td>
</tr>
</table>

 

Właściwość table-layout:

Właściwość table-layout (układ tabeli) ma pomóc kontrolować jak przeglądarka powinna wyświetlić układ tabeli.

Ta właściwość może mieć jedną z trzech wartości fixe (stała), auto (auto) lub inherit (dziedzicz).

Oto przykład, aby pokazać różnicę pomiędzy tymi właściwościami.

Uwaga: Ta właściwość nie jest obsługiwana przez wiele przeglądarek, więc nie należy polegać na niej.

<style type="text/css">
table.auto
{
table-layout: auto
}
table.fixed
{
table-layout: fixed
}
</style>
<table class="auto" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.