HTML: podstawy tabel
Opublikowano wto 16 czerwca 2020 w html • 1 min read
| Sekcje Tabeli | HTML |
|---|---|
| Tabela | <table></table> |
| Sekcja nagłówka | <thead></thead> |
| Sekcja główna | <tbody></tbody> |
| Stopka | <tfoot></tfoot> |
| ---- | ---- |
| Wiersz | <tr></tr> |
| Komórka | <td></td> |
| Nagłówek tabeli | <th></th> |
| ---- | ---- |
| Zasięg (columna/wiersz) | <th scope="col/row"> |
| Łączenie (liczba kolumn) | <th rowspan="2"> |
Przykładowa tabela
| Model | Planet | Class | |
|---|---|---|---|
| 1 | R2D2 | Naboo | Droid |
| 2 | C3PO | Tatooine | Protocol droid |
| 3 | ME-8D9 | Takodana | |
| Star wars | |||
<table>
<thead>
<tr>
<th></th>
<th scope="col">Model</th>
<th scope="col">Planet</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>R2D2</td>
<td>Naboo</td>
<td>Droid</td>
</tr>
<tr>
<th scope="row">2</th>
<td>C3PO</td>
<td>Tatooine</td>
<td rowspan="2">Protocol droid</td>
</tr>
<tr>
<th scope="row">3</th>
<td>ME-8D9</td>
<td>Takodana</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"> Star wars</td>
</tr>
</tfoot>
</table>
Przykładowa tabela z zagnieżdżonymi tabelami
See the Pen Neste Table by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Źródła