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

38

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

В результаті не хитрих дій у нас повинне вийти наступне:

Оформление ячеек таблицы

Тепер давайте подивимося з допомогою чого досягається такий результат і як редагувати параметри обрамлення.
В першу чергу нам потрібен сам код створення таблиці на сторінку, виглядати він буде так:

<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='images/icon_cool.gif' alt='8)' class='wp-smiley' /> INSET</td>
<td style="border:4px outset;border-color:#FF5555">9) OUTSET</td>
</tr>
</tbody>
</table>
1) HTML 2) SOLID 3) DASHED
4) DOTTED 5) DOUBLE 6) GROOVE
7) RIDGE 8) INSET 9) OUTSET

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

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

Все це старе як світ, але сподіваюся все ж комусь буде корисний даний урок.

З Повагою, Андрій .

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