Ostatnio edytowany:

colspan

Autor: Virtual Patriot

Przeznaczenie atrybutu colspan

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

Elementy HTML dla atrybutu colspan

  1. td
  2. th

Przykład atrybutu colspan

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

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

      <tbody>
        <tr>
          <th>zakres</th>
          <th colspan="3">owoce</th>
        </tr>

        <tr>
          <th>A - I</th>
          <td>ananas</td>
          <td>banan</td>
          <td>cytryna</td>
        </tr>

        <tr>
          <th>J - R</th>
          <td>jabłko</td>
          <td>kokos</td>
          <td>malina</td>
        </tr>

        <tr>
          <th>S - Z</th>
          <td>truskawka</td>
          <td>winogrono</td>
          <td>wiśnia</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <th>zakres</th>
          <th colspan="3">warzywa</th>
        </tr>

        <tr>
          <th>A - I</th>
          <td>bakłażan</td>
          <td>cebula</td>
          <td>fasola</td>
        </tr>

        <tr>
          <th>J - R</th>
          <td>kalafior</td>
          <td>marchew</td>
          <td>ogórek</td>
        </tr>

        <tr>
          <th>S - Z</th>
          <td>rzodkiew</td>
          <td>sałata</td>
          <td>szpinak</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

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

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

Interpretacja atrybutu colspan

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak