GennadySht
/
HomeWork


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<header>
    <h1>For Table Horizontal</h1>
</header>

<body>
    <style>
        td {
            padding: 5px;
        }

        td,
        th {
            border: 1px solid #999;
            border-top-color: rgb(153, 153, 153);
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: rgb(153, 153, 153);
            border-right-style: solid;
            border-right-width: 1px;
            border-bottom-color: rgb(153, 153, 153);
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-left-color: rgb(153, 153, 153);
            border-left-style: solid;
            border-left-width: 1px;
            border-image-source: initial;
            border-image-slice: initial;
            border-image-width: initial;
            border-image-outset: initial;
            border-image-repeat: initial;
        }

        td {
            display: table-cell;
            vertical-align: inherit;
        }

        table {
            border-collapse: collapse;
            text-indent: initial;
            border-spacing: 2px;
        }
    </style>
    <script>
        const names = ["John", "Paul", "George", "Ringo"];
        let str = "<table><tbody><tr>";
        for (let name of names) {
            //    YOUR MAGIC HERE
            str += `<td><section>${name}</section></td>`;
        }
        str += "</tr></tbody></table>";
        document.write(str);
    </script>

</body>