flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Table


Introductie

Met de CSS Framework tabel kunt u mooi ontworpen tabellen weergeven.


Klik op de Class naam om deze te kopiƫren.

bordered Class om een rand toe te voegen
overflow-x-auto Class om de tabel responsief te maken

Voorbeeld


Basis tabel

Tabel kop Tabel kop
Tekst Tekst
Tekst Tekst
Tekst Tekst
Tekst Tekst
Tekst Tekst

Voorbeeldcode:

<table>
  <tr>
    <th>Tabel kop</th>
    <th>Tabel kop</th>
  </tr>
  <tr>
    <td>Tekst</td>
    <td>Tekst</td>
  </tr>
</table>

Tabel met rand

Tabel kop Tabel kop
Tekst Tekst
Tekst Tekst
Tekst Tekst
Tekst Tekst
Tekst Tekst

Voorbeeldcode:

<table class="bordered">
  <tr>
    <th>Tabel kop</th>
    <th>Tabel kop</th>
  </tr>
  <tr>
    <td>Tekst</td>
    <td>Tekst</td>
  </tr>
</table>

Tabel met rand en resposief

Voornaam Achternaam Punten Punten Punten Punten Punten Punten Punten Punten Punten Punten
Julia Smid 50 50 50 50 50 50 50 50 50 50
Eva Jacobs 94 94 94 94 94 94 94 94 94 94
Eric Jansen 67 67 67 67 67 67 67 67 67 67

Voorbeeldcode:

<div class="overflow-x-auto">
<table class="bordered">
  <tr>
    <th>Voornaam</th>
    <th>Achternaam</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
    <th>Punten</th>
  </tr>
  <tr>
    <td>Julia</td>
    <td>Smid</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
  </tr>
  ...
  ...
</table>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster