Моя первая таблица

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблицы в настоящее время стали неотъемлемой частью web страниц. Во времена создания сайтов только с помощью голого HTML кода таблицы использовались для верстки страниц. Таблица с невидимыми границами отлично представляла собой образ модульной сетки, в которой очень удобно размещать информацию, выровненную на странице. Но с появлением каскадных таблиц стилей CSS, языка программирования JavaScript необходимость в верстке страниц с помощью таблицы отпала и на смену табличной верстке пришла блочная верстка, которая имела множество преимуществ перед табличной.","type":"unstyled","key":"6fdn5"},{"data":{"image":{"id":"628747893e78be4dd6e00096"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7aj1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблицы в HTML состоят из строк и столбцов, пересечение строк и столбцов называют ячейкой таблицы. Ячейки могут содержать текстовую, графическую, медийную и другую информацию. С помощью таблиц удобно верстать части веб страниц для более красивого и эргономичного расположения блоков и модулей сайта.","type":"unstyled","key":"3ov9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":51,"style":"BOLD"},{"length":4,"offset":233,"style":"BOLD"},{"length":6,"offset":289,"style":"BOLD"},{"length":4,"offset":346,"style":"BOLD"}],"text":"Для добавления таблицы на страницу используется тег

, он служит контейнером для остальных тегов таблицы. Как уже говорили любая таблица состоит из строк и ячеек в строке, в HTML для обозначения строк используется тег , а для определения ячеек в строке используется тег . Так же для обозначения ячеек может применяться тег , в основном он используется как заголовки столбцов таблицы, так как текст содержащийся в данном теге будет выведен браузером жирным начертанием и выровненный по центру ячейки.","type":"unstyled","key":"e43cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример таблицы в HTML\n Моя первая таблица \n \n \n \n \n \n \n \n \n \n

Заголовок таблицы
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

\n \n","type":"blockquote","key":"677cl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":62,"style":"BOLD"}],"text":"Для написания заголовков таблицы используется специальный тег . По умолчанию заголовок созданный с помощью данного тега центрируется и размещается либо над таблицей либо под таблицей, за расположение заголовка отвечает атрибут ALIGN тега , данный атрибут может принимать значения TOP (сверху) или BOTTOM (снизу).","type":"unstyled","key":"3a1i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":" заголовок таблицы вверху","type":"unstyled","key":"3rfn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":" заголовок таблицы внизу","type":"unstyled","key":"c21oj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибуты тега ","type":"header-two","key":"9l92e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как и другие теги HTML тег добавления таблиц так же имеет свои специальные атрибуты.","type":"unstyled","key":"29ab2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"bgcolor — атрибут устанавливает цвет фона таблицы, в качестве значений используются цвета системы RGB, либо названия цвета.","type":"unstyled","key":"62mk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"align — задает выравнивание таблицы на странице, таблица может быть выровнена по левому краю, по центру и по правому краю. Если у таблицы задано выравнивание по левому или правому краю то текст на странице будет обтекать таблицу сбоку и снизу.","type":"unstyled","key":"eb86p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"width — устанавливает ширину таблицы, если ширина содержимого будет больше заданного размера то браузер будет пытаться уместить содержимое за счет форматирования текста, если данное действие невозможно (например в ячейке находится изображение), то атрибут ширины будет проигнорирован а ширина таблице будет соответствовать её содержимому.","type":"unstyled","key":"32be7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"border — устанавливает толщину границы в пикселях вокруг таблицы. При указании данного атрибута так же отображаются границы между ячейками.","type":"unstyled","key":"3bpmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"cellpadding — данный атрибут определяет расстояние между границей ячейки и её содержимым. Данный атрибут добавит пустое место к ячейке, тем самым увеличив ее размер. Применение данного атрибута необходимо чтобы рамка не слипалась с текстом, для лучшей читабельности и восприятия текста.","type":"unstyled","key":"70c84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"cellspacing — определяет расстояние между внешними границами ячеек. Если у таблицы задан атрибут border, то толщина границы в данном случае будет входить в общее значение расстояния.","type":"unstyled","key":"bk4gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"cols — указывает браузеру количество столбцов в таблице для подготовки к её отображению. Браузер начнет отображать таблицу только после её полной загрузки, а данный атрибут позволяет ускорить время вывода таблицы на экран.","type":"unstyled","key":"aphee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги , , .","type":"header-two","key":"f6khd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так же как и для всей страницы HTML таблицу можно разделить на три части: это заголовочная часть, основная часть и подвал таблицы. Для каждой части созданы свои определенные теги соответственно:","type":"unstyled","key":"6nnni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":" -Заголовочная часть таблицы, с помощью данного тега в таблице определяются заголовки столбцов, Строк в данной части может быть несколько и создаются они с помощью привычного тега , ячейки внутри строки создаются с помощью тега . Текст помещенный в данные контейнеры будет отформатирован автоматически по центру ячейки, полужирным начертанием.","type":"unstyled","key":"3a5vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":" — основная часть таблицы. Содержит основной набор строк и столбцов которые необходимо вывести браузеру.","type":"unstyled","key":"3c5qo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":" — помимо заголовка каждый столбец может иметь и подвал, например для подсчета итоговой суммы значений ячеек столбца или для пояснения или комментария к данному столбцу. Повал задается после определения заголовков столбцов, то есть сразу после тега .","type":"unstyled","key":"7296k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отличительная особенность данных тегов состоит в том что при создании таблицы в начале определяются заголовочная часть и подвал , а только после этого создается основная часть .","type":"unstyled","key":"egsch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример использования тегов структуры таблицы: Моя первая таблица

