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

Изменение внешнего вида рамок таблиц и ячеек при помощи таблиц стилей (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;
}

Результат

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

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