{"draftJsState":{"blocks":[{"data":{"image":{"id":"683b295f4a232500bbf72ae9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e7b7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f084v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приветствую, коллеги!, вот вам реально рабочий гайд по таблицам — такой, какой я сам хотел найти, когда только начинал верстать. Никакой воды, только конкретика.","type":"unstyled","key":"30vkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовая разметка (минимум для работы)","type":"header-two","key":"8mam8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 `","type":"unstyled","key":"83dfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Ячейка 1

Ячейка 2

`","type":"unstyled","key":"38d7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что получится:","type":"unstyled","key":"8ofh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ячейка 1 | Ячейка 2","type":"unstyled","key":"fojgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нормальная таблица с заголовками","type":"header-two","key":"ctmj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 `","type":"unstyled","key":"4cq4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Место	Игрок	Очки
1	Петров	120

`","type":"unstyled","key":"5rfb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто запомните:","type":"unstyled","key":"15r8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — для заголовков (жирный текст по центру)","type":"unordered-list-item","key":"5ifj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — обычные ячейки","type":"unordered-list-item","key":"a7jp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать рамки (без CSS)","type":"header-two","key":"cdqoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем атрибут border:","type":"unstyled","key":"e1fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 ","type":"unstyled","key":"b8g7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но лучше сразу учиться делать через CSS:","type":"unstyled","key":"4siln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49

","type":"unstyled","key":"5t7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объединение ячеек","type":"header-two","key":"46og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часто нужно в отчётах:","type":"unstyled","key":"66ljm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По горизонтали (colspan)\n\uD83D\uDC49 ","type":"ordered-list-item","key":"7qdg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По вертикали (rowspan)\n\uD83D\uDC49 ","type":"ordered-list-item","key":"mqee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полноценный пример (как в реальных проектах)","type":"header-two","key":"61sl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 `

Занимает две ячейки

Занимает две строки

","type":"unstyled","key":"eujgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Список сотрудников
№	ФИО	Должность
1	Иванов И.И.	Директор
Всего: 1 человек

`","type":"unstyled","key":"b19uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Частые косяки","type":"header-two","key":"5bqmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Кривые отступы — добавляйте cellpadding и cellspacing\n\uD83D\uDC49 ","type":"ordered-list-item","key":"19f6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Разъезжается вёрстка — фиксируйте ширину\n\uD83D\uDC49

","type":"ordered-list-item","key":"aiuth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Не видно границ — либо border, либо CSS","type":"ordered-list-item","key":"4la0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда не стоит использовать таблицы","type":"header-two","key":"aaps6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для всей страницы (устаревший подход)","type":"ordered-list-item","key":"d8jgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для сложной адаптивной вёрстки","type":"ordered-list-item","key":"413pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если можно обойтись div'ами","type":"ordered-list-item","key":"7ujs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но для данных — идеально!","type":"unstyled","key":"93p77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Личный лайфхак","type":"header-two","key":"4v0qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нужно быстро проверить таблицу — делаю так:","type":"unstyled","key":"205tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываю Codepen","type":"ordered-list-item","key":"cid8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставляю код","type":"ordered-list-item","key":"bogi6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрю результат","type":"ordered-list-item","key":"8clbd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За 30 секунд вижу все косяки. Попробуйте!","type":"unstyled","key":"11jca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"iAKdW3iCIedu7TSR4uAR"}],"entityMap":{}},"mentions":[]}