Даступныя табліцы
Original on www.evengrounds.com
Табліцы з’яўляюцца адным з найболей распаўсюджаных элементаў, вы ўбачыце на вэб-сайтах. Калі вам неабходна адлюстраваць інфармацыю ў выглядзе радкоў і слупкоў, стварэнне табліцы ваша першая і часта адзіная магчымасць. Да шчасця, рабіць табліцы, як правіла, лёгка: трэба ўсяго толькі ўвесці дадзеныя, а таксама паказаць тыя радкі, а якія слупкі.
Але, нягледзячы на прастату гэтага элемента табліцы гуляюць важную ролю ў аказанні дапамогі карыстачам зразумець утрыманне вэб-старонкі. Людзі з інваліднасцю не з’яўляюцца выключэннем у гэтым факце. Таму важна, каб вы ведалі, як зрабіць табліцы даступныя для ўсіх тыпаў карыстачоў.
Тут, я пакаджу вам, як стварыць даступныя табліцы.
Два выгляду табліцы
Макет табліцы
Макет табліцы падаць вам сродкі для арганізацыі інфармацыі ў вэб-старонкі. Вы выкарыстоўваеце макет табліцы зрабіць ваш вэб-змесціва ўяўляецца візуальна лагічна.
Настойліва рэкамендуецца, што замест таго, макет табліцы, можна выкарыстоўваць CSS у фармаванні макет вашай старонкі. Гэта дапаможа вам паменшыць памер файла вэб-старонкі і падвышэнні іх даступнасці для карыстачоў дапаможных тэхналогій. Наколькі гэта магчыма, вы жадалі б выкарыстоўваць табліцы толькі для падання дадзеных.
Тым не менш, няма нічога дрэннага ў выкарыстанні макет табліцы ў фармаванні структуры вэб-старонкі. У рэчаіснасці, шматлікія вэб-сайты выкарыстоўваюць макет табліцы, і яны працуюць выдатна на гэтых сайтах. Акрамя таго, макет табліцы прызначаны як раз для фармавання структуры ўтрымання вашай старонкі.
Дадзеныя табліцы
Мы сапраўды надаваць больш увагі такога роду табліцы. Дадзеныя табліц, як вынікае з іх назвы, забяспечвае вас сродкамі для адлюстравання дадзеных у таблічнай форме. Як вы ведаеце, стварэнне табліц для захоўвання дадзеных лёгка. Да шчасця, робіць даступнымі табліцы.
Як зрабіць свой Табліцы Даступныя
Вось некалькі крокаў, каб забяспечыць доступ да табліц у вэб-старонкі.
Загалоўкі Выкарыстанне табліцы
Калі ў Вас ёсць дадзеныя табліцы на сваім сайце, гэта вельмі важна выкарыстоўваць загалоўкі табліцы. Вы павінны вызначыць інфармацыю, якая ўяўляе сабою загаловак радка і загаловак для слупка. Часам, гэта толькі для радкоў, часам толькі для слупка, а часам бывае для абодвух бакоў.
Карыстачы дапаможных выгод тэхналогія ў значнай ступені з табліцы загалоўкі. Напрыклад, скажам, сляпых, якая выкарыстоўвае для чытання з экрана спрабуе атрымаць доступ да Вашага стала. Калі ваша табліца з загалоўкамі, для чытання з экрана будзе абвясціць слупок ці радок загалоўкаў табліцы кожных разоў, калі карыстач перасоўваецца ад адной клеткі да іншай. Гэта вельмі карысна для сляпога доступ да табліцы, бо ён не можа глядзець на калонку ці радок загалоўкаў пры навігацыі па дадзеных клетак.
Выкарыстоўвайце тэгі <th>
<th> Тэгі з’яўляецца адным з найболей распаўсюджаных спосабаў пазначэння загалоўкі табліцы. Вось прыціх выпадак, калі вы павінны выкарыстоўваць <th> пазнакі. Дапушчальны, вы жадаеце стварыць каляндар. На верхнім радку, вы атрымаеце 7 дзён: нядзеля, панядзелак, аўторак, асяроддзе, чацвер, пятніцу і суботу. А ўнізе, у вас ёсць нумары: 1 у нядзелю, 2 у панядзелак і гэтак далей.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
На дадзены момант, інфармацыю пра загаловак складаецца з дзён. Вы можаце паказаць загаловак інфармацыі з выкарыстаннем <th> пазнакі. Вось рэальны код для табліцы для календара. Нататка: выкарыстанне <caption> тэгі будуць апісаны далей у артыкуле.
<table border=”1″>
<caption>Sample Calendar</caption>
<tr>
<th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th>
<th>Friday</th><th>Saturday</th>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
</tr>
<tr>
<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
</tr>
<tr>
<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
</tr>
<tr>
<td>29</td><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
Выкарыстанне атрыбутаў Вобласць
Вы можаце выкарыстоўваць магчымасці атрыбут, калі ў вас ёсць табліца, якая ўтрымоўвае загалоўкі радкоў і слупкоў. Вы дадаяце гэты атрыбут, каб <th> пазнакі. Вось прыціх выпадак, калі вы павінны выкарыстоўваць магчымасці атрыбуту.
Скажам у вас ёсць стол для вашага класа графіку. Вашы загалоўкі слупкоў уяўляюць гадзін, і загалоўкі радка ўяўляюць дзён.
| 9:00 – 10:00 | 10:00 – 11:00 | 11:00 – 12:00 | |
|---|---|---|---|
| Monday | English | Algebra | Biology |
| Tuesday | Music | Trigonometry | History |
| Wednesday | English | Algebra | Biology |
| Thursday | Religion | Trigonometry | History |
| Friday | Basic Computer | Speech | Physical Education |
Выкарыстанне атрыбуту сферы, вы будзеце мець наступныя радкі кода:
<table border=”1″>
<caption>Class Schedule</caption>
<tr>
<td> </td>
<th scope=”col”>9:00 – 10:00</th>
<th scope=”col”>10:00 – 11:00</th>
<th scope=”col”>11:00 – 12:00</th>
</tr>
<tr>
<th scope=”row”>Monday</th>
<td>English</td>
<td>Algebra</td>
<td>Biology</td>
</tr>
<tr>
<th scope=”row”>Tuesday</th>
<td>Music</td>
<td>Trigonometry</td>
<td>History</td>
</tr>
<tr>
<th scope=”row”>Wednesday</th>
<td>English</td>
<td>Algebra</td>
<td>Biology</td>
</tr>
<tr>
<th scope=”row”>Thursday</th>
<td>Religion</td>
<td>Trigonometry</td>
<td>History</td>
</tr>
<tr>
<th scope=”row”>Friday</th>
<td>Basic Computer</td>
<td>Speech</td>
<td>Physical Education</td>
</tr>
</table>
Выкарыстоўвайце загалоўкі і атрыбуты ID
Для табліц з 2 ці больш узроўняў, вы можаце выкарыстоўваць загалоўкі і ідэнтыфікатар атрыбутаў. Гэтыя атрыбуты з’яўляюцца карыснымі ў сітуацыях, калі трэба звязаць некалькі загалоўкаў з аднаго вочка дадзеных.
Каб выкарыстоўваць загалоўкі і атрыбуты ID, вы павінны спачатку абраць вочка, якую неабходна будзе загаловак. Тады вам прыйдзецца прыкласці атрыбут ідэнтыфікатара да яго. Далей, вы павінны прыняць ідэнтыфікатары кожнага загалоўка вочка, і дадаваць іх у загалоўкі атрыбут адпаведнаму вочку дадзеных.
Вось прыклад табліцы, якую выкарыстоўвае загалоўкі і ідэнтыфікатар атрыбутаў. Гэта табліца ўтрымоўвае наяўных прылад музычнай крамы і іх колькасць і кошт. Прылады падзяляюцца на два тыпу: духавыя і струнныя прылады.
Нататка: рэзюмэ будзе паказана ў наступнай частцы артыкула
| Instrument | Quantity | Price Per Unit | |
|---|---|---|---|
| Wind Instruments | Flute | 4 | $80.00 |
| Trumpet | 6 | $100.00 | |
| String Instruments | Acoustic Guitar | 5 | $300.00 |
These are sample blocks of code from the table:
<tr>
<td></td>
<th id=”instrument”>Instrument</th>
<th id=”quantity”>Quantity</th>
<th id=”price”>Price Per Unit</th>
</tr>
<tr>
<th rowspan=”2″ id=”wind”>Wind Instruments</th>
<th id=”flute”>Flute</th>
<td headers=”wind flute quantity”>4</td>
<td headers=”wind flute price”>$80.00</td>
</tr>
Выкарыстанне Caption і сумарных
Апроч загалоўкаў, загаловак і рэзюмэ, іншая інфармацыя, вы можаце прызначыць на Ваш стол.
Надпіс ставіцца да назвы вашага стала. Вы мясцуеце <caption> пасля тэга <table> пазнакі.
Тут ізноў блок кода з класа табліца з утрымоўвалыя загаловак тэгі:
<table border=”1″>
<caption>Class Schedule</caption>
<tr>
<th scope=”col”>9:00 – 10:00</th>
<th scope=”col”>10:00 – 11:00</th>
<th scope=”col”>11:00 – 12:00</th>
</tr>
У кароткім рэзюмэ даецца кароткае апісанне ўтрымання табліцы. Вы мясцуеце рэзюмэ = “” атрыбут усярэдзіне тэга <table> з фактычным рэзюмэ ў двукоссі. У большасці выпадкаў, рэзюмэ не з’яўляецца абавязковым. Але калі ў вас складаныя табліцы, вы можаце ўключыць у рэзюмэ для яго. Праз Такім чынам, можна падкрэсліць асноўныя дадзеныя ў табліцы, і дапамагчы чытачам хутка знаходзіць пэўныя дадзеныя.
Комплекс Табліцы
Часам вам прыйдзецца працаваць з вельмі вялікім сталом. У гэтай табліцы, могуць быць клеткі, якія змяшчаюць інфармацыю, якая сама па сабе столік. Гэта тое, што шматлікія вэб-распрацоўнікі завуць складанай табліцы. Іншымі словамі, гэта табліца, якая мае табліцы ўсярэдзіне іх.
Давайце выкарыстоўваны наш клас табліца з прыкладам. Адна з тэм у табліцы гісторыі. У складаныя табліцы, вочкі для гісторыі можа ўтрымоўваць дадатковыя звесткі, такія як прафесар, тэмы і заданні. І гэтыя фрагменты інфармацыі могуць адлюстроўвацца ў складаную структуру ўсярэдзіне клеткі для гісторыі.
Вы можаце ў адзін момант неабходна ствараць складаныя табліцы, і няма нічога дрэннага. Але калі табліца становіцца занадта складаным, твараў чытаць вашы старонкі будзе складана распазнаць інфармацыю ў табліцы. Як правіла, стол з 4 да 5 узроўня ўжо занадта складана.
Наколькі гэта магчыма, неабходна пазбягаць выкарыстанні складаных табліц. Заўсёды імкніцеся зрабіць простай структуры табліц. Як ужо гаварылася вышэй, гэта дапамагае чытачам хутка зразумець размяшчэнне стала. Акрамя таго, у складаную табліцу, вы, магчыма, прыйдзецца пазначаць загалоўкі некалькі вочак дадзеных. Часам, вы, магчыма, нават пісаць код асобна для кожнага вочка. Але калі вы адлюстраванні дадзеных з дапамогай простай табліцы, гэта значыць толькі для разметкі загалоўкаў разоў.
