Táblázatok
A táblázatok strukturált adatok áttekinthető megjelenítésére szolgálnak a HR portálon, segítve a könnyű adatelemzést és összehasonlítást.
Alap táblázat
Az alap táblázat egyszerű strukturált adatok megjelenítésére szolgál, világos formázással és áttekinthető elrendezéssel.
| Név | Pozíció | Részleg | Belépés dátuma |
|---|---|---|---|
| Kovács János | HR specialista | Emberi erőforrások | 2023.05.10. |
| Nagy Éva | Mérnök | Gyártás | 2022.11.15. |
| Szabó Péter | Projektmenedzser | IT | 2021.03.01. |
Kódpélda
<div class="overflow-x-auto">
<table class="min-w-full border-collapse">
<thead>
<tr class="bg-[#F5F5F5]">
<th class="border border-[#E0E0E0] py-3 px-4 text-left font-medium">Név</th>
<th class="border border-[#E0E0E0] py-3 px-4 text-left font-medium">Pozíció</th>
<th class="border border-[#E0E0E0] py-3 px-4 text-left font-medium">Részleg</th>
<th class="border border-[#E0E0E0] py-3 px-4 text-left font-medium">Belépés dátuma</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-[#E0E0E0] py-3 px-4">Kovács János</td>
<td class="border border-[#E0E0E0] py-3 px-4">HR specialista</td>
<td class="border border-[#E0E0E0] py-3 px-4">Emberi erőforrások</td>
<td class="border border-[#E0E0E0] py-3 px-4">2023.05.10.</td>
</tr>
<tr class="bg-[#FAFAFA]">
<td class="border border-[#E0E0E0] py-3 px-4">Nagy Éva</td>
<td class="border border-[#E0E0E0] py-3 px-4">Mérnök</td>
<td class="border border-[#E0E0E0] py-3 px-4">Gyártás</td>
<td class="border border-[#E0E0E0] py-3 px-4">2022.11.15.</td>
</tr>
</tbody>
</table>
</div>
Interaktív táblázat
Az interaktív táblázat lehetővé teszi a felhasználók számára a rendezést, szűrést és az adatokkal való interakciót.
Név | Pozíció | Részleg | Belépés dátuma | Műveletek |
|---|---|---|---|---|
| Kovács János | HR specialista | Emberi erőforrások | 2023.05.10. | |
| Nagy Éva | Mérnök | Gyártás | 2022.11.15. | |
| Szabó Péter | Projektmenedzser | IT | 2021.03.01. |
1-3 / 3 találat
Táblázat variációk
A HR portálon különböző táblázat variációk használhatók az adatok megjelenítésére, a tartalomtól és a felhasználási céltól függően.
Kompakt táblázat
| Azonosító | Név | Státusz |
|---|---|---|
| HR-2025-001 | Szabadságigénylés | Jóváhagyva |
| HR-2025-002 | Továbbképzési kérelem | Függőben |
| HR-2025-003 | Parkolási engedély | Elutasítva |
Használati irányelvek
Mikor használjunk táblázatot?
- Amikor nagymennyiségű, strukturált adatot kell megjeleníteni
- Amikor az adatokat össze kell hasonlítani vagy rendezni kell
- Amikor az adatok könnyen kategorizálhatók oszlopokba
- Amikor a felhasználóknak gyorsan kell megtalálniuk specifikus információkat
Akadálymentességi szempontok
- Használjon megfelelő táblázat fejléceket (th elemek)
- A táblázat legyen billentyűzettel navigálható
- Bonyolult táblázatoknál használjon caption és scope attribútumokat
- Responsive megjelenítés esetén gondoskodjon a horizontális görgethetőségről