спосіб перший
Скористаємося атрибутом cellspacing. що створює прозору рамку між всіх клітин таблиці. Потрібно лише пофарбувати її в певний колір, а зробити це можна за допомогою властивості bgcolor тегів table і td:
Проте, код дійсно виходить громіздким, тому на підході ...
спосіб другий
Ідея підглянена в исходниках Студії Лебедєва і принципово не відрізняється від попередньої: повністю включаємо вихідну таблицю в зовнішнє, для якої і прописуємо потрібний bgcolor.
Код значно полегшав, хвала кодерам Студії Лебедєва. Але і цей спосіб не позбавлений недоліків: спробуйте роздрукувати таку таблицю на принтері. Вийшло? Фигушки, тому що Internet Explorer за замовчуванням не друкує кольору і малюнки фону.
«Перш ніж роздрукувати цю сторінку, будь ласка, зайдіть в меню Сервіс. виберіть пункт Властивості оглядача, відкрийте вкладку Додатково та в розділі Друк відзначте галочку Друкувати кольори та малюнки фону. Дякуємо". Досить марити, краще поклоняємося в ніжки CSS:
спосіб третій
Дійсно, що нам заважає вказати кожному осередку властивість border?
td border: solid black 1px
>
А то, мої дорогі, що таким чином на місці стикання осередків вийде рамка товщиною в два пікселя. За специфікації. цю проблему має вирішувати властивість border-collapse із значенням collapse. В цьому випадку сусідні кордону повинні «ковтати» один одного. Залишимо це щастя нашим онукам, бо нині жоден браузер це властивість не підтримує. Звідси випливає ...
спосіб четвертий
По-науковому це називається поділом праці:
table.border border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
>
table.border td, table.border th border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
>
Все просто до неподобства. Кожна клітинка відповідає тільки за верхню і ліву рамки. Залишилося лише домалювати довгі праву і нижню межі. Це покладено на властивість border самої таблиці.
table.border td, table.border th border: 1px solid # CC0000
>