hw08_08_!ForTable.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <header>
  2. <h1>For Table</h1>
  3. </header>
  4. <style>
  5. td {
  6. padding: 5px;
  7. }
  8. td,
  9. th {
  10. border: 1px solid #999;
  11. border-top-color: rgb(153, 153, 153);
  12. border-top-style: solid;
  13. border-top-width: 1px;
  14. border-right-color: rgb(153, 153, 153);
  15. border-right-style: solid;
  16. border-right-width: 1px;
  17. border-bottom-color: rgb(153, 153, 153);
  18. border-bottom-style: solid;
  19. border-bottom-width: 1px;
  20. border-left-color: rgb(153, 153, 153);
  21. border-left-style: solid;
  22. border-left-width: 1px;
  23. border-image-source: initial;
  24. border-image-slice: initial;
  25. border-image-width: initial;
  26. border-image-outset: initial;
  27. border-image-repeat: initial;
  28. }
  29. td {
  30. display: table-cell;
  31. vertical-align: inherit;
  32. }
  33. table {
  34. border-collapse: collapse;
  35. text-indent: initial;
  36. border-spacing: 2px;
  37. }
  38. </style>
  39. <body>
  40. <script>
  41. const toHtmlTable = (arr) => {
  42. let str = "<table>";
  43. for (let arrEl of arr) {
  44. str += "<tr>";
  45. for (let val of arrEl) {
  46. str += `<td>${val}</td>`;
  47. }
  48. str += "</tr>";
  49. }
  50. str += "</table>";
  51. return str;
  52. }
  53. arr = [];
  54. for (let i = 0; i < 5; i++) {
  55. arr[i] = [];
  56. for (let j = 0; j < 5; j++) {
  57. arr[i][j] = (i + 1) * (j + 1);
  58. }
  59. }
  60. document.write(toHtmlTable(arr));
  61. </script>
  62. </body>