Главная » HTML & CSS » Виды обрамления ячеек в таблице через стиль

Виды обрамления ячеек в таблице через стиль

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

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

<table style="width: 70%; height: 40%;" border="2px" cellspacing="10px" bordercolor="black">
<tbody>
<tr align="center">
<td>1) HTML</td>
<td style="border:4px solid;border-color:#FF0000">2) SOLID</td>
<td style="border:4px dashed;border-color:#FFFF00">3) DASHED</td>
</tr>
<tr align="center">
<td style="border:4px dotted;border-color:#00AA00">4) DOTTED</td>
<td style="border:4px double;border-color:#0000FF">5) DOUBLE</td>
<td style="border:4px groove;border-color:#FF55FF">6) GROOVE</td>
</tr>
<tr align="center">
<td style="border:4px ridge;border-color:#55FF55">7) RIDGE</td>
<td style="border:4px inset;border-color:#5555FF"> <img src='http://dbmast.ru/wp-includes/images/smilies/icon_cool.gif' alt='8)' class='wp-smiley' /> INSET</td>
<td style="border:4px outset;border-color:#FF5555">9) OUTSET</td>
</tr>
</tbody>
</table>

 
Дальше все зависит от вашей фантазии, ну и конечно от того ,что в результате вы хотите получить. Смело редактируйте параметры под свои нужды:

border:4px — толщина обрамления,
border-color: — цвет обрамления
dotted; ridge; double;  и  т.д  и  т.п  —  это все соответственно виды или формы обрамлений ячеек.

Все это старо как мир, но надеюсь всё же кому то будет полезен данный урок.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru