HTML-pedia
Веб-строительство

Сообщество
Веб-потребителей




Вид рамок таблиц и ячеек

Изменение внешнего вида рамок таблиц и ячеек при помощи таблиц стилей (CSS)

HTML

<table id="table1">
<tr>
<td class="td1">текст</td>
<td class="td2">текст</td>
<td class="td3">текст</td>
</tr>
<tr>
<td class="td4">текст</td>
<td class="td5">текст</td>
<td class="td6">текст</td>
</tr>
<tr>
<td class="td7">текст</td>
<td class="td8">текст</td>
<td class="td9">текст</td>
</tr>
</table>

CSS

Параметр border позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.


#table1 {
margin : 0 auto;
padding : 0;
width:70%;
border-left:2px solid green;
border-right:2px solid green;
border-top:2px dotted blue;
border-bottom:2px dotted blue;
}
.td1,.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9 {
margin : 0;
padding : 7px 9px 7px 9px;
}

.td1 {
border-bottom:1px dotted red;
}
.td2 {
border-left:1px solid green;
border-right:1px solid green;
border-bottom:1px dotted red;
}
.td3 {
border-bottom:1px dotted red;
}
.td4 {
border-bottom:1px dotted red;
}
.td5 {
border-left:1px solid green;
border-right:1px solid green;
border-bottom:1px dotted red;
}
.td6 {
border-bottom:1px dotted red;
}
.td8 {
border-left:1px solid green;
border-right:1px solid green;
}

Результат

текст текст текст
текст текст текст
текст текст текст


Вид рамки в зависимости от стиля и толщины границы


1 пиксел 3 пиксела 5 пикселов 7 пикселов

dotted

dotted

dotted

dotted

dashed

dashed

dashed

dashed

solid

solid

solid

solid

double

double

double

double

groove

groove

groove

groove

ridge

ridge

ridge

ridge

inset

inset

inset

inset

outset

outset

outset

outset


Точно также можно изменять вид рамки при верстке страниц блоками (div'ами)



Хостинг от uCoz