Научете како да креирате граница за табела на CSS за само пет минути
Можеби сте чуле дека табелите CSS и HTML не се мешаат. Ова едноставно не е точно. Да, користењето на HTML табели за изгледот веќе не е најдобрата практика за веб дизајн, бидејќи се заменети со стилови на распоред на CSS, но табелите се сеуште точни ознаки за користење за да додадете табеларни податоци на веб страница.
За жал, бидејќи толку многу веб професионалци се оддалечија од табели мислејќи дека се отров, многу од тие професионалци имаат малку искуство во работата со овој заеднички HTML елемент и борбата кога треба да се справуваат со нив на веб страница. На пример, ако имате табела на страница и сакате да додадете внатрешни линии во клетките на табелата.
CSS Табеларни граници
Кога користите CSS за да додадете граници на табели, таа само ја додава границата околу надворешната страна на табелата. Ако сакате да додадете внатрешни линии на поединечните ќелии на таа табела, треба да додадете граници на внатрешните CSS елементи. Исто така можете да ја користите табелата со хумани ресурси за да додадете линии во одделни ќелии.
Со цел да ги примените стиловите опфатени во оваа статија, очигледно треба да имате табела на вашата веб-страница. Потоа треба да креирате стилски лист како внатрешен стилски лист во главата на вашиот документ (веројатно ќе го направите ова само ако вашата "страница" е една страница) или прикачена на документот како надворешен стилски лист (ова е она што вие ќе направат ако вашиот сајт е повеќе страници - овозможувајќи ви да ги стилизирате сите страници од еден надворешен лист). Ќе ги ставите стиловите за да додадете линии за внатрешни работи во тој стилски лист.
Пред да започнете
Прво треба да одлучите каде сакате линиите да се појавуваат во вашата табела. Имате неколку опции, вклучувајќи:
- Околу сите клетки да се формира мрежа;
- Позиционирање на линиите меѓу само колоните;
- Само меѓу редовите; или
- Помеѓу одредени колони или редови.
Исто така, можете да ги поставите линиите околу индивидуалните ќелии или во одделните ќелии.
Како да додадете линии низ сите ќелии во табелата
За да додадете линии околу сите ќелии во вашата табела, создавајќи ефект сличен на решетката, додајте го следново во вашиот стилски лист:
td, th {
граница: солидна 1px црна;
}
Како да додадете линии помеѓу само колоните во табелата
За да додадете линии помеѓу колоните (ова создава вертикални линии кои се движат од врвот до дното на колоните на табелата), додадете го следново во вашиот стилски лист:
td, th {
граница-лево: солидна 1px црна;
}
Потоа, ако не сакате тие да се појавуваат на првата колона, ќе треба да додадете класа на оние ти и тд- ќелии. Во овој пример, претпоставуваме дека имаме класа на не-граница на тие ќелии и ја отстрануваме границата со ова поконкретно CSS правило. Значи тука е класата на HTML што би користеле:
класа = "без граница">
И тогаш би можеле да го додадеме следниов стил на нашиот лист со стил:
.пограничен {
граница-лево: нема;
}
Како да додадете линии помеѓу само редовите во табелата
Како и со додавање на линии помеѓу колоните, можете да го направите ова со само еден едноставен стил додаден во вашиот стилски лист. Подолу CSS ќе додадеме вертикални линии помеѓу секој ред на нашата табела:
tr {
граница-дното: солидна 1px црна;
}
И за да ја отстраните границата од дното на табелата, повторно ќе додадете класа на таа тренда:
класа = "без граница">
Додајте го следниов стил во вашиот стилски лист:
.пограничен {
граничното дно: нема;
}
Како да додадете линии помеѓу одредени колони или редови во табела
Ако сакате само линии помеѓу одредени редови или колони, треба да користите класа на тие ќелии или редови. Додавањето на линија помеѓу колоните е малку потешко отколку помеѓу редовите затоа што треба да ја додадете класата на секоја ќелија во таа колона. Ако вашата табела автоматски е генерирана од некој вид на CMS , ова можеби не е можно, но ако сте кодирање на страницата, можете да додадете соодветни класи колку што е потребно за да го постигнете овој ефект.
класа = "страна-граница">
Додавањето на линии помеѓу редови е многу полесно, бидејќи можете само да ја додадете класата во редот за кој сакате линијата.
class = "border-bottom">
Потоа додадете го CSS во вашиот стилски лист:
.border-side {
граница-лево: солидна 1px црна;
}
.рам-дно {
граница-дното: солидна 1px црна;
}
Како да додадете линии околу индивидуалните ќелии во табелата
За да додадете линии околу поединечни ќелии, додадете класа на клетките за кои сакате граница:
класа = "граница">
И потоа додајте ги следните CSS во вашиот стилски лист:
.border {
граница: солидна 1px црна;
}
Како да додадете линии во индивидуалните ќелии во табелата
Ако сакате да додавате линии во внатрешноста на содржината на ќелијата, најлесниот начин да го направите ова е со хоризонталната ознака за правилата (
).
Корисни совети
Ако забележите празнини во вашите граници, треба да бидете сигурни дека стилот на границата-колапс е поставен на вашата табела. Додајте го следново во вашиот лист со стил:
маса {
граница-колапс: колапс;
}
Можете да ги избегнувате сите горенаведени CSS и да го користите атрибутот на границата во вашата табела. Но, сфати дека неговиот атрибут, иако не е застарен, е значително помалку флексибилен од CSS, бидејќи само може да ја дефинирате ширината на границата и може да ја има само околу сите ќелии на табелата или нема.