Използване на CSS за добавяне на вътрешни граници в таблица HTML

Може да сте чули, че CSS и HTML таблиците не се смесват. Това не е така. Да, използването на HTML таблици за оформление вече не е най-добрата практика за уеб дизайн, тъй като те са заменени от стилове на оформление на CSS, но таблиците все още са правилният маркер, който да се използва за добавяне на таблични данни към уеб страница.

Тъй като толкова много професионалисти в мрежата се срамуват от масите, мислейки, че не са нищо друго освен проблеми, много от тези професионалисти имат малко опит в работата с този обикновен HTML елемент и се борят, когато трябва да добавят вътрешни линии към таблицата клетки в уеб страница.

CSS Таблица граници

Когато използвате CSS, за да добавите граници към таблици, той добавя само границата около външната страна на таблицата. Ако искате да добавите вътрешни линии към отделните клетки на тази таблица, трябва да добавите граници към вътрешните елементи на CSS. Можете да използвате маркера HR, за да добавите линии в отделни клетки.

За да приложите стиловете, описани в този урок, имате нужда от таблица в уеб страница. След това създавате лист за стилове като вътрешен лист с стилове в заглавието на документа (ако имате работа само с една страница) или приложен към документа като външен стилов лист (ако сайтът има няколко страници). Сложете стилове, за да добавите вътрешни линии в листа стил.

Преди да започнеш

Решете къде искате линиите да се показват в таблицата. Имате няколко опции, включително:

• Около всички клетки, за да образуват мрежа
• Позициониране на линиите само между колоните
• Само между редовете
• Между конкретни колони или редове.

Можете също така да позиционирате линиите около отделни клетки или вътре в отделни клетки.

Как да добавите линии около всички клетки в таблицата

За да добавите линии около всички клетки в таблицата си, като създадете ефект на мрежата, добавете следното към стиловата ви таблица:

td, th {граница: твърдо 1px черно;}

Как да добавите линии между само колоните в таблицата

За да добавите линии между колоните, за да създадете вертикални линии, които се показват отгоре надолу в графите на таблицата, добавете следното към стиловата ви таблица:

td, th {граница-ляво: твърдо 1px черно;}

Ако не искате вертикалните линии да се показват в първата колона, добавете класа към тата и TD клетки. В този пример поемайте клас от не-граница върху тези клетки и премахнете границата с правило за CSS. Класът HTML, който използвате, е:

клас = "не-граница">

След това добавете следния стил в листа стил:

.no-border {границата-ляво: няма;}

Как да добавите линии между само редовете в таблицата

Както при добавянето на линии между колоните, можете да добавите хоризонтални линии между редове с един прост стил, добавен към стиловия лист, както следва:

tr {крайно дъно: твърдо 1px черно;}

За да премахнете границата от дъното на таблицата, отново ще добавите към нея класа

етикет:

клас = "не-граница">

Добавете следния стил към стиловия лист:

.no-border {крайно дъно: няма;}

Как да добавяме линии между конкретни колони или редове в таблица

Ако искате линии между конкретни редове или колони, трябва да използвате класа в тези клетки или редове. Добавянето на линия между колоните е малко по-трудно, отколкото между редове, защото трябва да добавите класа към всяка клетка в тази колона. Ако таблицата Ви се генерира автоматично от CMS от някакъв вид, това може да не е възможно, но ако ръчно кодирате страницата, можете да добавите подходящи класове според нуждите, за да постигнете този ефект.

клас = "страна граница">

Добавянето на редовете между редове е по-лесно, защото можете да добавите класа към реда, на който искате да бъде включена реда.

клас = "граничен дъно">

След това добавете CSS към стиловата ви таблица:

.border-side {граница-ляво: твърдо 1px черно;}.border-bottom {крайно дъно: твърдо 1px черно;}

Как да добавите линии около отделни клетки в таблица

За да добавите линии около отделни клетки, добавяте класа към клетките, за които искате да се очертае границата:

клас = "граница">

След това добавете следния CSS в стиловата ви таблица:

.border {граница: твърдо 1px черно;}

Как да добавите линии вътре в отделни клетки в таблица

Ако искате да добавите линии в съдържанието на клетката, най-лесният начин да направите това е с хоризонталния маркер за правило ().

Полезни съвети

Ако забележите пропуски в границите си, уверете се, че стила на срив на границата е зададен на масата. Добавете следното към стиловата ви таблица:

таблица {граничен колапс: срив;}

Можете да избегнете всички и да използвате атрибута за границата в маркера си за таблици. Осъзнайте обаче, че този атрибут, макар и да не е отхвърлен, е значително по-малко гъвкав от CSS, тъй като можете само да дефинирате ширината на границата и да го разполагате само около всички клетки на таблицата или никой.