Изменение внешнего вида рамок таблиц и ячеек при помощи таблиц стилей (CSS)
Точно также можно изменять вид рамки при верстке страниц блоками (div'ами)
<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>
Параметр border позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.
Для изучения CSS рекомендую скачать "Справочник по CSS" написанный Владом Мержевичем.
#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 |