Сазнајте како да креирате ЦСС таблицу за само пет минута
Можда сте чули да се ЦСС и ХТМЛ табеле не мешају. Ово једноставно није тачно. Да, коришћењем ХТМЛ таблица за изглед више није најбоља пракса за веб дизајн, већ је замењена стиловима распореда ЦСС-а, али табеле су и даље исправна ознака која се користи за додавање табеларних података на веб-страницу.
Нажалост, пошто су се многи стручњаци веба удаљили од таблица који мисле да су отров, многи од тих стручњака немају довољно искуства у раду са овим заједничким ХТМЛ елементом и борбом када морају да се баве њима на веб страници. На пример, ако имате табелу на страници и желите да додате интерне линије у ћелије таблице.
ЦСС табле табеле
Када користите ЦСС да додате границе у табеле, он додаје само границу око спољне стране табеле. Ако желите да додате интерне линије појединачним ћелијама ове табеле, потребно је додати границе унутрашњим ЦСС елементима. Можете користити и ХР таг за додавање линија унутар појединачних ћелија.
Да бисте применили стилове обухваћене у овом чланку, очигледно имате табелу на вашој веб страници. Затим треба креирати стилски стил као интерни стилски стил у главном документу (вероватно ћете то учинити само ако је ваша страница једна страница) или је приложена документу као спољашњи стилски стил (то је оно што ви ће учинити ако је ваш сајт више страница - омогућавајући вам да стишете све странице са једног спољног листа). Ставићете стилове да додате унутрашње линије у тај стилски стил.
Пре него што почнеш
Прво морате да одлучите где желите да се линије појављују у вашој табели. Имате неколико опција, укључујући:
- Око све ћелије да се формира мрежа;
- Постављање линија између само ступаца;
- Само између редова; или
- Између одређених колона или редова.
Такође можете позиционирати линије око појединачних ћелија или унутар појединачних ћелија.
Како додати линије око свих ћелија у табели
Да бисте додали линије око свих ћелија у вашој таблици, креирајући такав ефекат на мрежу, у свој стилски стил додајте следеће:
тд, тх {
граница: чврста 1пк црна;
}
Како додати линије између колона у табели
Да бисте додали линије између ступаца (ово ствара вертикалне линије које се крећу од врха до дна на ступцима таблице), у свој стилски стил додајте следеће:
тд, тх {
бордер-лефт: солид 1пк блацк;
}
Затим, ако не желите да се оне појављују у првој колони, морате додати класу за оне тх и тд ћелије. У овом примјеру претпостављамо да имамо класе без граница на тим ћелијама и уклањамо границу са овим специфичним ЦСС правилом. Дакле, овде је ХТМЛ класа коју бисмо користили:
цласс = "без граница">
И онда можемо додати следећи стил у наш стилни лист:
.но-граница {
бордер-лефт: ноне;
}
Како додати линије између редова у табели
Као и додавањем линија између ступаца, можете то учинити само са једним једноставним стилом који је додан у свој стилни лист. Доњи ЦСС би додао вертикалне линије између сваког редова наше табеле:
тр {
бордер-боттом: солид 1пк блацк;
}
Да бисте уклонили границу са дна табеле, поново бисте додали класу овој тр таг:
цласс = "без граница">
Додајте следећи стил на свој стилски стил:
.но-граница {
бордер-боттом: нема;
}
Како додати линије између одређених колона или редова у табели
Ако желите само линије између одређених редова или колона, потребно је да користите класу на тим ћелијама или редовима. Додавање линије између ступаца је нешто теже него између редова, јер морате додати класу у сваку ћелију у том ступцу. Ако се ваша табела аутоматски генерише из неке врсте ЦМС-а , то можда неће бити могуће, али ако ручно кодирате страницу, можете додати одговарајуће разреде по потреби како бисте постигли овај ефекат.
цласс = "сиде-бордер">
Додавање линија између редова је много лакше, јер можете само додати класу у ред у који желите да се линија укључи.
цласс = "бордер-боттом">
Затим додајте ЦСС у свој стилски стил:
.бордер-сиде {
бордер-лефт: солид 1пк блацк;
}
.бордер-боттом {
бордер-боттом: солид 1пк блацк;
}
Како додати линије око појединачних ћелија у табели
Да бисте додали линије око појединих ћелија, додате класе ћелијама којима желите границу:
цласс = "бордер">
А затим додајте следећи ЦСС у свој стилски стил:
.бордер {
граница: чврста 1пк црна;
}
Како додати линије унутар појединачних ћелија у табели
Ако желите додати линије унутар садржаја ћелије, најлакши начин за то је хоризонтална ознака правила ( <хр> ).
Корисни савети
Ако приметите празнине на вашим границама, треба да будете сигурни да је стил стајања граница постављен на вашу табелу. Додајте следеће на свој стилски стил:
сто {
гранични колапс: колапс;
}
Можете избјећи све наведене ЦСС и користити атрибут границе у својој таблици. Схватите, међутим, да његов атрибут, иако није застарио, је знатно мање флексибилан од ЦСС-а, јер можете само дефинирати ширину границе и то може имати само око свих ћелија табеле или ниједне.