Ostatnio edytowany:

td

Autor: Virtual Patriot

Przeznaczenie elementu td

Element td reprezentuje jedną komórkę tabeli HTML.

Dodatkowe techniczne informacje o elemencie td

kategoria ogólna
kontekst zewnętrzny
  • jako element dziecko elementu tr

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <thead>
        <tr>
          <th>przedmiot</th>
          <th>ilość</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <th>szafa</th>
          <td>10</td>
        </tr>
    
        <tr>
          <th>stół</th>
          <td>5</td>
        </tr>
      </tbody>
    
      <tfoot>
        <tr>
          <th>suma</th>
          <td>15</td>
        </tr>
      </tfoot>
    </table>

    Kontekstem zewnętrznym przykładowych elementów "td" są elementy "tr", dla których wspomniane elementy "td" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "tr", element "tr" oraz element "tr", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "td".

kontekst wewnętrzny
  • zawartość opływająca

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <thead>
        <tr>
          <th>przedmiot</th>
          <th>ilość</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <th>szafa</th>
          <td><b>10</b></td>
        </tr>
    
        <tr>
          <th>stół</th>
          <td><b>5</b></td>
        </tr>
      </tbody>
    
      <tfoot>
        <tr>
          <th>suma</th>
          <td><b>15</b></td>
        </tr>
      </tfoot>
    </table>

    Kontekstem wewnętrznym przykładowych elementów "td" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "b", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "td".

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <td> ... </td>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • tag może zostać pominięty, lecz tylko jeżeli bezpośrednio po danym elemencie td występuje element td lub element th lub jeżeli bezpośrednio po danym elemencie td nie występuje żadna inna zawartość, która z założenia miałaby należeć do zawartości elementu rodzica danego elementu td
CSS display
  • table-cell

Dodatkowe domyślne reguły CSS elementu td

td {
  display:table-cell;
  vertical-align:inherit;
  padding:1px;
}

table[border] td {
  border-width:1px;
  border-style:inset;
}

Interpretacja elementu td

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Safari

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Opera

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Internet Explorer

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Edge

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Opis atrybutów elementu td

colspan

Przeznaczenie atrybutu colspan

Atrybut colspan wykorzystany wraz z elementem td określa liczbę kolumn danej tabeli HTML, których komórki mają ulec poziomemu scaleniu względem danego elementu td.

Wartość domyślna

1 (w każdej sytuacji)

Wartości atrybutu colspan

liczba

Należy podać liczbę całkowitą większą od zera.

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Środki Transportu</caption>

      <thead>
        <tr>
          <th>na lądzie</th>
          <th>na wodzie</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>samochód</td>
          <td>prom</td>
        </tr>

        <tr>
          <td colspan="2">poduszkowiec</td>
        </tr>

        <tr>
          <td>rower</td>
          <td>łódka</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
na lądzie na wodzie
samochód prom
poduszkowiec
rower łódka

Przykładowy element "td" został scalony względem komórek dwóch kolumn tabeli HTML, ponieważ do wspomnianego elementu "td" został dodany atrybut "colspan" wraz z wartością "2".

headers

Przeznaczenie atrybutu headers

Atrybut headers wykorzystany wraz z elementem td określa, z którym elementem th powinien zostać powiązany dany element td.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu headers

th id

Należy podać wartość atrybutu id interesującego nas elementu th.

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Środki Transportu</caption>

      <thead>
        <tr>
          <th id="lad">na lądzie</th>
          <th id="woda">na wodzie</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>samochód</td>
          <td>prom</td>
        </tr>

        <tr>
          <td colspan="2" headers="lad woda">poduszkowiec</td>
        </tr>

        <tr>
          <td>rower</td>
          <td>łódka</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
na lądzie na wodzie
samochód prom
poduszkowiec
rower łódka

Ponieważ do przykładowego elementu "td" został dodany atrybut "headers" wraz z wartością "lad woda" wspomniany element "td", którego zawartość reprezentuje treść w postaci ciągu znaków "poduszkowiec" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "td" został powiązany z elementem "th" posiadającym atrybut "id" o wartości "lad" oraz z elementem "th" posiadającym atrybut "id" o wartości "woda".

Możemy podać kilka wartości oddzielonych od siebie przynajmniej jednym znakiem spacji.

rowspan

Przeznaczenie atrybutu rowspan

Atrybut rowspan wykorzystany wraz z elementem td określa liczbę wierszy danej tabeli HTML, których komórki mają ulec pionowemu scaleniu względem danego elementu td.

Wartość domyślna

1 (w każdej sytuacji)

Wartości atrybutu rowspan

liczba

Należy podać liczbę całkowitą większą od zera.

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Środki Transportu</caption>

      <thead>
        <tr>
          <th>teren</th>
          <th colspan="3">środek</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>na lądzie</th>
          <td>samochód</td>
          <td rowspan="2">poduszkowiec</td>
          <td>rower</td>
        </tr>

        <tr>
          <th>na wodzie</th>
          <td>prom</td>
          <td>łódka</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
teren środek
na lądzie samochód poduszkowiec rower
na wodzie prom łódka

Przykładowy element "td" został scalony względem komórek dwóch wierszy tabeli HTML, ponieważ do wspomnianego elementu "td" został dodany atrybut "rowspan" wraz z wartością "2".

0

Wartość 0 oznacza, że scaleniu względem danego elementu td mają ulec komórki wszystkich wierszy (znajdujących się pod wspomnianym elementem td oraz należących do tej samej grupy wierszy).

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Środki Transportu</caption>

      <thead>
        <tr>
          <th>teren</th>
          <th colspan="3">środek</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>na lądzie</th>
          <td>samochód</td>
          <td rowspan="0">poduszkowiec</td>
          <td>rower</td>
        </tr>

        <tr>
          <th>na wodzie</th>
          <td>prom</td>
          <td>łódka</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
teren środek
na lądzie samochód poduszkowiec rower
na wodzie prom łódka

Przykładowy element "td" został scalony względem komórek wszystkich wierszy tabeli HTML znajdujących się w tym samym elemencie "tbody", co wspomniany element "td" oraz znajdujących się pod wspomnianym elementem "td", ponieważ do wspomnianego elementu "td" został dodany atrybut "rowspan" wraz z wartością "0".