SVG Táblázatok

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 2005. március, szerző: Doug Schepers.

SVG példa Táblázatok Q1 Q2 Q3 Q4 Eladás $ 223 $ 183 $ 277 $ 402 Költségek $ 195 $ 70 $ 88 $ 133 Árrés $ 28 $ 113 $ 189 $ 269 Eladás Költségek Árrés Q1 $ 223 $ 195 $ 28 Q2 $ 183 $ 70 $ 113 Q3 $ 277 $ 88 $ 189 Q4 $ 402 $ 133 $ 269 Az SVG-ben nincsenek "táblázat" típusú elemek, de a "text" és a "tspan" elemekkel hasonló vizuális és interaktív hatás érhető el. A bal oldalon 2 ilyen táblázatos ábrázolás látható, a felső táblázat oszlopos elrendezésű (azaz a felhasználó az összes szöveget kiválaszt- hatja egy oszlopban), az alsó táblázat pedig soralapú elrendezésű. Ennek a megközelítésnek nyilvánvaló hátránya, hogy nem lehet függőleges és vízszintes szelek- tivitással és navigációval rendelkező táblázatot létrehozni. Kevésbé nyilvánvaló, hogy az ilyen táblázat meg- jelenítés nem adja meg egy táblázat valódi szemantikai tulajdonságait, ami hátrányos a hozzáférhetőség, a gazdag interaktivitás, és a navigáció szempontjából.

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

Költségek: Bevételek Kiadások Nettó Q1 $ 223 $ 195 $ 28 Q2 $ 183 $ 70 $ 113 Q3 $ 277 $ 88 $ 189 Q4 $ 402 $ 133 $ 269

Akadálymentesített: SVG + ARIA kód

Költségvetés: Bevétel Kiadás Nettó Q1 $ 223 $ 195 $ 028 Q2 $ 183 $ 070 $ 113 Q3 $ 277 $ 088 $ 189 Q4 $ 402 $ 133 $ 269