---
szerző: zgroska
tags: SVG, táblázat, HU
---

# SVG Táblázatok
:::info
Akadálymentesített SVG táblázat az alján
:::

### Leírás az SVG kódban
Egy oszlop és egy sor alapú példatáblázat SVG-ben a 'text' és 'tspan' elemek használatával.

[Forrás](http://svg-whiz.com/svg/table.svg) 2005. március, szerző: [Doug Schepers](http://schepers.cc/about).

<svg width='100%' height='350' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<title>SVG példa Táblázatok</title>
<g id='Oszlopokként'>
<rect x='65' y='10' width='75' height='110' fill='gainsboro'/>
<rect x='265' y='10' width='75' height='110' fill='gainsboro'/>
<text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson'>
<tspan x='30' dy='1.5em'>Q1</tspan>
<tspan x='30' dy='1em'>Q2</tspan>
<tspan x='30' dy='1em'>Q3</tspan>
<tspan x='30' dy='1em'>Q4</tspan></text>
<text x='80' y='30' font-size='18px'>
<tspan x='80' font-weight='bold' fill='crimson'>Eladás</tspan>
<tspan x='80' dy='1.5em'>$ 223</tspan>
<tspan x='80' dy='1em'>$ 183</tspan>
<tspan x='80' dy='1em'>$ 277</tspan>
<tspan x='80' dy='1em'>$ 402</tspan></text>
<text x='180' y='30' font-size='18px'>
<tspan dx='-16' font-weight='bold' fill='crimson'>Költségek</tspan>
<tspan x='180' dy='1.5em'>$ 195</tspan>
<tspan x='180' dy='1em'>$ 70</tspan>
<tspan x='180' dy='1em'>$ 88</tspan>
<tspan x='180' dy='1em'>$ 133</tspan></text>
<text x='300' y='30' font-size='18px' text-anchor='middle'>
<tspan x='300' font-weight='bold' fill='crimson'>Árrés</tspan>
<tspan x='300' dy='1.5em'>$ 28</tspan>
<tspan x='300' dy='1em'>$ 113</tspan>
<tspan x='300' dy='1em'>$ 189</tspan>
<tspan x='300' dy='1em'>$ 269</tspan></text>
</g>
<g id='Soronként' transform='translate(0, 150)'>
<rect x='25' y='40' width='310' height='20' fill='gainsboro'/>
<rect x='25' y='76' width='310' height='20' fill='gainsboro'/>
<text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson' text-anchor='middle'>
<tspan x='100'>Eladás</tspan>
<tspan x='200'>Költségek</tspan>
<tspan x='300'>Árrés</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle'>
<tspan x='30' dy='1.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q1</tspan>
<tspan x='100'>$ 223</tspan>
<tspan x='200'>$ 195</tspan>
<tspan x='300'>$ 28</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle'>
<tspan x='30' dy='2.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q2</tspan>
<tspan x='100'>$ 183</tspan>
<tspan x='200'>$ 70</tspan>
<tspan x='300'>$ 113</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle'>
<tspan x='30' dy='3.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q3</tspan>
<tspan x='100'>$ 277</tspan>
<tspan x='200'>$ 88</tspan>
<tspan x='300'>$ 189</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle'>
<tspan x='30' dy='4.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q4</tspan>
<tspan x='100'>$ 402</tspan>
<tspan x='200'>$ 133</tspan>
<tspan x='300'>$ 269</tspan></text>
</g>
<text x='370' y='30' font-size='16px'>
<tspan x='370'>
Az SVG-ben nincsenek "táblázat" típusú elemek, </tspan>
<tspan x='370' dy='1em'>
de a "text" és a "tspan" elemekkel hasonló </tspan>
<tspan x='370' dy='1em'>
vizuális és interaktív hatás érhető el.</tspan>
<tspan x='370' dy='1.5em'>
A bal oldalon 2 ilyen táblázatos ábrázolás </tspan>
<tspan x='370' dy='1em'>
látható, a felső táblázat oszlopos elrendezésű</tspan>
<tspan x='370' dy='1em'>
(azaz a felhasználó az összes szöveget kiválaszt-</tspan>
<tspan x='370' dy='1em'>
hatja egy oszlopban), az alsó táblázat pedig</tspan>
<tspan x='370' dy='1em'>
soralapú elrendezésű.
<tspan x='370' dy='1.5em'>
Ennek a megközelítésnek nyilvánvaló hátránya,</tspan></tspan>
<tspan x='370' dy='1em'>
hogy nem lehet függőleges és vízszintes szelek-</tspan>
<tspan x='370' dy='1em'>
tivitással és navigációval rendelkező táblázatot</tspan>
<tspan x='370' dy='1em'>
létrehozni.</tspan>
<tspan x='370' dy='1.5em'>
Kevésbé nyilvánvaló, hogy az ilyen táblázat meg-</tspan>
<tspan x='370' dy='1em'>
jelenítés nem adja meg egy táblázat valódi</tspan>
<tspan x='370' dy='1em'>
szemantikai tulajdonságait, ami hátrányos a</tspan>
<tspan x='370' dy='1em'>
hozzáférhetőség, a gazdag interaktivitás, és a</tspan>
<tspan x='370' dy='1em'>
navigáció szempontjából.</tspan>
</text>
</g>
</svg>

#### Feladat
Mind a két táblázatból egymás után másold ki:
- [ ] a Kiadások,
- [ ] a Q3 - harmadik negyedév - adatait

---
### Csak a táblázat
###

<svg width="100%" height="100%" viewBox="0 0 370 160">
<title>Költségek:</title>
<g id='rowGroup' transform='translate(0, 0)'>
<rect x='25' y='40' width='310' height='20' fill='gainsboro'/>
<rect x='25' y='76' width='310' height='20' fill='gainsboro'/>
<text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson' text-anchor='middle' role="row">
<tspan x='100'>Bevételek</tspan>
<tspan x='200'>Kiadások</tspan>
<tspan x='300'>Nettó</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan x='30' dy='1.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q1</tspan>
<tspan x='100'>$ 223</tspan>
<tspan x='200'>$ 195</tspan>
<tspan x='300'>$ 28</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan x='30' dy='2.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q2</tspan>
<tspan x='100'>$ 183</tspan>
<tspan x='200'>$ 70</tspan>
<tspan x='300'>$ 113</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan x='30' dy='3.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q3</tspan>
<tspan x='100'>$ 277</tspan>
<tspan x='200'>$ 88</tspan>
<tspan x='300'>$ 189</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan id="q4" x='30' dy='4.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q4</tspan>
<tspan x='100'>$ 402</tspan>
<tspan x='200'>$ 133</tspan>
<tspan x='300'>$ 269</tspan></text>
</g>
</svg>

---

### [Akadálymentesített](https://tink.uk/accessible-svg-tables): SVG + [ARIA](https://w3c.github.io/aria/) kód

<svg width="100%" height="100%" viewBox="0 0 370 160">
<title>Költségvetés:</title>
<g id='rowGroup' transform="translate(0, 0)" role="table">
<rect x='25' y='40' width='310' height='20' fill='gainsboro'/>
<rect x='25' y='76' width='310' height='20' fill='gainsboro'/>
<text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson' text-anchor='middle' role="row">
<tspan role="columnheader" x='100'>Bevétel</tspan>
<tspan role="columnheader" x='200'>Kiadás</tspan>
<tspan role="columnheader" x='300'>Nettó</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan role="rowheader" x='30' dy='1.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q1</tspan>
<tspan role="cell" x='100'>$ 223</tspan>
<tspan role="cell" x='200'>$ 195</tspan>
<tspan role="cell" x='300'>$ 028</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan role="rowheader" x='30' dy='2.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q2</tspan>
<tspan role="cell" x='100'>$ 183</tspan>
<tspan role="cell" x='200'>$ 070</tspan>
<tspan role="cell" x='300'>$ 113</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan role="rowheader" x='30' dy='3.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q3</tspan>
<tspan role="cell" x='100'>$ 277</tspan>
<tspan role="cell" x='200'>$ 088</tspan>
<tspan role="cell" x='300'>$ 189</tspan></text>
<text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
<tspan id="q4" role="rowheader" x='30' dy='4.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q4</tspan>
<tspan role="cell" x='100'>$ 402</tspan>
<tspan role="cell" x='200'>$ 133</tspan>
<tspan role="cell" x='300'>$ 269</tspan></text>
</g>
</svg>