Autor publikacji: Virtual Patriot - Administrator

table-layout

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - table-layout property (CSS2 - LV2.2)

Przeznaczenie właściwości `table-layout`

Za pomocą właściwości table-layout możemy określić sposób ustalania przez przeglądarkę internetową rozmiaru szerokości poszczególnych komórek (elementów td, elementów th) interesującej nas tabeli HTML.

Informacje dodatkowe: każda szerokość związana z właściwością table-layout tyczy się szerokości logicznej

Informacje techniczne o właściwości `table-layout`

przeznaczenie

element HTML typu table, którego rozmiarem szerokości obszaru zawartości nie jest rozmiar automatyczny
element HTML typu inline-table, którego rozmiarem szerokości obszaru zawartości nie jest rozmiar automatyczny

dowolna

nie

brak

tak (animacja schodkowa)

Interpretacja właściwości `table-layout`

: tak
: tak
: tak
: tak
: tak
: tak

Opis wartości właściwości `table-layout`

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości table-layout.

Domyślnie przeglądarka internetowa nie stara się ustalić jednakowego rozmiaru szerokości dla wszystkich komórek tabeli HTML.

Przykład

  table-layout:auto;

Przykładowa Tabela HTML
komórka - 1	komórka - 2	komórka - 3
komórka - 4	przykładowa komórka - 5	komórka - 6
komórka - 7	komórka - 8	komórka - 9

Elementy "td" oraz elementy "th" przykładowego elementu "table" nie posiadają jednakowego rozmiaru szerokości ustalonego przez przeglądarkę internetową.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        width:90%;
        border:3px solid black;
        background-color:#7DCDE8;
      }

      table > caption {
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr>
          <th>komórka - 4</th>
          <td>przykładowa komórka - 5</td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th>komórka - 7</th>
          <td>komórka - 8</td>
          <td>komórka - 9</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

fixed

Wyjaśnienie

Za pomocą wartości fixed właściwości table-layout możemy sprawić, że przeglądarka internetowa postara się ustalić jednakowy rozmiar szerokości dla wszystkich komórek interesującej nas tabeli HTML.

Przykład

  table-layout:fixed;

Przykładowa Tabela HTML
komórka - 1	komórka - 2	komórka - 3
komórka - 4	przykładowa komórka - 5	komórka - 6
komórka - 7	komórka - 8	komórka - 9

Elementy "td" oraz elementy "th" przykładowego elementu "table" posiadają jednakowy rozmiar szerokości ustalony przez przeglądarkę internetową, ponieważ do wspomnianego elementu "table" została dodana właściwość "table-layout" wraz z wartością "fixed".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        table-layout:fixed;
        width:90%;
        border:3px solid black;
        background-color:#7DCDE8;
      }

      table > caption {
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr>
          <th>komórka - 4</th>
          <td>przykładowa komórka - 5</td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th>komórka - 7</th>
          <td>komórka - 8</td>
          <td>komórka - 9</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>