Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Как убрать границы таблицы css: элементарная инструкция для чайников с примером и объяснением

Доброго времени суток, гики веб-разработки и желающие выучить что-то новенькое. Я уверен, что каждый из вас когда-нибудь пробовал создавать таблицы на своих веб-сайтах. Однако иногда возникает необходимость сделать табличную разметку незаметной для пользователей.

Именно поэтому в сегодняшней публикации я расскажу, как убрать границы таблицы css-средствами. Это очень простая тема и вы быстро ее освоите. Так что давайте побыстрее приступим к делу!

В каких случаях могут пригодиться знания о прозрачных границах?

Все знают, что таблицы – это отличный инструмент структурирования и систематизации информации. Такой прием очень часто используют образовательные сайты и различные онлайн-курсы для своих материалов, ведь в таком виде пользователям легче искать, разбирать и усваивать новый материал.

Что касается меня, то я не исключение и частенько прибегаю к такому способу презентации информации для вас.

table

Однако помимо традиционного предназначения таблицы еще используют в верстке. В широких кругах она известна как табличная верстка. Конечно современные и профессиональные сайты отдают предпочтение типу верстки при помощи такого тега 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>

На этом текущая публикация заканчивается. Надеюсь, она была для вас интересной и познавательной. Не забывайте подписываться на мои обновления, а также буду благодарен, если вы посоветуете мой обучающий блог своим друзьям и единомышленникам. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 8 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: