Доброго времени суток, гики веб-разработки и желающие выучить что-то новенькое. Я уверен, что каждый из вас когда-нибудь пробовал создавать таблицы на своих веб-сайтах. Однако иногда возникает необходимость сделать табличную разметку незаметной для пользователей.
Именно поэтому в сегодняшней публикации я расскажу, как убрать границы таблицы css-средствами. Это очень простая тема и вы быстро ее освоите. Так что давайте побыстрее приступим к делу!
В каких случаях могут пригодиться знания о прозрачных границах?
Все знают, что таблицы – это отличный инструмент структурирования и систематизации информации. Такой прием очень часто используют образовательные сайты и различные онлайн-курсы для своих материалов, ведь в таком виде пользователям легче искать, разбирать и усваивать новый материал.
Однако помимо традиционного предназначения таблицы еще используют в верстке. В широких кругах она известна как табличная верстка. Конечно современные и профессиональные сайты отдают предпочтение типу верстки при помощи такого тега html, как div, но это не мешает подавляющему количеству веб-ресурсов создаваться при помощи таблиц с прозрачными границами.Что касается меня, то я не исключение и частенько прибегаю к такому способу презентации информации для вас.
Средства, которые помогут избавиться от границ
За границы в любом элементе языка разметки отвечает свойство border. При чем он может похвастаться своей гибкостью и многофункциональностью. С помощью border-а создаются пунктирные, двойные, объемные и даже состоящие из картинок рамки вокруг объектов.
Данное свойство также отвечает за толщину и цвет границ. К тому же можно устанавливать уникальные параметры для каждой стороны отдельно, если конкретно указать часть рамки (например, border-left). Для полной прозрачности всех границ достаточно написать: border:0.
Программная реализация прозрачных границ
Теперь я хочу показать вам пример реализации прозрачной рамки. В данном программном коде я убираю верхнюю и нижнюю границы таблицы, а также разделительные линии между ячейками.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>Пример 1</title> <style type="text/css"> body { background: #FA8072; margin:0;} TABLE { background: #fff; width: 90%; margin: 5% 5% 0 5%; border-left: 11px double #b0e0e6; border-right: 11px double #b0e0e6; } TD { padding: 15px; text-align:center; } TH { background: #b0e0e6; font-size: 35px; color:#FA8072; text-shadow: -3px 1px 9px #A52A2A; padding: 19px; } </style> </head> <body> <table> <tr> <th colspan="4">Журнал моды. Ведущие направления 2016 года</th> </tr> <tr> <td><img src="http://yavmode.ru/wp-content/uploads/2015/11/Ermanno-Scervino.jpg" width="189" height="300" alt="lorem"></td> <td><img src="http://ohfashion.ru/wp-content/uploads/2015/04/Devushka-demonstriruyushhaya-idealnyiy-primer-kostyuma-s-topom-byuste.jpg" width="190" height="300" alt="lorem"></td> <td><img src="http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_i.jpg?itok=Kj8_4lWw" width="225" height="300" alt="lorem"></td> <td><img src="http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_l.jpg?itok=C2splJQt" width="225" height="300" alt="lorem"></td> </tr> <tr> <td colspan="4">В текущем году ценятся теплые и яркие цвета, также не остаются в стороне классические и светлые оттенки. Лидером стал минимализм во всем.</td> </tr> </table> </body> </html> |
На этом текущая публикация заканчивается. Надеюсь, она была для вас интересной и познавательной. Не забывайте подписываться на мои обновления, а также буду благодарен, если вы посоветуете мой обучающий блог своим друзьям и единомышленникам. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов