Ostatnio edytowany:

rowspan

Autor: Virtual Patriot

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

Nie interpretuje wartości 0.

Safari

tak

Nie interpretuje wartości 0.

Opera

tak

Nie interpretuje wartości 0.

Internet Explorer

tak

Nie interpretuje wartości 0.

Edge

tak

Nie interpretuje wartości 0.