Таблиця складається з рядків і стовпців, комірок, які можуть містити текст і малюнки. Для додавання таблиці на веб-сторінку використовується тег <table>. Цей елемент служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і осередків, які задаються відповідно за допомогою тегів <tr> і <td>. Таблиця повинна містити хоча б одну клітинку. Допускається замість тега <td> використовувати тег <th>. Текст у клітинці, оформленої за допомогою тега <th>, відображається браузером шрифтом жирного накреслення і вирівнюється по центру осередки.
Стиль елемента при наведенні на нього курсору миші визначається за допомогою псевдокласу :hover, він через двокрапку додається до потрібного селектору. Для зміни стилю рядки таблиці, hover слід додати до селектору TR, і задавши бажаний колір фону через властивість background.
Для зміни прозорості елемента в CSS3 передбачено властивість opacity, його значення може змінюватися від 0 до 1. Нуль відповідає повній прозорості елемента, а одиниця, навпаки, непрозорості. Сучасні браузери цілком коректно працюють з цією властивістю за винятком браузера Internet Explorer, тому для нього доводиться використовувати спеціальне властивість filter зі значенням alpha(Opacity=X), де X може змінюватися від 0 до 100.
Атрибут spacing визначає відстань між осередками таблиці, воно особливо помітно при використанні кордонів навколо осередків або при заливці осередків кольором, який виділяється на тлі сторінки. Поєднання атрибутів cellpadding, cellspacing та border з різними значеннями дозволяє отримати різноманітні види таблиць. Але не хочеться повторювати для кожної таблиці одні і ті ж значення, а управляти ними через стилі.
Атрибут cellpadding тега <table> відповідає за поля навколо вмісту осередків. За рахунок полів текст у клітинці «налипає» на рамку і створюється порожній простір, що додає комфорт для читання.
Таблиці часто застосовуються для створення многоколонного макета. Кожна комірка виступає в ролі колонки, при цьому висота всіх колонок буде однакова, оскільки осередки взаємопов'язані. За замовчуванням вміст комірок вирівнюється по центру вертикалі, що не завжди зручно, особливо якщо вміст сусідніх комірок розрізняється за обсягом. При цьому вийде, що в одній колонці текст починається від верхнього краю, а в іншій по середині. Виправити це становище можна за допомогою атрибуту" valign="top" тега <td>.
Перший рядок таблиці зазвичай використовується для заголовка, в якій пишеться найменування стовпців. Для акцентування уваги на заголовку, рядок виділяють іншим фоном і кольором. З цією метою зазвичай застосовується тег <th>, який за своєю дією схожий на тег <td>, при цьому текст в комірці вирівнюється по її центру і пишеться жирним шрифтом. Для селектора TH допустимо задати власний стиль, що визначає оформлення рядка заголовка.
Вирівнювання таблиці працює лише в разі, коли явно задана її ширина і вона менше 100%. При дотриманні цих умов для селектора table слід задати властивість margin зі значенням auto. Воно означає, що відступи від таблиці обчислюються автоматично, це як раз і призводить до її центрування.
Як відомо, ширина таблиці визначається за допомогою атрибуту width тега <table>. При цьому допустимо встановлювати ширину у пікселях (width="400") або у відсотках (width="60%"). Через стилі ширину таблиць задавати зручніше, оскільки можна відразу ж визначити ширину декількох таблиць і змінювати їх в одному місці. До того ж дещо скорочується обсяг коду.
Для визначення ширини таблиці використовуйте стильове властивість width, застосовуючи його до селектору TABLE.