Autor publikacji
Virtual Patriot - Administrator

td

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu td

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

Dodatkowe artykuły związane z elementem td

Informacje techniczne o elemencie td

kategoria ogólna

korzeń sekcji

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

zdolność fallback

nie dotyczy

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 wtedy gdy bezpośrednio po danym elemencie td występuje inny element td lub element th lub gdy bezpośrednio po danym elemencie td nie występuje żadna inna zawartość, która z naszego założenia miałaby należeć do kontekstu wewnętrznego elementu rodzica danego elementu td

CSS display

table-cell

Przypuszczalnie domyślne reguły CSS elementu td

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

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

Interpretacja elementu td

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Edge

tak

Opis atrybutów elementu td

Atrybut Lokalny

colspan

Przeznaczenie atrybutu colspan

Atrybut colspan wykorzystany wraz z elementem td pozwala nam określić liczbę kolumn tabeli HTML, których komórki powinny ulec poziomemu scaleniu licząc od 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>
          <th>w powietrzu</th>
        </tr>
      </thead>

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

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

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

  </body>
</html>

Rezultat

Środki Transportu
na lądzie na wodzie w powietrzu
samochód prom samolot
poduszkowiec helikopter
rower łódka balon

Komórki dwóch kolumn tabeli HTML uległy poziomemu scaleniu licząc w prawo od przykładowego elementu "td", którego zawartość reprezentuje treść w postaci ciągu znaków "poduszkowiec", ponieważ do wspomnianego elementu "td" został dodany atrybut "colspan" wraz z wartością "2".

Atrybut Lokalny

headers

Przeznaczenie atrybutu headers

Atrybut headers wykorzystany wraz z elementem td pozwala nam określić informację o tym, z którym elementem th powinien zostać powiązany dany element td.

Zarówno element "td", jak i powiązany z nim element th muszą należeć do tej samej tabeli HTML.

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>teren</th>
          <th colspan="3">środek</th>
          <th id="suma">suma</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>na lądzie</th>
          <td>samochód</td>
          <td>hulajnoga</td>
          <td>rower</td>
          <td rowspan="0" headers="suma">9</td>
        </tr>

        <tr>
          <th>na wodzie</th>
          <td>prom</td>
          <td>motorówka</td>
          <td>łódka</td>
        </tr>

        <tr>
          <th>w powietrzu</th>
          <td>samolot</td>
          <td>helikopter</td>
          <td>balon</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
teren środek suma
na lądzie samochód hulajnoga rower 9
na wodzie prom motorówka łódka
w powietrzu samolot helikopter balon

Ponieważ do przykładowego elementu "td" został dodany atrybut "headers" wraz z wartością "suma", przykładowy element "td", którego zawartość reprezentuje treść w postaci ciągu znaków "9", 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 "suma".

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym znakiem spacji, dzięki czemu dany element td będzie mógł zostać powiązany z kilkoma docelowymi elementami th jednocześnie.

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>
          <th id="powietrze">w powietrzu</th>
        </tr>
      </thead>

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

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

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

  </body>
</html>

Rezultat

Środki Transportu
na lądzie na wodzie w powietrzu
samochód prom samolot
poduszkowiec helikopter
rower łódka balon

Ponieważ do przykładowego elementu "td" został dodany atrybut "headers" wraz z następującą kombinacją wartości: "lad woda", przykładowy 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".

Atrybut Lokalny

rowspan

Przeznaczenie atrybutu rowspan

Atrybut rowspan wykorzystany wraz z elementem td pozwala nam określić liczbę wierszy tabeli HTML, których komórki powinny ulec pionowemu scaleniu licząc od danego elementu td.

Komórki wierszy tabeli HTML, które nie należą do tej samej części tabeli HTML (elementu thead, elementu tbody lub elementu tfoot) nie mogą scalać się ze sobą.

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>

        <tr>
          <th>w powietrzu</th>
          <td>samolot</td>
          <td>helikopter</td>
          <td>balon</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
teren środek
na lądzie samochód poduszkowiec rower
na wodzie prom łódka
w powietrzu samolot helikopter balon

Komórki dwóch wierszy tabeli HTML uległy pionowemu scaleniu licząc w dół od przykładowego elementu "td", którego zawartość reprezentuje treść w postaci ciągu znaków "poduszkowiec", ponieważ do wspomnianego elementu "td" został dodany atrybut "rowspan" wraz z wartością "2".

0

Wartość 0 oznacza, że pionowemu scaleniu licząc w dół od danego elementu td mają ulec komórki wszystkich wierszy tabeli HTML należących do tej samej części tabeli HTML, co dany element td.

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>
          <th>suma</th>
        </tr>
      </thead>

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

        <tr>
          <th>na wodzie</th>
          <td>prom</td>
          <td>motorówka</td>
          <td>łódka</td>
        </tr>

        <tr>
          <th>w powietrzu</th>
          <td>samolot</td>
          <td>helikopter</td>
          <td>balon</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Środki Transportu
teren środek suma
na lądzie samochód hulajnoga rower 9
na wodzie prom motorówka łódka
w powietrzu samolot helikopter balon

Komórki wszystkich wierszy tabeli HTML należących do części BODY tabeli HTML uległy pionowemu scaleniu licząc w dół od przykładowego elementu "td", którego zawartość reprezentuje treść w postaci ciągu znaków "9", ponieważ do wspomnianego elementu "td" został dodany atrybut "rowspan" wraz z wartością "0".