{"draftJsState":{"blocks":[{"data":{"image":{"id":"60b000189d6cfc094e5cdb68"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1eblt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы научимся создавать таблицы и производить над ними различные операции.","type":"unstyled","key":"es2su"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все начинается с тегов и

, между которыми будет помещена вся \"табличная\" информация.","type":"unstyled","key":"9jjmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"lhs2"},{"data":{"image":{"id":"60ad522054881146f4ac07ac"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что вводим.","type":"atomic:image","key":"du4o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d6aue"},{"data":{"image":{"id":"60ad51ddbb525d42643d7527"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что получаем.","type":"atomic:image","key":"1qmdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание на теги и . Первый обозначает начало новой строки таблицы, а второй - ее ячейку. Вся \"табличная\" информация описывается построчно.","type":"unstyled","key":"crrku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к заголовкам.","type":"unstyled","key":"31qfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь тоже все довольно просто, нужно лишь добавить немного кода к уже имеющемуся.","type":"unstyled","key":"tq94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"17rnu"},{"data":{"image":{"id":"60ad5a3b54881146f4c2f8be"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что вводим.","type":"atomic:image","key":"ifif"},{"data":{"image":{"id":"60ad5a4f9943417b35e00ffc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что получаем. В данном случае это таблица сложения.","type":"atomic:image","key":"89jbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь у нас появляется новый тег , именно с его помощью мы создаем заголовки для нашей таблицы. Как видно из примера внутри открывающего тега прописывается специальный атрибут scope. Он может принимать два значения: col (заголовок в столбце таблицы) и rom (заголовок в строке таблицы). Обратите внимание на то, что даже пустая ячейка должна быть представлена тегом или , в противном случае отображение в браузере будет некорректным.","type":"unstyled","key":"91hik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полезный совет: в составлении подобных таблиц легко запутаться, поэтому я рекомендую на первый раз сделать все в точности как у меня. Вы поймете что к чему относится и потом сможете сделать что-то свое.","type":"blockquote","key":"52f5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы постараемся объединить столбцы. В этом нам поможет атрибут colspan, который будет находиться внутри открывающего тега (или ).","type":"unstyled","key":"7ekfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"7187v"},{"data":{"image":{"id":"60aff42f9d6cfc094e3c618c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что вводим. Числовое значение рядом с атрибутом указывает на количество объединенных ячеек.","type":"atomic:image","key":"25as4"},{"data":{"image":{"id":"60aff5556a1bd73dc57bf8ac"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что получаем.","type":"atomic:image","key":"b9pm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работаем над объединением строк. В этом нам поможет атрибут rowspan, который будет находиться внутри открывающего тега (или ).","type":"unstyled","key":"bm0v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"4jkgn"},{"data":{"image":{"id":"60aff56fd606f666c468af5e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что вводим. Числовое значение рядом с атрибутом указывает на количество объединенных ячеек.","type":"atomic:image","key":"do7cu"},{"data":{"image":{"id":"60aff588e7067f5d88f7ed2c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То что получаем.","type":"atomic:image","key":"c4kn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На пример со строками прошу обратить особое внимание. В последнем элементе содержится только три элемента, а в предыдущем четыре. Это произошло потому, что в элементе , содержащем текст \"Фильмы\", указан атрибут rowspan, благодаря которому он \"поглотил\" нижерасположенную ячейку.","type":"unstyled","key":"fq9ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание!","type":"unstyled","key":"76a71"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":41}],"inlineStyleRanges":[],"text":"Если статья оказалась полезной предлагаю подписаться на канал и следить за выходом новых интересных статей)","type":"unstyled","key":"26hjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Bf4NBkTApUeKsnRqxCoU"}],"entityMap":{"0":{"data":{"href":"https://zen.yandex.ru/id/607b3cb2dca3153cbc0ef00f","url":"https://zen.yandex.ru/id/607b3cb2dca3153cbc0ef00f"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}