Увод у ЦСС таблирање

Зашто користимо ЦСС, иако можемо да користимо и ХТМЛ табеле, је зато што се у ХТМЛ табели изглед странице на бази табеле често успорава од еквивалентног изгледа заснованог на ЦСС-у; ово се посебно односи на странице са много садржаја. Табеле се не смију користити као помоћна средства за обликовање. А ако у прегледачу направимо ХТМЛ табеле без икаквих стилова или атрибута, биће приказане без икаквих обруба. Стварање табеле са ЦСС-ом може побољшати њен изглед.

ЦСС табеле су прилично једноставне за разумевање и коришћење. То је само питање памћења одговарајућих вриједности својстава приказа ЦСС-а за основне елементе ХТМЛ таблице. Уз помоћ ЦСС-а, способни смо да направимо неколико стилских столова.

Шта је ЦСС табела?

Табела ЦСС (Цасцадинг Стиле Схеетс) описује како положити скуп елемената у редове и ступце. Подразумевани ЦСС примењен на ХТМЛ табели је ЦСС табела.

  • ЦСС је дизајнирао и редизајнирао флексибилност.
  • То значи да ЦСС-ов дизајн омогућава да све своје стилове (тј. Од малих промена до главних правила) поставите на једну локацију.
  • Промјеном правила изгледа поставите у том листу стилова и утјечете на сваку страницу која се на њега односи.
  • Изглед странице на бази ЦСС-а обично ће се појавити брже на екрану, па ће и преузимање бити брже од изгледа заснованог на табели.

Својства ЦСС табеле

Испод су различита својства стилова табеле ЦСС:

1. Рушење граница

Користи се за означавање да ли границе око ћелија табеле треба раздвојити или урушити.

Синтакса: border-collapse: separate|collapse|initial|inherit;

  • Урушавање границе: одвојено: Користи се тако да суседне ћелије имају своје и независне границе које се не деле.

Синтакса

border-collapse: separate;

Задана вредност која је постављена за својство бордер-цоллапс је одвојена. Када се раздвоје, прегледачи стављају размак од пар пиксела између сваке ћелије користећи својство размака граница.

Код

Излаз:

  • Срушавање границе: колапс: сваки пут када поставимо својство границе-колапс тако да се урушава, уклања се простор између ћелија.

Синтакса

border-collapse: collapse;

Код

Излаз:

Чак и ако уклоните овај простор постављањем атрибута ћелије простора за ХТМЛ ознаку на 0, прегледачи и даље приказују двоструке обрубе. То јест, доња граница једне ћелије ће се појавити изнад горње границе ћелије испод, изазивајући удвостручење граничних линија. Постављање својства границе-колапс на урушавање елиминира и простор између ћелија и удвостручавање граница.

  • Копирање границе: почетно: Користи се за подешавање својства границе-колапс на задану вредност.
  • Срушавање границе: насљеђује: Користи се када својство границе пробијања насљеђује од својих надређених елемената. Ово својство делује само када се примењује на а таг.

    Вриједности: колапс, одвајање, почетно, насљеђивање;

    2. Размаци граница

    Поставља простор уз границе и садржај око стола. Слично је с ћелијским размаком ознаке

    атрибут, осим што има опционалну другу вредност. Ово својство делује само када се примењује на а
    таг.

    Синтакса

    border-spacing: Length|initial|inherit;

    Размак између граница обично узима једну или две вриједности дужине. У овој је специфицирана само једна вриједност, а затим дефинира и хоризонтални и вертикални размак између ћелија.

    Код

    Излаз:

    У овом случају, ако су наведене две вредности, прва вредност дефинише хоризонтални размак између ћелија (размак са обе стране сваке ћелије), а друга вредност вертикални размак између ћелија. (простор који одваја дно једне ћелије од врха оне испод ње).

    3. Натпис на страни

    Својство на страни титла специфицира смјештање натписа таблице. Када се примењује за натпис таблице, ово својство одређује да ли се опис појављује на врху или на дну табеле. Натпис се обично појављује на врху табеле.

    Синтакса

    caption-side: top|bottom|initial|inherit;

    Овај објекат може имати једну од четири вредности:

    • Наслов са натписима: врх: То је задана вредност. Овиме се опис ставља изнад табеле.

    Синтакса: caption-side:top;

    Код

    Излаз:

    • Наслов са натписима: дно: ставља опис испод табеле.

    Синтакса: caption-side:bottom;

    Код

    Излаз:

    • Наслов са натписима: почетни: Користи се за постављање својства на задану вредност.
    • Наслов са натписима : наслеђује: Наслеђује ово својство од свог надређеног елемента.

    Вриједности: врх, дно, почетно, насљеђују;

    4. Празне ћелије

    Прегледнику поручује да ли би требало да приказује ћелију табеле која је потпуно празна. Она контролише приказивање граница и позадине ћелија које немају видљиви садржај у табели која користи модел одвојених граница.

    Синтакса: empty-cells: show|hide|initial|inherit;

    Овај објекат може имати једну од четири вредности:

    • Празна ћелија: Прикажи: Ово својство се користи за приказ обруба празне ћелије.

    Синтакса: empty-cells: show;

    Код

    Излаз:

    • Празна ћелија: скрива: Ово својство се користи за скривање граница у празној ћелији.

    Синтакса: empty-cells: hide;

    Код

    Излаз:

    • Празна ћелија: почетна : Користи се за постављање својства на задану вредност.
    • Празна ћелија: наслеђује: Наслеђује ово својство од свог родитељског елемента.

    Вриједности: показати, сакрити, почетно, наслиједити;

    5. Распоред таблице

    Контролише како веб претраживач црта табелу и може мало утицати на брзину којом прегледач приказује. Ово својство може имати једну од четири вредности.

    Синтакса: table-layout: auto|fixed|initial|inherit;

    Подразумевана особина је ауто.

    1. Изглед табеле: аутоматски: Аутоматски омогућава да се ширина елемената аутоматски прилагоди садржају.

    2. Распоред табеле: фиксно : Фиксна поставка присиљава претраживач да све ступце рендира на исту ширину као и ступци у првом реду. Ако садржај буде шири од првог реда, тада ће се садржај замотати, одсећи или проширити изван ћелија.

    Код

    Излаз:

    3. Изглед табеле: почетни: Користи се за подешавање својства на задану вредност.

    4. Изглед табеле: наслеђује: Наслеђује ово својство од свог надређеног елемента.

    Закључак

    Помоћу ЦСС-а можемо да направимо елегантне столове и можемо да побољшамо изглед стола.

    Препоручени чланци

    Ово је водич за ЦСС обликовање табеле. Овде смо разговарали о својствима са кодовима, излазима и синтаксом ЦСС табеле Стилинг. Можете и да прођете кроз наше дате чланке да бисте сазнали више -

    1. Предности ЦСС-а
    2. Употребе ЦСС-а
    3. Увод у ЦСС
    4. ЦСС форматирање текста

    Категорија:

    Алати за веб развој