Наићи ћете на многе атрибуте и ознаке када радите са ХТМЛ-ом (Хипертект Маркуп Лангуаге) и другим језицима за означавање као што је КСМЛ. Табеле су атрибути које увек треба да користите да бисте корисницима олакшали скенирање, упоређивање и анализу великих количина података.
Са табелама, корисници могу да виде кључне тачке, закључке или резултате на први поглед, чак и без читања целог чланка. Можете да користите ЦСС за стилизовање и промену изгледа ваших табела.
Ово су неки од разлога зашто ћете можда морати да стилизујете табелу у својој апликацији;
- Побољшајте визуелни изглед: Обични столови могу бити досадни и једноставни. Стилизовање оваквих столова ће побољшати њихов изглед и учинити их атрактивним за кориснике.
- Побољшајте приступачност: Стилизоване табеле могу да их учине доступним чак и особама са инвалидитетом.
- Побољшајте читљивост: Можете користити различите технике стилизовања како бисте корисницима олакшали скенирање података представљених у вашим табелама.
- Брендирање: Можете да ојачате идентитет свог бренда када примените конзистентне фонтове и боје на табеле широм апликације.
- Добро за претраживаче: Организовање ваших података у табеларним форматима биће корисно ако желите да своју веб страницу рангирате високо у претраживачима.
Преглед садржаја
Направите основну табелу са ХТМЛ-ом
Да бисмо демонстрирали како табела функционише у ХТМЛ-у, направићемо фасциклу пројекта, отићи у фасциклу и креирати две датотеке; индек.хтмл, који ће носити наш ХТМЛ код, и стилес.цсс, који носи наш ЦСС код (стилинг).
Ако желите да пратите, користите ове команде да бисте започели;
мкдир Стилинг-ХТМЛ-Таблес
цд Стилинг-ХТМЛ-Таблес
додирните Стилинг-ХТМЛ-Таблес
Сада имате основну фасциклу пројекта која ће вам помоћи да креирате ХТМЛ табеле. Желим да представим различите програмске језике, њихове случајеве употребе и примере компанија које користе ове језике.
Да бисте креирали ХТМЛ табелу, сви подаци треба да буду обухваћени ознаком <табле>….
У вашој ХТМЛ датотеци генеришите основну структуру ХТМЛ документа. Додајте овај код у ознаку <боди>.
<table> <tr> <th>Language</th> <th>Common Uses</th> <th>Companies Using</th> </tr> <tr> <td>Java</td> <td>Web apps, Android apps, enterprise applications</td> <td>Google, Amazon, LinkedIn</td> </tr> <tr> <td>Python</td> <td>Data science, web dev, automation</td> <td>Google, Dropbox,Spotify</td> </tr> <tr> <td>JavaScript</td> <td>Web dev, front-end dev, browser scripting</td> <td>PayPal, Facebook, Netflix</td> </tr> <tr> <td>C++</td> <td>Game dev, systems programming, embedded systems</td> <td>Tesla, Microsoft, Adobe</td> </tr> <tr> <td>Swift</td> <td>iOS development, macOS development</td> <td>Apple</td> </tr> <tr> <td>PHP</td> <td>Web dev, server-side scripting, CMSs</td> <td>WordPress, Wikipedia, Yahoo</td> </tr> </table>
Ако пажљиво погледате ову табелу, приметићете још неколико ознака затворених унутар ознаке <табле>; <тр>, <тх> и <тд>.
Ове ознаке раде следеће;
- <тр>, ред табеле, затворен је унутар елемента <табле>. Ознака <тр> може обухватити један или више елемената <тх> и <тд>.
- <тх> , заглавље табеле, налази се унутар ознаке <тр>. Подразумевано, његов садржај је подебљан.
- <тд>, подаци табеле, описује садржај података у ћелијама табеле.
Када рендерујете код који смо горе написали, имаћемо ово у нашем претраживачу;
ЦСС својства која се користе за стилизовање табела
Табела коју смо направили изнад је потпуно функционална. Међутим, оставља много да се пожели јер није добро стилизовано. Да бисмо постигли жељене стилове и учинили табелу визуелно привлачном, користићемо ЦСС.
Сећате се ЦСС датотеке коју смо направили? Сада је време да га искористите. Међутим, прво морате да увезете своју ЦСС датотеку у своју ХТМЛ датотеку да би стил функционисао. Нашу ЦСС датотеку смо назвали стилес.цсс. У одељку <хеад> вашег ХТМЛ документа додајте следеће;
<линк рел=”стилесхеет” хреф=”стилес.цсс”>
Сада смо спремни за стилизовање нашег стола. Можемо га стилизовати на следећи начин;
#1. Граница
Можемо додати ивицу свуда око ћелија у нашој табели. Да бисмо то постигли, дефинисаћемо својство границе на елементима <тх> и <тд>. Границу можемо поставити на 2пк.
th, td {
border: 2px solid orange;
}
Поставили смо вредност границе на 2 и додали наранџасту као нашу боју.
Када рендерујете нову страницу, видећете следеће;
#2. Граница-колапс
Ако погледате горњи снимак екрана, приметићете да постоје размаци између граница сваке ћелије. Својство бордер-цоллапсе одређује да ли суседне ћелије у табели треба да деле ивицу.
Ако желите да ћелије деле ивицу, додајте овај код у своју ЦСС датотеку;
table {
border-collapse: collapse;
}
Када рендерујете своју страницу, можете видети да ћелије деле ивице на следећи начин;
Ако желите да ћелије имају различите ивице, додајте ово у своју ЦСС датотеку;
table {
border-collapse: separate;
}
Рендерована страница ће се појавити на следећи начин;
#3. Бордер-спаце
Користећи својство бордер-спаце, можемо да направимо мали простор између ћелија у нашој табели. Поставили смо правило унутар класе табеле у нашој ЦСС датотеци.
Да би ово својство функционисало, морамо да користимо бордер-цоллапсе: одвојено; имовина.
Можемо имати своју класу табеле на следећи начин;
table {
border-collapse: separate;
border-spacing: 3px;
}
Границе ћелија имају размак од 3 пиксела.
Када рендерујете табелу, она ће се појавити на следећи начин;
#4. Табле-лаиоут
Својство Табле-лаиоут одређује природу табеле. Можете имати табеле које увек имају исту дужину. С друге стране, такође можете креирати табеле које се мењају на основу садржаја.
Ако желимо да имамо ћелије сличне величине, можемо поставити својство изгледа табеле као фиксно.
распоред табеле: фиксни;
Наш коначни код на табели класе ће бити;
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
Ако желимо ћелије које се мењају на основу садржаја, можемо променити својство изгледа табеле у ауто.
распоред табеле: ауто;
Коначна класа табеле у нашем ЦСС коду ће бити;
Проверите последњу ћелију на табели и приметите да сам додао ове речи; МаилЦхимп и још много тога.
Сада можете видети да су ћелије у последњем реду веће од осталих јер је изглед табеле флексибилан на основу садржаја.
Стајлинг који смо до сада покрили фокусирао се на цео сто. Сада можемо да се фокусирамо на појединачне класе тако што ћемо променити боју позадине, фонт и својства поравнања текста за редове, ћелије или заглавља.
Ова својства можемо стилизовати на следећи начин;
#5. Боја позадине
Можемо да променимо позадину нашег горњег реда у жуто-зелену. Можемо да користимо селектор псеудо-класе :фирст-цхилд да бисмо постигли своје циљеве.
Додајте овај код свом ЦСС коду;
tr:first-child {
background-color: yellowgreen;
}
Коначни приказани код ће се појавити на следећи начин;
#6. Фонт
Можемо да променимо стил фонта или величину фонта одређених редова, колона или ћелија у нашој табели.
Циљаћемо садржај последње колоне на нашој страници (компаније које користе) да променимо стил фонта.
Сав садржај у овој колони ћемо исећи курзивом циљајући селектор класе тд:ласт-цхилд. Можете додати следећи код у своју ЦСС датотеку;
td:last-child {
font-style: italic;
}
Коначни резултат ће бити следећи када поново учитате приказану страницу;
Такође можемо да променимо боју и величину фонта прве колоне да бисмо је учинили јединственом.
Додајте следећи код у своју ЦСС датотеку;
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
Када рендерујете своју страницу, приметићете следеће; садржај у првој колони (Језик) има већу величину фонта, црвени је и подебљан.
Како учинити табелу прилагодљивом
Табела коју смо направили можда неће реаговати на мале екране. Можете да користите Цхроме-ове алатке за програмере или спољну алатку попут ове да бисте тестирали да ли ваш код реагује.
Постоји неколико приступа које можете предузети, али ће покрити само један.
Пратите ове кораке;
- Подесите ширину елемента <табле> у вашем коду;
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
- Поставите прелом речи на тд и тх да бисте направили дугачке речи у ћелији.
th, td {
border: 2px solid orange;
word-break: break-word;
}
Најбоље праксе за стилизовање столова
ЦСС може бити забаван једном, посебно када то знате. Ово су неке од најбољих пракси које осигуравају да добијете најбоље када стилизујете своје столове;
- Користите екстерни стилски лист: Имали смо опцију коришћења уграђеног стила, али смо изабрали спољни лист. Били смо у могућности да поново користимо наш стил у различитим табелама, смањујући време развоја.
- Нека буде једноставно: можда ћете се занети и превише стилизовати своје столове. Међутим, увек одржавајте једноставан дизајн и учините своје табеле прегледним и читљивим.
- Додајте ивице својим табелама: ивица чини табелу лаким за читање и скенирање.
- Користите доследне боје: Ако имате неколико табела на својим веб страницама, уверите се да користите доследне боје и фонтове. Коришћење боја вашег бренда може побољшати видљивост вашег бренда.
- Учините своје табеле прилагодљивим: можда никада нећете знати величину екрана уређаја крајњих корисника.
- Користите натписе да опишете своје табеле: Наслов укратко описује о чему се ради у табели.
- Користите размаке да бисте раздвојили своје табеле: Ако неколико табела прате једна другу, додајте мало размака и наведите их у складу са тим.
Закључак
Верујем да сада можете да креирате и стилизујете основну ХТМЛ табелу. Можда нисмо све покрили, пошто су ХТМЛ и ЦСС широки. Можете креирати мање или веће табеле, у зависности од природе података које желите да снимите.
Погледајте ЦСС варалице ако желите да сазнате више о ЦСС-у и како да га користите за побољшање корисничког интерфејса.