Till lokal navigering Gå direkt till innehållet
$left
$middle

Tables and Paging

Since you are using standards based table markup for tabular data display, most of the formating will rendered with the correct look and feel automatically with the common CSS.

The example below includes column headers on line 2–10 wrapped in a thead block and using th for the table cell. Sub-heading rows, in this case the date on line 13 are created using th in the table body. If you have row headings in the left column, use th in the body as well.

<table>
  <thead>
    <tr>
      <th>Tid</th>
      <th>Evenemang</th>
      <th>Ålder</th>
      <th>Kulturform</th>
      <th>Bokas via</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="5">2009-10-21</th>
    </tr>
    <tr>
      <td>09:00</td>
      <td><a href="#">Spela roll!</a></td>
      <td><a href="#">Kultur för Barn och Unga</a></td>
      <td>5-5</td>
      <td>Film &amp; foto, Konst &amp; design</td>
    </tr>
    <tr>
      <td>09:00</td>
      <td><a href="/kp/events/8">Tutti Fruttihuset</a></td>
      <td><a href="#">Kultur för Barn och Unga</a></td>
      <td>1-5</td>
      <td></td>
    </tr>
    <tr>
      <td>08:45</td>
      <td><a href="#">TV-workshops</a></td>
      <td><a href="#">Kultur för Barn och Unga</a></td>
      <td>10-13</td>
      <td>Film &amp; foto</td>
    </tr>
    <tr>
      <th colspan="5">2009-10-22</th>
    </tr>
    <tr>
      <td>08:45</td>
      <td><a href="#">Animationsworkshop</a></td>
      <td><a href="#">Kultur för Barn och Unga</a></td>
      <td>10-12</td>
      <td>Film &amp; foto</td>
    </tr>
    <tr>
      <td>09:00</td>
      <td><a href="#">Spela roll!</a></td>
      <td><a href="#">Kultur för Barn och Unga</a></td>
      <td>5-5</td>
      <td>Film &amp; foto, Konst &amp; design</td>
    </tr>
    <tr>
      <td colspan="5">More rows...</td>
    </tr>

  </tbody>
</table>

<div class="pagination">
<ul>
  <li><span class="disabled">Föregående</span></li>
  <li><span class="current">1</span></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#" class="next_page" rel="next">Nästa</a></li>
</ul>
</div>

This is the rendered result:

Tid Evenemang Ålder Kulturform Bokas via
2009-10-21
09:00 Spela roll! Kultur för Barn och Unga 5-5 Film & foto, Konst & design
09:00 Tutti Fruttihuset Kultur för Barn och Unga 1-5
08:45 TV-workshops Kultur för Barn och Unga 10-13 Film & foto
2009-10-22
08:45 Animationsworkshop Kultur för Barn och Unga 10-12 Film & foto
09:00 Spela roll! Kultur för Barn och Unga 5-5 Film & foto, Konst & design
More rows...

Pagination

The example above contains paging controls at the bottom of the table. Use pagination if you have a large result set from a search. Do not break down the results sets in too small chunks, 50 records per page is easier for the user than 10.

The pagination above shows that we are on the first page and have three pages in total.

The second example shows that we are on page 6 of at total of 9 or more pages (don't display more than three surrounding page links on each side of the current one.

<div class="pagination">
  <ul>
    <li><a href="#" rel="prev" class="prev_page">Föregående</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#" rel="prev">5</a></li>
    <li><span class="current">6</span></li>
    <li><a href="#" rel="next">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#" class="next_page" rel="next">Nästa</a></li>
  </ul>
</div>

Rendered result:

The third example shows that we are on the last page and have three pages in total.

<div class="pagination">
  <ul>
    <li><a href="#" rel="prev">Föregående</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" rel="prev">2</a></li>
    <li><span class="current">3</span></li>
    <li><span class="disabled">Nästa</span></li>
  </ul>
</div>

Rendered result:

Sortable Table Columns

If your table has one or more columns that are sortable, use the additions below to the markup in the thead part of the table.

Note that the class name for the th element on line 4 expresses the current sorting while the title attributes in the a elements expresses what the sorting will be after the user clicks on the link.

The class name for ascending sorting is sort-asc and for descending sorting sort-desc.

<thead class="sortable">
  <tr>
    <th><a href="#" title="Sortera stigande">Tid</a></th>
    <th class="sort-asc"><a href="#" title="Sortera fallande">Evenemang</th>
    <th><a href="#" title="Sortera stigande">Ålder</a></th>
    <th>Kulturform</th>
    <th><a href="#" title="Sortera stigande">Bokas via</a></th>
  </tr>
</thead>

Rendered result:

Tid Evenemang Ålder Kulturform Bokas via
09:00 Apelsinerna Kultur för barn & unga 5-5 Film & foto, Konst & design
09:00 Bananerna Kultur för barn & unga 1-5
08:45 Citronerna Kultur för barn & unga 10-13 Film & foto

Senast ändrad:

en