\n \n\n \n \n \n \n\n \n\n \n \n \n\n\n \n \n \n \n\n \n","type":"blockquote","key":"5bppj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа данного примера","type":"unstyled","key":"9lp8o"},{"data":{"image":{"id":"6287470bac2e1773bf0fda84"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4ohd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибуты тегов и

Заголовок таблицы

Заголовок столбца 1

Заголовок столбца 2

подвал столбца 1

подвал столбца 2

Ячейка 1

ячейка 2

","type":"header-two","key":"b8bcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги строк и теги ячеек так же имеют свои атрибуты специфичные в использовании.","type":"unstyled","key":"2gipf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"COLSPAN — Атрибут тега

? служит для объединения нескольких столбцов в один. Значением данного атрибута является количество столбцов которые необходимо соединить в один. Например: colspan=3, говорит о том, что данный столбец замещает собой три столбца таблицы (себя и еще два следующих), столбцы которые были соединены создавать данной строке больше не нужно.","type":"unstyled","key":"5k87f"},{"data":{"image":{"id":"6287470b87757c1460009868"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ПРИМЕР:\n \n \n \n \n \n \n \n

ячейка состоящая из соединенных 2 столбцов
Ячейка 2	ячейка 3

","type":"atomic:image","key":"av7qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"ROWSPAN — атрибут тега

позволяющий объединять строки таблицы для данного столбца. Значение атрибута является число строк в столбце необходимое для объединения.","type":"unstyled","key":"fv6p4"},{"data":{"image":{"id":"6287470b8b231a14f9597f4c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ПРИМЕР\n \n \n \n \n \n \n \n

ячейка состоящая из соединенных 2 строк	ячейка 2
	Ячейка 3

","type":"atomic:image","key":"el7gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"ALIGN — атрибут позволяет задать выравнивание текста в ячейке, может принимать три значения: по центру (center), по левому краю (left), по правому краю (right).","type":"unstyled","key":"fsi37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"VALIGN — позволяет установить вертикальное выравнивание содержимого ячейки. по умолчанию содержимое ячейки располагается по вертикали в центре. Может принимать четыре значения: по центру (middle), по верхнему краю (top), по нижнему краю (bottom), по базовой линии (baseline, при этом происходит привязка содержимого ячейки к одной линии).","type":"unstyled","key":"8c5it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"BGCOLOR — позволяет установить цвет фона отдельной ячейки таблицы. Может принимать значения в виде названия цвета, либо код в шестнадцатеричной системе счисления по модели RGB.","type":"unstyled","key":"8jpcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"CY5eFYLhRxR8UkVc74oC"}],"entityMap":{}},"mentions":[]}