タイトルとラベルを使用してHTMLテーブルを整形する方法

Question

テーブル要素を（赤で丸で囲んだ）表をタイトルに変更し、各列の上にヘッダー（「読み込み」 "、" kWh "）はそれぞれ左列と右列ですか？

"name"と "watts"という要素は、 "Power Usage"という表の上のタイトルに加えて、 "Load"と "kWh"のラベルを作成するものです。今は書式設定がありません。私はW3の学校のチュートリアルから自分のコードに移行するのに問題があります。

function(){ 
     var wrapper = document.createElement("div"); 
     if(!this.loaded) { 
       wrapper.innerHTML = "Loading..."; 
       return wrapper; 
     } 
     if(this.xml !== null){ 
     var table = document.createElement("table"); 
     table.classList.add("xsmall", "table"); 
     var channels = this.xml.getElementsByTagName("channel"); 

     for(var i = 0; i < channels.length; i++){ 
      var row = document.createElement("tr"); 
      for(var n = 0; n < channels[i].children.length; n++){ 
       if(channels[i].children[n].tagName === "name" || channels[i].children[n].tagName === "watts"){ 
       var element = document.createElement("td"); 
       element.classList.add(channels[i].children[n].tagName); 
       if (channels[i].children[n].textContent != 0){ 
      element.innerHTML = channels[i].children[n].textContent; 
      row.appendChild(element); 
      table.appendChild(row); 
      }  
     else { 
      table.removeChild(row); } 
     } 


      } 
     } 
     wrapper.appendChild(table); 
     } else { 
       console.log("Returned no Data"); 
       wrapper.innerHTML = "NO DATA"; 
     } 
     return wrapper; 
    }, 

まず試し：あなただけのJSを使用して、次のような表を構築したい

Answer 1

あなたはすでに書いた：あなたは省略でき

<table> 
    <caption>Put title here</caption> 
    <thead> 
    <tr> 
     <th>Load</th> 
     <th>kWh</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Kitchen Lights</td> 
     <td>2.799</td> 
    </tr> 
    </tbody> 
</table>