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