Live
x
<html> <head> <title>Tabele</title> </head> <body> <h2>Podstawowa tabela</h2> <!-- Tabela złożona tylko z podstawowych tagów: --> <table> <!-- Wiersz tabeli oznaczamy tagiem <tr> --> <tr> <!-- Pierwszy wiersz wykorzystamy jako nagłówek, więc dla komórek używamy tagów <th> --> <th>Marka</th> <th>Model</th> <th>Kolor</th> </tr> <!-- Drugi wiersz tabeli będzie już zawierał dane --> <tr> <!-- więc komórki oznaczamy tagiem <td> --> <td>Ford</td> <td>Focus</td> <td>Czarny</td> </tr> <tr> <td>Skoda</td> <td>Octavia</td> <td>Beżowy</td> </tr> <tr> <td>Seat</td> <td>Toledo</td> <td>Zielony</td> </tr> </table> <h2>Ustrukturyzowana tabela</h2> <!-- Tabela złożona z nagłówka, ciała oraz stopki --> <table> <thead> <!-- Jeżeli użyjemy <thead>, to <table> nie może być już rodzicem dla <tr>, a wszystkie wiersze muszą znaleźć się wewnątrz <thead>, <tbody> lub <tfoot> --> <tr> <th>Marka</th> <th>Model</th> <th>Kolor</th> </tr> </thead> <tbody> <tr> <td>Ford</td> <td>Focus</td> <td>Czarny</td> </tr> <tr> <td>Skoda</td> <td>Octavia</td> <td>Beżowy</td> </tr> <tr> <td>Seat</td> <td>Toledo</td> <td>Zielony</td> </tr> </tbody> <!-- Stopki możemy użyć np. do powtórzenia nagłówka --> <tfoot> <tr> <th>Marka</th> <th>Model</th> <th>Kolor</th> </tr> </tfoot> </table> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.