Приветствую, коллеги!, вот вам реально рабочий гайд по таблицам — такой, какой я сам хотел найти, когда только начинал верстать. Никакой воды, только конкретика.
Базовая разметка (минимум для работы)
👉 `<table>
<tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>`
Что получится:
Ячейка 1 | Ячейка 2
Нормальная таблица с заголовками
👉 `<table>
<tr> <th>Место</th> <th>Игрок</th> <th>Очки</th> </tr> <tr> <td>1</td> <td>Петров</td> <td>120</td> </tr> </table>`
Просто запомните:
- <th> — для заголовков (жирный текст по центру)
- <td> — обычные ячейки
Как сделать рамки (без CSS)
Добавляем атрибут border:
👉 <table border="1">
Но лучше сразу учиться делать через CSS:
👉 <table style="border: 1px solid #000;">
Объединение ячеек
Часто нужно в отчётах:
- По горизонтали (colspan)
👉 <td colspan="2">Занимает две ячейки</td> - По вертикали (rowspan)
👉 <td rowspan="2">Занимает две строки</td>
Полноценный пример (как в реальных проектах)
👉 `<table>
<caption>Список сотрудников</caption> <thead> <tr> <th>№</th> <th>ФИО</th> <th>Должность</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Иванов И.И.</td> <td>Директор</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Всего: 1 человек</td> </tr> </tfoot> </table>`
Частые косяки
- Кривые отступы — добавляйте cellpadding и cellspacing
👉 <table cellpadding="5" cellspacing="0"> - Разъезжается вёрстка — фиксируйте ширину
👉 <table style="width: 100%;"> - Не видно границ — либо border, либо CSS
Когда не стоит использовать таблицы
- Для всей страницы (устаревший подход)
- Для сложной адаптивной вёрстки
- Если можно обойтись div'ами
Но для данных — идеально!
Личный лайфхак
Если нужно быстро проверить таблицу — делаю так:
- Открываю Codepen
- Вставляю код
- Смотрю результат
За 30 секунд вижу все косяки. Попробуйте!