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