{"id":35520,"date":"2025-03-28T10:55:45","date_gmt":"2025-03-28T08:55:45","guid":{"rendered":"https:\/\/goit.global\/?post_type=articles&#038;p=35520"},"modified":"2026-04-30T14:32:02","modified_gmt":"2026-04-30T11:32:02","slug":"verstka-tablyts-chto-to-takoe-y-hde-tomu-obuchaiut","status":"publish","type":"articles","link":"https:\/\/goit.global\/ua-ru\/articles\/verstka-tablyts-chto-eto-takoe-y-hde-etomu-obuchaiut\/","title":{"rendered":"\u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446: \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u0433\u0434\u0435 \u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u0443\u0447\u0430\u044e\u0442"},"content":{"rendered":"<p>HTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &ndash; &#1086;&#1076;&#1080;&#1085; &#1080;&#1079; &#1089;&#1090;&#1072;&#1088;&#1077;&#1081;&#1096;&#1080;&#1093; &#1080; &#1085;&#1072;&#1076;&#1077;&#1078;&#1085;&#1099;&#1093; &#1089;&#1087;&#1086;&#1089;&#1086;&#1073;&#1086;&#1074; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1085;&#1086;&#1081; &#1088;&#1072;&#1079;&#1084;&#1077;&#1090;&#1082;&#1080; &#1076;&#1072;&#1085;&#1085;&#1099;&#1093; &#1085;&#1072; &#1089;&#1072;&#1081;&#1090;&#1077;. &#1042;&#1077;&#1088;&#1089;&#1090;&#1082;&#1072; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094; <a href=\"https:\/\/goit.global\/ua\/glossary\/html-hypertext-markup-language\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">HTML<\/a> &#1087;&#1086;&#1079;&#1074;&#1086;&#1083;&#1103;&#1077;&#1090; &#1089;&#1086;&#1079;&#1076;&#1072;&#1074;&#1072;&#1090;&#1100; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1085;&#1099;&#1077; &#1086;&#1073;&#1083;&#1072;&#1089;&#1090;&#1080; &#1076;&#1083;&#1103; &#1087;&#1088;&#1077;&#1076;&#1089;&#1090;&#1072;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1090;&#1077;&#1082;&#1089;&#1090;&#1086;&#1074;&#1086;&#1081; &#1080; &#1095;&#1080;&#1089;&#1083;&#1086;&#1074;&#1086;&#1081; &#1080;&#1085;&#1092;&#1086;&#1088;&#1084;&#1072;&#1094;&#1080;&#1080;.<\/p>\n<p>&#1053;&#1086; &#1082;&#1072;&#1082; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1086; &#1089;&#1074;&#1077;&#1088;&#1089;&#1090;&#1072;&#1090;&#1100; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1091; &#1089; &#1091;&#1095;&#1077;&#1090;&#1086;&#1084; <a href=\"https:\/\/goit.global\/ua\/glossary\/\" target=\"_blank\" rel=\"noopener\">&#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1082;&#1080; HTML<\/a> &#1080; CSS-&#1089;&#1090;&#1080;&#1083;&#1080;&#1079;&#1072;&#1094;&#1080;&#1080;? &#1048; &#1075;&#1076;&#1077; &#1101;&#1090;&#1086;&#1084;&#1091; &#1073;&#1099;&#1089;&#1090;&#1088;&#1086; &#1080; &#1083;&#1077;&#1075;&#1082;&#1086; &#1086;&#1073;&#1091;&#1095;&#1080;&#1090;&#1100;&#1089;&#1103;, &#1072; &#1075;&#1083;&#1072;&#1074;&#1085;&#1086;&#1077; &ndash; &#1085;&#1077;&#1076;&#1086;&#1088;&#1086;&#1075;&#1086;? &#1042; &#1101;&#1090;&#1086;&#1084; &#1084;&#1072;&#1090;&#1077;&#1088;&#1080;&#1072;&#1083;&#1077; &#1084;&#1099; &#1088;&#1072;&#1089;&#1089;&#1084;&#1086;&#1090;&#1088;&#1080;&#1084; &#1074;&#1089;&#1077; &#1074;&#1072;&#1078;&#1085;&#1099;&#1077; &#1072;&#1089;&#1087;&#1077;&#1082;&#1090;&#1099; &#1080; &#1086;&#1090;&#1074;&#1077;&#1090;&#1080;&#1084; &#1085;&#1072; &#1089;&#1072;&#1084;&#1099;&#1077; &#1095;&#1072;&#1089;&#1090;&#1086; &#1079;&#1072;&#1076;&#1072;&#1074;&#1072;&#1077;&#1084;&#1099;&#1077; &#1074;&#1086;&#1087;&#1088;&#1086;&#1089;&#1099;.<\/p>\n<h2>&#1063;&#1090;&#1086; &#1090;&#1072;&#1082;&#1086;&#1077; HTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1080; &#1079;&#1072;&#1095;&#1077;&#1084; &#1086;&#1085;&#1080; &#1085;&#1091;&#1078;&#1085;&#1099;<\/h2>\n<p>\nHTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1087;&#1088;&#1077;&#1076;&#1085;&#1072;&#1079;&#1085;&#1072;&#1095;&#1077;&#1085;&#1099; &#1076;&#1083;&#1103; &#1087;&#1088;&#1077;&#1076;&#1089;&#1090;&#1072;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1090;&#1072;&#1073;&#1083;&#1080;&#1095;&#1085;&#1099;&#1093; &#1076;&#1072;&#1085;&#1085;&#1099;&#1093;. &#1054;&#1085;&#1080; &#1087;&#1086;&#1084;&#1086;&#1075;&#1072;&#1102;&#1090; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100; &#1080;&#1085;&#1092;&#1086;&#1088;&#1084;&#1072;&#1094;&#1080;&#1102; &#1080; &#1086;&#1073;&#1077;&#1089;&#1087;&#1077;&#1095;&#1080;&#1074;&#1072;&#1102;&#1090; &#1091;&#1076;&#1086;&#1073;&#1086;&#1095;&#1080;&#1090;&#1072;&#1077;&#1084;&#1086;&#1089;&#1090;&#1100; &#1082;&#1086;&#1085;&#1090;&#1077;&#1085;&#1090;&#1072;. &#1043;&#1088;&#1072;&#1084;&#1086;&#1090;&#1085;&#1072;&#1103; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1072; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094; <a href=\"https:\/\/goit.global\/ua-ru\/articles\/html-y-css-chto-to-komu-y-dlia-cheho-nuzhno\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> &#1087;&#1086;&#1079;&#1074;&#1086;&#1083;&#1103;&#1077;&#1090; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1086; &#1086;&#1090;&#1086;&#1073;&#1088;&#1072;&#1078;&#1072;&#1090;&#1100; &#1076;&#1072;&#1085;&#1085;&#1099;&#1077; &#1085;&#1072; &#1083;&#1102;&#1073;&#1099;&#1093; &#1091;&#1089;&#1090;&#1088;&#1086;&#1081;&#1089;&#1090;&#1074;&#1072;&#1093; &#1080; &#1072;&#1076;&#1072;&#1087;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100; &#1080;&#1093; &#1087;&#1086;&#1076; &#1089;&#1090;&#1080;&#1083;&#1080;&#1089;&#1090;&#1080;&#1082;&#1091; &#1089;&#1072;&#1081;&#1090;&#1072;.\n<\/p>\n<h2>&#1054;&#1089;&#1085;&#1086;&#1074;&#1099; &#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1082;&#1080; HTML &#1087;&#1088;&#1080; &#1089;&#1086;&#1079;&#1076;&#1072;&#1085;&#1080;&#1080; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;<\/h2>\n<p>\n&#1055;&#1088;&#1080; &#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1077; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1074; HTML &#1074;&#1072;&#1078;&#1085;&#1086; &#1089;&#1086;&#1073;&#1083;&#1102;&#1076;&#1072;&#1090;&#1100; &#1087;&#1088;&#1080;&#1085;&#1094;&#1080;&#1087;&#1099; &#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1086;&#1081; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1080;. &#1069;&#1090;&#1086; &#1087;&#1086;&#1079;&#1074;&#1086;&#1083;&#1103;&#1077;&#1090; &#1087;&#1086;&#1080;&#1089;&#1082;&#1086;&#1074;&#1099;&#1084; &#1089;&#1080;&#1089;&#1090;&#1077;&#1084;&#1072;&#1084; &#1080; &#1074;&#1089;&#1087;&#1086;&#1084;&#1086;&#1075;&#1072;&#1090;&#1077;&#1083;&#1100;&#1085;&#1099;&#1084; &#1090;&#1077;&#1093;&#1085;&#1086;&#1083;&#1086;&#1075;&#1080;&#1103;&#1084; &#1082;&#1086;&#1088;&#1088;&#1077;&#1082;&#1090;&#1085;&#1086; &#1080;&#1085;&#1090;&#1077;&#1088;&#1087;&#1088;&#1077;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100; &#1076;&#1072;&#1085;&#1085;&#1099;&#1077;.<\/p>\n<p>&#1042; &#1073;&#1072;&#1079;&#1086;&#1074;&#1086;&#1084; &#1074;&#1080;&#1076;&#1077; HTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1072; &#1089;&#1086;&#1089;&#1090;&#1086;&#1080;&#1090; &#1080;&#1079;:\n<\/p>\n<ul>\n<li>&#1090;&#1077;&#1075;&#1072; <a href=\"https:\/\/goit.global\/ua\/glossary\/tag-table\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">&lt;table&gt;<\/a> (&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1072;) &ndash; &#1086;&#1073;&#1097;&#1080;&#1081; &#1082;&#1086;&#1085;&#1090;&#1077;&#1081;&#1085;&#1077;&#1088; &#1076;&#1083;&#1103; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099;;<\/li>\n<li>&#1090;&#1077;&#1075;&#1072; <a href=\"https:\/\/goit.global\/ua\/glossary\/table-row-tag\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">&lt;tr&gt;<\/a> (&#1089;&#1090;&#1088;&#1086;&#1082;&#1072;) &ndash; &#1089;&#1086;&#1079;&#1076;&#1072;&#1077;&#1090; &#1086;&#1090;&#1076;&#1077;&#1083;&#1100;&#1085;&#1091;&#1102; &#1089;&#1090;&#1088;&#1086;&#1082;&#1091;;<\/li>\n<li>&#1090;&#1077;&#1075;&#1072; <a href=\"https:\/\/goit.global\/ua\/glossary\/table-cell-tag\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">&lt;td&gt;<\/a> (&#1103;&#1095;&#1077;&#1081;&#1082;&#1072;) &ndash; &#1089;&#1086;&#1079;&#1076;&#1072;&#1077;&#1090; &#1086;&#1073;&#1099;&#1095;&#1085;&#1091;&#1102; &#1103;&#1095;&#1077;&#1081;&#1082;&#1091;;<\/li>\n<li>&#1090;&#1077;&#1075;&#1072; <a href=\"https:\/\/goit.global\/ua\/glossary\/table-title-tag\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">&lt;th&gt;<\/a> (&#1079;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1086;&#1082;) &ndash; &#1103;&#1095;&#1077;&#1081;&#1082;&#1072; &#1079;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1082;&#1072;.<\/li>\n<\/ul>\n<p>\n&#1055;&#1088;&#1080;&#1084;&#1077;&#1088; &#1073;&#1072;&#1079;&#1086;&#1074;&#1086;&#1081; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1099; HTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099;:<\/p>\n<p><strong>&lt;table&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;&#1047;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1086;&#1082; 1&lt;\/th&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;&#1047;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1086;&#1082; 2&lt;\/th&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;\/tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&#1071;&#1095;&#1077;&#1081;&#1082;&#1072; 1&lt;\/td&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&#1071;&#1095;&#1077;&#1081;&#1082;&#1072; 2&lt;\/td&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;\/tr&gt;<\/strong><\/p>\n<p><strong>&lt;\/table&gt;<\/strong><\/p>\n<h2>&#1050;&#1072;&#1082; &#1089;&#1074;&#1077;&#1088;&#1089;&#1090;&#1072;&#1090;&#1100; &#1089;&#1083;&#1086;&#1078;&#1085;&#1099;&#1077; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &ndash; rowspan\/colspan<\/h2>\n<p>\n&#1044;&#1083;&#1103; &#1088;&#1072;&#1073;&#1086;&#1090;&#1099; &#1089;&#1086; &#1089;&#1083;&#1086;&#1078;&#1085;&#1099;&#1084;&#1080; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1072;&#1084;&#1080; HTML &#1085;&#1077;&#1086;&#1073;&#1093;&#1086;&#1076;&#1080;&#1084;&#1086; &#1091;&#1095;&#1080;&#1090;&#1099;&#1074;&#1072;&#1090;&#1100; &#1074;&#1083;&#1086;&#1078;&#1077;&#1085;&#1085;&#1086;&#1089;&#1090;&#1100; &#1089;&#1090;&#1088;&#1086;&#1082; &#1080; &#1103;&#1095;&#1077;&#1077;&#1082; &#1074; HTML5-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1072;&#1093;, &#1072; &#1090;&#1072;&#1082;&#1078;&#1077; &#1087;&#1088;&#1080;&#1084;&#1077;&#1085;&#1103;&#1090;&#1100; <a href=\"https:\/\/goit.global\/ua\/glossary\/table-cell-tag\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">rowspan<\/a> &#1080; <a href=\"https:\/\/goit.global\/ua\/glossary\/table-title-tag\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">colspan<\/a>. &#1069;&#1090;&#1086; &#1086;&#1089;&#1086;&#1073;&#1077;&#1085;&#1085;&#1086; &#1087;&#1086;&#1083;&#1077;&#1079;&#1085;&#1086; &#1087;&#1088;&#1080; &#1089;&#1086;&#1079;&#1076;&#1072;&#1085;&#1080;&#1080; &#1090;&#1072;&#1082;&#1080;&#1093; &#1089;&#1083;&#1086;&#1078;&#1085;&#1099;&#1093; HTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094;, &#1082;&#1072;&#1082;, &#1085;&#1072;&#1087;&#1088;&#1080;&#1084;&#1077;&#1088;, &#1087;&#1088;&#1080; &#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1077; &#1087;&#1088;&#1072;&#1081;&#1089;-&#1083;&#1080;&#1089;&#1090;&#1086;&#1074; &#1080;&#1083;&#1080; &#1088;&#1072;&#1089;&#1087;&#1080;&#1089;&#1072;&#1085;&#1080;&#1081;.<\/p>\n<p>&#1055;&#1088;&#1080;&#1084;&#1077;&#1088; &#1089;&#1083;&#1086;&#1078;&#1085;&#1086;&#1081; &#1090;&#1072;&#1073;&#1083;&#1080;&#1095;&#1085;&#1086;&#1081; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1080; HTML:<\/p>\n<p><strong>&lt;table&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;&#1047;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1086;&#1082; 1&lt;\/th&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;th colspan=&#8221;2&#8243;&gt;&#1047;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1086;&#1082; 2&lt;\/th&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;\/tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td rowspan=&#8221;2&#8243;&gt;&#1071;&#1095;&#1077;&#1081;&#1082;&#1072; 1&lt;\/td&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&#1071;&#1095;&#1077;&#1081;&#1082;&#1072; 2&lt;\/td&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&#1071;&#1095;&#1077;&#1081;&#1082;&#1072; 3&lt;\/td&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;\/tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;tr&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan=&#8221;2&#8243;&gt;&#1054;&#1073;&#1098;&#1077;&#1076;&#1080;&#1085;&#1077;&#1085;&#1085;&#1072;&#1103; &#1103;&#1095;&#1077;&#1081;&#1082;&#1072;&lt;\/td&gt;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&lt;\/tr&gt;<\/strong><\/p>\n<p><strong>&lt;\/table&gt;<\/strong>\n<\/p>\n<h2>&#1057;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1082;&#1072; HTML &#1080; &#1089;&#1090;&#1080;&#1083;&#1080;&#1079;&#1072;&#1094;&#1080;&#1103; CSS<\/h2>\n<p>\n&#1044;&#1083;&#1103; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1086;&#1081; &#1088;&#1072;&#1073;&#1086;&#1090;&#1099; &#1080; &#1091;&#1076;&#1086;&#1073;&#1089;&#1090;&#1074;&#1072; &#1095;&#1090;&#1077;&#1085;&#1080;&#1103; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1099; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094; HTML &#1085;&#1077;&#1086;&#1073;&#1093;&#1086;&#1076;&#1080;&#1084;&#1086; &#1089;&#1086;&#1073;&#1083;&#1102;&#1076;&#1072;&#1090;&#1100; &#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1091;&#1102; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1091;. &#1044;&#1083;&#1103; &#1091;&#1083;&#1091;&#1095;&#1096;&#1077;&#1085;&#1080;&#1103; &#1074;&#1085;&#1077;&#1096;&#1085;&#1077;&#1075;&#1086; &#1074;&#1080;&#1076;&#1072; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1080;&#1089;&#1087;&#1086;&#1083;&#1100;&#1079;&#1091;&#1077;&#1090;&#1089;&#1103; <a href=\"https:\/\/goit.global\/ua-ru\/articles\/html-y-css-chto-to-komu-y-dlia-cheho-nuzhno\/\" target=\"_blank\" rel=\"noopener\">&#1089;&#1090;&#1080;&#1083;&#1080;&#1079;&#1072;&#1094;&#1080;&#1103; CSS<\/a>. &#1042;&#1072;&#1078;&#1085;&#1086; &#1087;&#1088;&#1080;&#1084;&#1077;&#1085;&#1103;&#1090;&#1100; &#1089;&#1090;&#1080;&#1083;&#1080; &#1076;&#1083;&#1103; &#1091;&#1083;&#1091;&#1095;&#1096;&#1077;&#1085;&#1080;&#1103; &#1095;&#1080;&#1090;&#1072;&#1077;&#1084;&#1086;&#1089;&#1090;&#1080; &#1080; &#1072;&#1076;&#1072;&#1087;&#1090;&#1080;&#1074;&#1085;&#1086;&#1089;&#1090;&#1080;.<\/p>\n<p>&#1053;&#1077;&#1082;&#1086;&#1090;&#1086;&#1088;&#1099;&#1077; &#1087;&#1086;&#1083;&#1077;&#1079;&#1085;&#1099;&#1077; CSS-&#1087;&#1088;&#1080;&#1077;&#1084;&#1099; &#1076;&#1083;&#1103; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;:<\/p>\n<p><strong>table {<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;width: 100%; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <\/strong><em>\/* &#1056;&#1072;&#1089;&#1090;&#1103;&#1075;&#1080;&#1074;&#1072;&#1077;&#1090; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1091; &#1085;&#1072; &#1074;&#1089;&#1102; &#1096;&#1080;&#1088;&#1080;&#1085;&#1091; &#1082;&#1086;&#1085;&#1090;&#1077;&#1081;&#1085;&#1077;&#1088;&#1072; *\/<\/em><\/p>\n<p><strong>&nbsp;&nbsp;border-collapse: collapse; <\/strong><em>\/* &#1054;&#1073;&#1098;&#1077;&#1076;&#1080;&#1085;&#1103;&#1077;&#1090; &#1075;&#1088;&#1072;&#1085;&#1080;&#1094;&#1099; &#1103;&#1095;&#1077;&#1077;&#1082; &#1074; &#1086;&#1076;&#1085;&#1091; &#1083;&#1080;&#1085;&#1080;&#1102; *\/<\/em><\/p>\n<p><strong>}<\/strong><\/p>\n<p><strong>th, td {<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;border: 1px solid #000;&nbsp; &nbsp; <\/strong><em>\/* &#1043;&#1088;&#1072;&#1085;&#1080;&#1094;&#1099; &#1095;&#1077;&#1088;&#1085;&#1086;&#1075;&#1086; &#1094;&#1074;&#1077;&#1090;&#1072; &#1090;&#1086;&#1083;&#1097;&#1080;&#1085;&#1086;&#1081; 1px &#1076;&#1083;&#1103; &#1103;&#1095;&#1077;&#1077;&#1082; *\/<\/em><\/p>\n<p><strong>&nbsp;&nbsp;padding: 10px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<\/strong> <em>\/* &#1042;&#1085;&#1091;&#1090;&#1088;&#1077;&#1085;&#1085;&#1080;&#1077; &#1086;&#1090;&#1089;&#1090;&#1091;&#1087;&#1099; 8px &#1074; &#1103;&#1095;&#1077;&#1081;&#1082;&#1072;&#1093; *\/<\/em><\/p>\n<p><strong>&nbsp;&nbsp;text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <\/strong><em>\/* &#1042;&#1099;&#1088;&#1072;&#1074;&#1085;&#1080;&#1074;&#1072;&#1085;&#1080;&#1077; &#1090;&#1077;&#1082;&#1089;&#1090;&#1072; &#1087;&#1086; &#1083;&#1077;&#1074;&#1086;&#1084;&#1091; &#1082;&#1088;&#1072;&#1102; *\/<\/em><\/p>\n<p><em>}<\/em><\/p>\n<p><strong>th {<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;background-color: #f2f2f2; <\/strong><em>\/* &#1057;&#1077;&#1088;&#1099;&#1081; &#1092;&#1086;&#1085; &#1076;&#1083;&#1103; &#1079;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1082;&#1086;&#1074; *\/<\/em><\/p>\n<p><strong>}<\/strong><\/p>\n<figure id=\"attachment_35511\" aria-describedby=\"caption-attachment-35511\" style=\"width: 756px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35511\" src=\"https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2025\/03\/27184001\/hde-uchat-verstat-tablyts-.png\" alt=\"\" width=\"756\" height=\"450\" srcset=\"https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2025\/03\/27184001\/hde-uchat-verstat-tablyts-.png 1424w, https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2025\/03\/27184001\/hde-uchat-verstat-tablyts--300x179.png 300w, https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2025\/03\/27184001\/hde-uchat-verstat-tablyts--1024x610.png 1024w, https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2025\/03\/27184001\/hde-uchat-verstat-tablyts--768x457.png 768w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><figcaption id=\"caption-attachment-35511\" class=\"wp-caption-text\"><em>&#1055;&#1083;&#1072;&#1085;&#1080;&#1088;&#1091;&#1077;&#1096;&#1100; &#1089;&#1074;&#1086;&#1077; &#1073;&#1091;&#1076;&#1091;&#1097;&#1077;&#1077; &#1074; &#1089;&#1092;&#1077;&#1088;&#1077; Digital &#1080;&#1083;&#1080; IT? &#1057;&#1076;&#1077;&#1083;&#1072;&#1081; &#1087;&#1077;&#1088;&#1074;&#1099;&#1081; &#1096;&#1072;&#1075; &#1085;&#1072; <a href=\"https:\/\/goit.global\/ua-ru\/newcomers\/\" target=\"_blank\" rel=\"noopener\">&#1073;&#1077;&#1089;&#1087;&#1083;&#1072;&#1090;&#1085;&#1099;&#1093; &#1084;&#1072;&#1088;&#1072;&#1092;&#1086;&#1085;&#1072;&#1093;<\/a> &#1080; &#1076;&#1086;&#1073;&#1077;&#1081;&#1089;&#1103; &#1091;&#1089;&#1087;&#1077;&#1093;&#1072; &#1085;&#1072; <a href=\"https:\/\/goit.global\/ua-ru\/courses\/\" target=\"_blank\" rel=\"noopener\">&#1082;&#1091;&#1088;&#1089;&#1072;&#1093; GoIT<\/a>!<\/em><\/figcaption><\/figure>\n<h2>&#1054;&#1073;&#1091;&#1095;&#1077;&#1085;&#1080;&#1077; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1077; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094; &#1074; GoIT<\/h2>\n<p>\n&#1045;&#1089;&#1083;&#1080; &#1090;&#1099; &#1093;&#1086;&#1095;&#1077;&#1096;&#1100; &#1075;&#1083;&#1091;&#1073;&#1078;&#1077; &#1088;&#1072;&#1079;&#1086;&#1073;&#1088;&#1072;&#1090;&#1100;&#1089;&#1103; &#1074; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1072;&#1093; HTML5, &#1080;&#1093; &#1089;&#1090;&#1080;&#1083;&#1080;&#1079;&#1072;&#1094;&#1080;&#1080; &#1089; CSS &#1080; &#1089;&#1086;&#1079;&#1076;&#1072;&#1085;&#1080;&#1080; &#1089;&#1083;&#1086;&#1078;&#1085;&#1099;&#1093; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;, &#1088;&#1077;&#1082;&#1086;&#1084;&#1077;&#1085;&#1076;&#1091;&#1077;&#1084; <a href=\"https:\/\/goit.global\/ua\/mini-courses\/table\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">&#1087;&#1088;&#1086;&#1081;&#1090;&#1080; &#1084;&#1080;&#1085;&#1080;-&#1082;&#1091;&#1088;&#1089; &laquo;&#1042;&#1077;&#1088;&#1089;&#1090;&#1082;&#1072; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&raquo; &#1086;&#1090; GoIT<\/a>.<\/p>\n<p>&#1054;&#1085; &#1074;&#1082;&#1083;&#1102;&#1095;&#1072;&#1077;&#1090; 10 &#1095;&#1072;&#1089;&#1086;&#1074; &#1091;&#1095;&#1077;&#1073;&#1085;&#1099;&#1093; &#1074;&#1080;&#1076;&#1077;&#1086;, &#1087;&#1086;&#1096;&#1072;&#1075;&#1086;&#1074;&#1099;&#1093; &#1090;&#1077;&#1082;&#1089;&#1090;&#1086;&#1074;&#1099;&#1093; &#1080;&#1085;&#1089;&#1090;&#1088;&#1091;&#1082;&#1094;&#1080;&#1081; &#1080; &#1082;&#1074;&#1080;&#1079;&#1086;&#1074;, &#1087;&#1086;&#1079;&#1074;&#1086;&#1083;&#1103;&#1102;&#1097;&#1080;&#1093; &#1091;&#1083;&#1091;&#1095;&#1096;&#1080;&#1090;&#1100; &#1085;&#1072;&#1074;&#1099;&#1082;&#1080; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1080; &#1080; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1080;&#1103; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;, &#1089;&#1086;&#1079;&#1076;&#1072;&#1074;&#1072;&#1103; &#1073;&#1086;&#1083;&#1077;&#1077; &#1087;&#1088;&#1086;&#1092;&#1077;&#1089;&#1089;&#1080;&#1086;&#1085;&#1072;&#1083;&#1100;&#1085;&#1099;&#1077; &#1074;&#1077;&#1073;-&#1089;&#1072;&#1081;&#1090;&#1099; &#1080; &#1087;&#1088;&#1086;&#1077;&#1082;&#1090;&#1099;.<\/p>\n<p>&#1052;&#1080;&#1085;&#1080;-&#1082;&#1091;&#1088;&#1089; &#1086;&#1088;&#1080;&#1077;&#1085;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085; &#1085;&#1072; &#1087;&#1088;&#1072;&#1082;&#1090;&#1080;&#1082;&#1091;: &#1090;&#1099; &#1085;&#1072;&#1091;&#1095;&#1080;&#1096;&#1100;&#1089;&#1103; &#1089;&#1086;&#1079;&#1076;&#1072;&#1074;&#1072;&#1090;&#1100;, &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100; &#1080; &#1074;&#1077;&#1088;&#1089;&#1090;&#1072;&#1090;&#1100; &#1088;&#1072;&#1079;&#1083;&#1080;&#1095;&#1085;&#1099;&#1077; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1089; &#1088;&#1072;&#1079;&#1085;&#1086;&#1086;&#1073;&#1088;&#1072;&#1079;&#1085;&#1099;&#1084;&#1080; &#1090;&#1080;&#1087;&#1072;&#1084;&#1080; &#1076;&#1072;&#1085;&#1085;&#1099;&#1093;. &#1042; &#1088;&#1077;&#1079;&#1091;&#1083;&#1100;&#1090;&#1072;&#1090;&#1077; &#1086;&#1073;&#1091;&#1095;&#1077;&#1085;&#1080;&#1103; &#1090;&#1099; &#1087;&#1086;&#1083;&#1091;&#1095;&#1080;&#1096;&#1100; &#1087;&#1086;&#1083;&#1085;&#1086;&#1077; &#1087;&#1086;&#1085;&#1080;&#1084;&#1072;&#1085;&#1080;&#1077; &#1088;&#1072;&#1073;&#1086;&#1090;&#1099; &#1089; &#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1084;&#1080; &#1101;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1072;&#1084;&#1080; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094; &#1080; &#1087;&#1086;&#1076;&#1075;&#1086;&#1090;&#1086;&#1074;&#1082;&#1080; &#1080;&#1093; &#1082; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1077;. &#8203;<\/p>\n<p>&#1055;&#1086; &#1079;&#1072;&#1074;&#1077;&#1088;&#1096;&#1077;&#1085;&#1080;&#1102; &#1082;&#1091;&#1088;&#1089;&#1072; &#1090;&#1099; &#1089;&#1084;&#1086;&#1078;&#1077;&#1096;&#1100; &#1091;&#1074;&#1077;&#1088;&#1077;&#1085;&#1085;&#1086; &#1088;&#1072;&#1073;&#1086;&#1090;&#1072;&#1090;&#1100; &#1089; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1072;&#1084;&#1080; &#1074; <a href=\"https:\/\/goit.global\/ua-ru\/articles\/html-y-css-chto-to-komu-y-dlia-cheho-nuzhno\/\" target=\"_blank\" rel=\"noopener\">HTML &#1080; CSS<\/a>, &#1087;&#1088;&#1080;&#1084;&#1077;&#1085;&#1103;&#1090;&#1100; &#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1091;&#1102; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1091; &#1080; &#1091;&#1083;&#1091;&#1095;&#1096;&#1072;&#1090;&#1100; &#1087;&#1086;&#1083;&#1100;&#1079;&#1086;&#1074;&#1072;&#1090;&#1077;&#1083;&#1100;&#1089;&#1082;&#1080;&#1081; &#1086;&#1087;&#1099;&#1090; &#1085;&#1072; &#1089;&#1072;&#1081;&#1090;&#1077;.\n<\/p>\n<h2>&#1042;&#1084;&#1077;&#1089;&#1090;&#1086; &#1074;&#1099;&#1074;&#1086;&#1076;&#1072;<\/h2>\n<p>\n&#1042;&#1077;&#1088;&#1089;&#1090;&#1082;&#1072; HTML-&#1090;&#1072;&#1073;&#1083;&#1080;&#1094; &ndash; &#1101;&#1090;&#1086; &#1074;&#1072;&#1078;&#1085;&#1099;&#1081; &#1085;&#1072;&#1074;&#1099;&#1082;, &#1082;&#1086;&#1090;&#1086;&#1088;&#1099;&#1081; &#1087;&#1088;&#1080;&#1075;&#1086;&#1076;&#1080;&#1090;&#1089;&#1103; &#1082;&#1072;&#1078;&#1076;&#1086;&#1084;&#1091; <a href=\"https:\/\/goit.global\/ua-ru\/articles\/kto-takoy-frontend-developer-v-it-rol-obiazannosty-perspektyv\/\" target=\"_blank\" rel=\"noopener\">&#1074;&#1077;&#1073;-&#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1095;&#1080;&#1082;&#1091;<\/a>. &#1055;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1072;&#1103; &#1088;&#1072;&#1079;&#1084;&#1077;&#1090;&#1082;&#1072; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; HTML &#1087;&#1086;&#1084;&#1086;&#1075;&#1072;&#1077;&#1090; &#1089;&#1076;&#1077;&#1083;&#1072;&#1090;&#1100; &#1082;&#1086;&#1085;&#1090;&#1077;&#1085;&#1090; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1085;&#1099;&#1084; &#1080; &#1091;&#1076;&#1086;&#1073;&#1085;&#1099;&#1084; &#1076;&#1083;&#1103; &#1074;&#1086;&#1089;&#1087;&#1088;&#1080;&#1103;&#1090;&#1080;&#1103;. &#1048;&#1089;&#1087;&#1086;&#1083;&#1100;&#1079;&#1091;&#1103; &#1089;&#1077;&#1084;&#1072;&#1085;&#1090;&#1080;&#1082;&#1091; HTML, &#1090;&#1077;&#1075;&#1080; &lt;table th tr td&gt;, &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1091;&#1102; CSS-&#1089;&#1090;&#1080;&#1083;&#1080;&#1079;&#1072;&#1094;&#1080;&#1102;, &#1090;&#1099; &#1089;&#1084;&#1086;&#1078;&#1077;&#1096;&#1100; &#1089;&#1086;&#1079;&#1076;&#1072;&#1074;&#1072;&#1090;&#1100; &#1082;&#1072;&#1082; &#1087;&#1088;&#1086;&#1089;&#1090;&#1099;&#1077;, &#1090;&#1072;&#1082; &#1080; &#1089;&#1083;&#1086;&#1078;&#1085;&#1099;&#1077; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1074; HTML.<\/p>\n<p>&#1040; &#1077;&#1089;&#1083;&#1080; &#1090;&#1099; &#1093;&#1086;&#1095;&#1077;&#1096;&#1100; &#1073;&#1099;&#1089;&#1090;&#1088;&#1086; &#1085;&#1072;&#1091;&#1095;&#1080;&#1090;&#1100;&#1089;&#1103; &#1074;&#1077;&#1088;&#1089;&#1090;&#1072;&#1090;&#1100; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1099; &#1085;&#1072; &#1087;&#1088;&#1086;&#1092;&#1077;&#1089;&#1089;&#1080;&#1086;&#1085;&#1072;&#1083;&#1100;&#1085;&#1086;&#1084; &#1091;&#1088;&#1086;&#1074;&#1085;&#1077;, <a href=\"https:\/\/goit.global\/ua\/mini-courses\/table\/?amp%3Butm_medium=articles&#038;amp%3Butm_campaign=35520\" target=\"_blank\" rel=\"noopener\">&#1087;&#1088;&#1080;&#1086;&#1073;&#1088;&#1077;&#1090;&#1072;&#1081; &#1084;&#1080;&#1085;&#1080;-&#1082;&#1091;&#1088;&#1089; &laquo;&#1042;&#1077;&#1088;&#1089;&#1090;&#1082;&#1072; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&raquo; &#1086;&#1090; GoIT<\/a> &#1087;&#1086; &#1074;&#1099;&#1075;&#1086;&#1076;&#1085;&#1086;&#1081; &#1089;&#1090;&#1086;&#1080;&#1084;&#1086;&#1089;&#1090;&#1080;!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0430 HTML-\u0442\u0430\u0431\u043b\u0438\u0446 \u2013 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0439 \u043d\u0430\u0432\u044b\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443? \u041f\u043e\u043b\u0443\u0447\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043d\u0430 \u043c\u0438\u043d\u0438-\u043a\u0443\u0440\u0441\u0435 \u00abTables Layout\u00bb \u0432 GoIT!<\/p>\n","protected":false},"featured_media":35519,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false},"categories":[12035],"tags":[],"class_list":["post-35520","articles","type-articles","status-publish","has-post-thumbnail","hentry","category-frontend"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/articles\/35520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/types\/articles"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/media\/35519"}],"wp:attachment":[{"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/media?parent=35520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/categories?post=35520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/ua-ru\/wp-json\/wp\/v2\/tags?post=35520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}