Проста таблиця

Проста таблиця відрізняється від того, що в ній не використовується кольорове оформлення, а блоки даних відокремлюються лініями.

Почнемо з розглядання таблиці без меж, при цьому її контур на веб-сторінці формується горизонтальною лінією зверху і знизу від таблиці.

Для додавання ліній використовуємо стилістичні властивості border-top і border-bottom, які встановлюють лінію певної товщини зверху та знизу від елемента. Застосовуючи ці властивості до селектора TABLE, отримаємо вигляд таблиці. Лінію знизу для заголовків клітинок вказуємо, додаючи border-bottom до селектора TH, як показано в прикладі 1.

У даному прикладі змінюється вирівнювання вмісту клітинок <th> по лівому краю, оскільки спочатку для таких клітинок воно було встановлено по центру.

Наступний варіант таблиці ще простіший та містить лише дві лінії, які розділяють вміст таблиці на три блоки. Перший блок містить назви дорогоцінних каменів, другий - роки, а третій - набір чисел.

Горизонтальну лінію створюємо, додаючи стилістичну властивість border-bottom до селектора TH, як це було показано в прикладі 1. Для вертикальної лінії створюємо новий клас, назвемо його vl, який встановлює лінію справа, і додаємо клас до певних клітинок (приклад 2).