Убираем расстояние между ячейками таблицы и придаем цвет рамки

Вы уже знаете, что рамка вокруг таблицы задается атрибутом border для тега <table>, задав значение border="0", рамка вокруг таблицы будет не видна. Для примера возьмем таблицу которая была сделана на предыдущей страницы и изменим значение border задав его 0.

  <table border="0" width="400" height="200">
<tr bgcolor="#CCCCFF" align="center">
<td colspan="3"> 1х1 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF" rowspan="3"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
</tr>
<tr bgcolor="#00FFFF">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
</tr>
</table>

Задав значение border="0" рамка таблицы стала не видна, но расстояние между ячейками по прежнему осталось.

1х1
2х1

2х2

2х3
3х1
3х2
4х1 4х2

Для того чтобы убрать или наоборот увеличить расстояние между ячейками используется атрибут cellspacing - определяет расстояние между ячейками таблицы, значение параметра задается в пикселях.

  <table border="0" width="400" height="200" cellspacing="0">
<tr bgcolor="#CCCCFF" align="center">
<td colspan="3"> 1х1 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF" rowspan="3"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
</tr>
<tr bgcolor="#00FFFF">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
</tr>
</table>

Получится такая вот таблица без рамки и без расстояния между ячейками.

1х1
2х1

2х2

2х3
3х1
3х2
4х1 4х2

Кроме атрибута cellspacing есть еще атрибут cellpadding который определяет расстояние между рамкой ячейки и данными (текст, картинка и т.д.) внутри ячейки, значение задается в пикселях. В качестве примера возьмем простейшую таблицу 1х1.

  <table border="3" align="Center">
<tr>
<td>Простйшая таблица 1х1</td>
</tr>
</table>


Простейшая таблица 1х1

Теперь вписываем в код таблицы атрибут cellpadding со значением 10 пикселей.

  <table border="3" align="Center" cellpadding="10">
<tr>
<td>Простйшая таблица 1х1</td>
</tr>
</table>

Получили таблицу содержимое которой выровнено от левого, правого, верхнего и нижнего краев ячейки на 10 пикселей.

Простейшая таблица 1х1

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

  <table border="3" width="400" height="200" align="center" cellspacing="0" bordercolor="#006600">
<tr bgcolor="#CCCCFF" align="center">
<td colspan="3"> 1х1 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF" rowspan="3"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
</tr>
<tr bgcolor="#00FFFF">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
</tr>
</table>


1х1
2х1

2х2

2х3
3х1
3х2
4х1 4х2

В данной записи видно, что атрибуту cellspacing присвоено значение 0, изменив значение к примеру на 5, то вокруг каждой ячейки появится белая полоска толщиной 5 пикселей.
Скопируйте код данной записи себе в блокнот и попробуйте самостоятельно менять значения.



Вернуться назад Перейти к следующей странице
2009 - 2012г. andron09_73@mail.ru
  Продажа генераторов, недорого - дизельные генераторы. Дизельные генераторы AKSA.   Туры со скидкой! Отдыхай-Выгодно: кипр туры. Горящие туры! Очень горящие туры.   репродукции картин современных художников . Клапан предохранительный продажа. Клапан предохранительный farris россия.