Autor publikacji
Virtual Patriot - Administrator

rowspan

Data publikacji
Ostatnio edytowano

Przeznaczenie atrybutu rowspan

Za pomocą atrybutu rowspan możemy określić liczbę wierszy tabeli HTML, których komórki mają ulec pionowemu scaleniu względem interesującego nas elementu HTML wspomnianej tabeli HTML.

Elementy HTML dla atrybutu rowspan

  1. td
  2. th

Przykład atrybutu rowspan

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

    <table border>
      <caption>Rośliny Świata</caption>

      <thead>
        <tr>
          <th>grupy</th>
          <th>A - I</th>
          <th>J - R</th>
          <th>S - Z</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th rowspan="3">owoce</th>
          <td>ananas</td>
          <td>jabłko</td>
          <td>truskawka</td>
        </tr>

        <tr>
          <td>banan</td>
          <td>kokos</td>
          <td>winogrono</td>
        </tr>

        <tr>
          <td>cytryna</td>
          <td>malina</td>
          <td>wiśnia</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <th rowspan="3">warzywa</th>
          <td>bakłażan</td>
          <td>kalafior</td>
          <td>rzodkiew</td>
        </tr>

        <tr>
          <td>cebula</td>
          <td>marchew</td>
          <td>sałata</td>
        </tr>

        <tr>
          <td>fasola</td>
          <td>ogórek</td>
          <td>szpinak</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Rośliny Świata
grupy A - I J - R S - Z
owoce ananas jabłko truskawka
banan kokos winogrono
cytryna malina wiśnia
warzywa bakłażan kalafior rzodkiew
cebula marchew sałata
fasola ogórek szpinak

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

Interpretacja atrybutu rowspan

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje wartości 0.

Edge

tak