При створенні звичайної HTML-таблиці можна помітити, що по замовчуванню встановлюється певна відстань між її чарунками. Для наглядності створимо звичайну таблицю 2х3 та розфарбуємо кожну чарунку в різний колір:
<table>
<tr>
<td bgcolor=”fdecab”>12345</td>
<td bgcolor=”faecdb”>23456</td>
<td bgcolor=”ddeccb”>34567</td>
</tr><tr>
<td bgcolor=”aaecdb”>45678</td>
<td bgcolor=”7aecdb”>56789</td>
<td bgcolor=”aa84db”>67890</td>
</tr>
</table>
Ось як це виглядатиме в браузері:
Часто, для дизайну, цю відстань потрібно збільшити, зменшити, або ж взагалі забрати. Робиться це за допомогою атрибута cellspacing, який записується в тег <table>.
Приклади:
Аналогом атрибуту cellspacing=”0” в CSS є
table {border-collapse: collapse;}
а аналогом атрибута cellspacing з значенням більше нуля є
table {border-collapse: separate; border-spacing: 5px;}
Тепер спробуємо створити подібну таблицю, наповненням якої буде порізаний малюнок. Фон, для наглядності теж задамо різним, а cellspacing виставимо в нуль:
<table cellspacing=”0″>
<tr>
<td bgcolor=”fdecab”><img src=”./p1.png” /></td>
<td bgcolor=”faecdb”><img src=”./p2.png” /></td>
</tr><tr>
<td bgcolor=”aaecdb”><img src=”./p3.png” /></td>
<td bgcolor=”7aecdb”><img src=”./p4.png” /></td>
</tr>
</table>
Бачимо, що хоч між чарунками відстані вже немає (ввесь вміст між картинками повністю заповнено фоном кожної чарунки), та все ж малюнок не суцільний. Так відбувається, через встановлений по замовчуванню відступ (відстань) між межею чарунки та наповненням. Цей відступ задається атрибутом cellpadding в тезі <table>. Для того, щоб в нашому прикладі картинка вийшла суцільною, потрібно просто встановити даний атрибут рівним нулю:
Аналогом атрибуту cellpadding в CSS є
table td {padding: 3px;}
Також різні версії деяких браузерів (зокрема деякі версії IE) можуть самовільно встановити якийсь з проміжків, навіть при вказаних cellspacing=”0” та cellpadding=”0”, або ж можуть підсунути малюнок в чарунці в якусь сторону та ін. Часто в таких ситуаціях допомагає додаткове встановлення розмірів кожної з чарунок згідно з розмірами картинки, яка в неї вставляється.