Округление углов таблицы в WEB-страницах.

Chervones · 21.02.2011, 18:23

Как округлить углы таблицы в WEB-страницах? Используя CSS и другие технологии. Нужно примерно как в картинке.

WOLF007 · 22.02.2011, 10:18

AlexZir · 22.02.2011, 12:24

Скругленные края можно реализовать несколькими способами, например, 1) вставив в углы таблицы соответствующие рисунки, 2) оформив в виде таблицы текстовые блоки при помощи CSS, 3) реализовав сдвиг строк и изменение их длины, 4) наложив поверх таблицы прозрачный слой со скругленным прямоугольником, 5) написав скрипт, рисующий таблицу требуемой формы и т.д.
Самая простая реализация процитирована ниже, это способ №1.

Код на HTML, найден на просторах тырнета за пару минут

Цитата:

<table width="100%">
<tr><td width="5"><img src="картинка левый верхний угол" width="5" height="5" border="0"></td>
[/FONT]<td background="картинка верхняя линия" valign="top"></td>
<td width="5"><img src="картинка правый верхний угол" width="5" height="5" border="0"></td></tr>
<tr>
<td background="картинка левая вертикальная линия"></td>
<td valign="top">Содержимое таблицы</td>
<td background="картинка правая вертикальная линия"></td></tr>
<tr>
<td width="5"><img src="картинка левый нижний угол" width="5" height="5" border="0"></td>
<td background="картинка нижняя линия" valign="top"></td>
<td width="5"><img src="картинка правый нижний угол" width="5" height="5" border="0"></td>
</tr>
</table>

Код на CSS по сути является стилем оформления текстового блока, есть разные способы оформления блоков, от простого до фигурного. Более подробно - по ссылке: Делаем рамки и закругленные углы с помощью html и css.

kreol · 22.02.2011, 18:11

Цитата:

Сообщение от AlexZir

2) оформив в виде таблицы текстовые блоки при помощи CSS

есть только одна проблема придется использовать ccs3 а многие атрибуты в разных браузерах разные п.с. более старые браузеры вообще не увидят.

Black_Parrot · 22.02.2011, 21:44

Я делаю вместо угла - ячейку,.. и туда картинку ставлю с закруглённым углом...(Номер 1, как я понял)

Самый, наверное, правильный способ...

AlexZir · 24.02.2011, 05:41

kreol
А кто вас заставляет использовать именно CSS3? Насколько мне известно, только в CSS3 для рисования скругленных таблиц есть специальные команды. Никто не мешает вам указать серверу используемую на странице версию CSS

21.02.2011, 18:23	#1 (permalink)
Chervones Novel user Регистрация: 16.04.2010 Сообщений: 568 Записей в дневнике: 3 Сказал(а) спасибо: 1 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 1149	Округление углов таблицы в WEB-страницах. Как округлить углы таблицы в WEB-страницах? Используя CSS и другие технологии. Нужно примерно как в картинке. Изображения

22.02.2011, 10:18	#2 (permalink)
WOLF007 Member Регистрация: 24.02.2009 Сообщений: 806 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 563	яндекс вам в помощь.

24.02.2011, 05:41	#6 (permalink)
AlexZir support Регистрация: 19.08.2007 Адрес: Зея Сообщений: 15,797 Записей в дневнике: 71 Сказал(а) спасибо: 166 Поблагодарили 203 раз(а) в 86 сообщениях Репутация: 75760	kreol А кто вас заставляет использовать именно CSS3? Насколько мне известно, только в CSS3 для рисования скругленных таблиц есть специальные команды. Никто не мешает вам указать серверу используемую на странице версию CSS __________________ Убить всех человеков!

21.02.2011, 18:23
Helpmaster Member Регистрация: 08.03.2016 Сообщений: 0	По вашему вопросу так же нашлись совпадения, советую почитать Добавление таблицы на сайт с SMC Joomla Связать 2 Excel таблицы в Wordе

22.02.2011, 21:44	#5 (permalink)
Black_Parrot Member Регистрация: 05.01.2007 Сообщений: 7,067 Записей в дневнике: 6 Сказал(а) спасибо: 9 Поблагодарили 1 раз в 1 сообщении Репутация: 10522	Я делаю вместо угла - ячейку,.. и туда картинку ставлю с закруглённым углом...(Номер 1, как я понял) Самый, наверное, правильный способ...

Ads
Яндекс Member Регистрация: 31.10.2006 Сообщений: 40200 Записей в дневнике: 0 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 55070