{"id":2162,"date":"2025-09-17T07:52:18","date_gmt":"2025-09-17T07:52:18","guid":{"rendered":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/?page_id=2162"},"modified":"2025-09-18T10:10:53","modified_gmt":"2025-09-18T10:10:53","slug":"codesandbox-is-html-leht-mis-kuvab-auto-andmeid","status":"publish","type":"page","link":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/codesandbox-is-html-leht-mis-kuvab-auto-andmeid\/","title":{"rendered":"H2: Codesandbox-is HTML leht, mis kuvab auto andmeid"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"548\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/751ECDB2-529B-4AD6-B391-22140326C894.png\" alt=\"\" class=\"wp-image-2165\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/751ECDB2-529B-4AD6-B391-22140326C894.png 931w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/751ECDB2-529B-4AD6-B391-22140326C894-300x177.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/751ECDB2-529B-4AD6-B391-22140326C894-768x452.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/751ECDB2-529B-4AD6-B391-22140326C894-150x88.png 150w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-2\"><img loading=\"lazy\" decoding=\"async\" width=\"959\" height=\"630\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/B0C27AE9-1BA7-4A67-959A-5953025E5838.png\" alt=\"\" class=\"wp-image-2167\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/B0C27AE9-1BA7-4A67-959A-5953025E5838.png 959w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/B0C27AE9-1BA7-4A67-959A-5953025E5838-300x197.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/B0C27AE9-1BA7-4A67-959A-5953025E5838-768x505.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/B0C27AE9-1BA7-4A67-959A-5953025E5838-150x99.png 150w\" sizes=\"auto, (max-width: 959px) 100vw, 959px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import \".\/styles.css\";\n\n\/\/ Masiiv\nconst car = [\n  {\n    Name: \"Honda Civic\",\n    Color: \"Green\",\n    \"Tinted windows\": true,\n    Wheels: 4,\n    \"Roof cargo\": null,\n    Entertainment: &#91;\n      \"FM Radio\",\n      \"MP3, MP4 and MKV player\",\n      \"Harman\/Karbon speakers\",\n    &#93;,\n    Accessories: &#91;\"Satnav\", \"Cruise control\"&#93;,\n  },\n  {\n    Name: \"Saab\",\n    Color: \"Gray\",\n    \"Tinted windows\": false,\n    Wheels: 4,\n    \"Roof cargo\": null,\n    Entertainment: &#91;\"FM Radio\", \"MP3, MP4 and MKV player\"&#93;,\n    Accessories: &#91;\"Satnav\", \"Cruise control\"&#93;,\n  },\n  {\n    Name: \"Toyota\",\n    Color: \"Blue\",\n    \"Tinted windows\": true,\n    Wheels: 4,\n    \"Roof cargo\": null,\n    Entertainment: &#91;\"FM Radio\", \"MP3, MP4 and MKV player\"&#93;,\n    Accessories: &#91;\"Satnav\"&#93;,\n  },\n];\n\n\/\/ N\u00e4itame HTML tableina\ndocument.getElementById(\"app\").innerHTML = `\n&lt;div>\n    &lt;h1>Car properties&lt;\/h1>\n    &lt;table>\n        &lt;tr>\n            &lt;th>Name&lt;\/th>\n            &lt;th>Color&lt;\/th>\n            &lt;th>Tinted windows&lt;\/th>\n            &lt;th>Wheels&lt;\/th>\n            &lt;th>Roof cargo&lt;\/th>\n            &lt;th>Entertainment&lt;\/th>\n            &lt;th>Accessories&lt;\/th>\n        &lt;\/tr>\n\n        &lt;tbody>\n        ${car\n          .map(\n            (car) =>\n              `&lt;tr>\n            &lt;td>${car.Name}&lt;\/td>\n            &lt;td>${car.Color}&lt;\/td>\n            &lt;td>${car&#91;\"Tinted windows\"&#93; ? \"Yes\" : \"No\"}&lt;\/td>\n            &lt;td>${car.Wheels}&lt;\/td>\n            &lt;td>${car&#91;\"Roof cargo\"&#93; || \"None\"}&lt;\/td>\n            &lt;td>${car.Entertainment.map((e) => \"\ud83e\udd21\" + e).join(\", \")}&lt;\/td>\n            &lt;td>${car.Accessories.map((e) => \"\ud83d\udc40\" + e).join(\", \")}&lt;\/td>\n          &lt;\/tr>`\n          )\n          .join(\"\")}\n        &lt;\/tbody>\n    &lt;\/table>\n&lt;\/div>\n`;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F97583\">import<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;.\/styles.css&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ Masiiv<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">car<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Name: <\/span><span style=\"color: #9ECBFF\">&quot;Honda Civic&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Color: <\/span><span style=\"color: #9ECBFF\">&quot;Green&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #9ECBFF\">&quot;Tinted windows&quot;<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Wheels: <\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #9ECBFF\">&quot;Roof cargo&quot;<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">null<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Entertainment: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #9ECBFF\">&quot;FM Radio&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #9ECBFF\">&quot;MP3, MP4 and MKV player&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #9ECBFF\">&quot;Harman\/Karbon speakers&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Accessories: &#91;<\/span><span style=\"color: #9ECBFF\">&quot;Satnav&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;Cruise control&quot;<\/span><span style=\"color: #E1E4E8\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Name: <\/span><span style=\"color: #9ECBFF\">&quot;Saab&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Color: <\/span><span style=\"color: #9ECBFF\">&quot;Gray&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #9ECBFF\">&quot;Tinted windows&quot;<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Wheels: <\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #9ECBFF\">&quot;Roof cargo&quot;<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">null<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Entertainment: &#91;<\/span><span style=\"color: #9ECBFF\">&quot;FM Radio&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;MP3, MP4 and MKV player&quot;<\/span><span style=\"color: #E1E4E8\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Accessories: &#91;<\/span><span style=\"color: #9ECBFF\">&quot;Satnav&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;Cruise control&quot;<\/span><span style=\"color: #E1E4E8\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Name: <\/span><span style=\"color: #9ECBFF\">&quot;Toyota&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Color: <\/span><span style=\"color: #9ECBFF\">&quot;Blue&quot;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #9ECBFF\">&quot;Tinted windows&quot;<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Wheels: <\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #9ECBFF\">&quot;Roof cargo&quot;<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">null<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Entertainment: &#91;<\/span><span style=\"color: #9ECBFF\">&quot;FM Radio&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;MP3, MP4 and MKV player&quot;<\/span><span style=\"color: #E1E4E8\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    Accessories: &#91;<\/span><span style=\"color: #9ECBFF\">&quot;Satnav&quot;<\/span><span style=\"color: #E1E4E8\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ N\u00e4itame HTML tableina<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">document.<\/span><span style=\"color: #B392F0\">getElementById<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;app&quot;<\/span><span style=\"color: #E1E4E8\">).innerHTML <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">    &lt;h1&gt;Car properties&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">    &lt;table&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;tr&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Name&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Color&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Tinted windows&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Wheels&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Roof cargo&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Entertainment&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;th&gt;Accessories&lt;\/th&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;\/tr&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;tbody&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        ${<\/span><span style=\"color: #E1E4E8\">car<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">          .<\/span><span style=\"color: #B392F0\">map<\/span><span style=\"color: #9ECBFF\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            (<\/span><span style=\"color: #79B8FF\">car<\/span><span style=\"color: #9ECBFF\">) <\/span><span style=\"color: #F97583\">=&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">              <\/span><span style=\"color: #9ECBFF\">`&lt;tr&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #E1E4E8\">Name<\/span><span style=\"color: #9ECBFF\">}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #E1E4E8\">Color<\/span><span style=\"color: #9ECBFF\">}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">&#91;<\/span><span style=\"color: #9ECBFF\">&quot;Tinted windows&quot;<\/span><span style=\"color: #9ECBFF\">&#93; <\/span><span style=\"color: #F97583\">?<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #9ECBFF\">&quot;Yes&quot;<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #F97583\">:<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #9ECBFF\">&quot;No&quot;}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #E1E4E8\">Wheels<\/span><span style=\"color: #9ECBFF\">}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">&#91;<\/span><span style=\"color: #9ECBFF\">&quot;Roof cargo&quot;<\/span><span style=\"color: #9ECBFF\">&#93; <\/span><span style=\"color: #F97583\">||<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #9ECBFF\">&quot;None&quot;}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #E1E4E8\">Entertainment<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #B392F0\">map<\/span><span style=\"color: #9ECBFF\">((<\/span><span style=\"color: #79B8FF\">e<\/span><span style=\"color: #9ECBFF\">) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #9ECBFF\">&quot;\ud83e\udd21&quot;<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #E1E4E8\">e<\/span><span style=\"color: #9ECBFF\">).<\/span><span style=\"color: #B392F0\">join<\/span><span style=\"color: #9ECBFF\">(<\/span><span style=\"color: #9ECBFF\">&quot;, &quot;<\/span><span style=\"color: #9ECBFF\">)<\/span><span style=\"color: #9ECBFF\">}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">            &lt;td&gt;${<\/span><span style=\"color: #E1E4E8\">car<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #E1E4E8\">Accessories<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #B392F0\">map<\/span><span style=\"color: #9ECBFF\">((<\/span><span style=\"color: #79B8FF\">e<\/span><span style=\"color: #9ECBFF\">) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #9ECBFF\">&quot;\ud83d\udc40&quot;<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #9ECBFF\"> <\/span><span style=\"color: #E1E4E8\">e<\/span><span style=\"color: #9ECBFF\">).<\/span><span style=\"color: #B392F0\">join<\/span><span style=\"color: #9ECBFF\">(<\/span><span style=\"color: #9ECBFF\">&quot;, &quot;<\/span><span style=\"color: #9ECBFF\">)<\/span><span style=\"color: #9ECBFF\">}&lt;\/td&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">          &lt;\/tr&gt;`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">          )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">          .<\/span><span style=\"color: #B392F0\">join<\/span><span style=\"color: #9ECBFF\">(<\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #9ECBFF\">)<\/span><span style=\"color: #9ECBFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;\/tbody&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">    &lt;\/table&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">`<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">CSS<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>body {\n  font-family: sans-serif;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  font-family: Arial, sans-serif;\n}\n\nth,\ntd {\n  border: 1px solid #ccc;\n  padding: 8px 12px;\n  text-align: left;\n}\n\nthead {\n  background-color: #333;\n  color: white;\n}\n\ntbody tr:nth-child(even) {\n  background-color: #f9f9f9;\n}\n\ntbody tr:hover {\n  background-color: #d1e7fd;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">sans-serif<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-collapse<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">collapse<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">Arial<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">sans-serif<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">12<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">thead<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#333<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">white<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">tbody<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #B392F0\">:nth-child<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">even<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#f9f9f9<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">tbody<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #B392F0\">:hover<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#d1e7fd<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-3\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B-1024x508.png\" alt=\"\" class=\"wp-image-2174\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B-1024x508.png 1024w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B-300x149.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B-768x381.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B-150x74.png 150w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B-1536x762.png 1536w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/72E87831-93DA-4091-99C0-B6812F25085B.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kokkuv\u00f5tte<\/h2>\n\n\n\n<p>Auto andmed on JSON massiivis mida p\u00e4rast me kuvame HTML tabelina JavaScript&#8217;i abil.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kokkuv\u00f5tte Auto andmed on JSON massiivis mida p\u00e4rast me kuvame HTML tabelina JavaScript&#8217;i abil.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2162","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/comments?post=2162"}],"version-history":[{"count":15,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2162\/revisions"}],"predecessor-version":[{"id":2298,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2162\/revisions\/2298"}],"wp:attachment":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/media?parent=2162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}