Технический форум

Технический форум (http://www.tehnari.ru/)
-   Изготовление сайтов (http://www.tehnari.ru/f129/)
-   -   Округление углов таблицы в WEB-страницах. (http://www.tehnari.ru/f129/t47853/)

Chervones 21.02.2011 18:23

Округление углов таблицы в WEB-страницах.
 
Вложений: 1
Как округлить углы таблицы в 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 (Сообщение 471718)
2) оформив в виде таблицы текстовые блоки при помощи CSS

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

Black_Parrot 22.02.2011 21:44

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

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

AlexZir 24.02.2011 05:41

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


Часовой пояс GMT +4, время: 10:49.

Powered by vBulletin® Version 4.5.3
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.