title: Adding a table around the pop-up information in Leaflet
body: <p>I want to create a table around the pop-up information in Leaflet. I am using bootstrap for the mark-up. I tried the following code but it didn't work:</p>
  
  <pre><code>onEachFeature: function (feature, layer) {
              layer.on({
                  click: function showResultsInDiv() {
                      var d= document.getElementById('tab4');
                      d.innerHTML =  "&lt;table&gt;"
                                        "&lt;tbody&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;&lt;h3&gt;" + feature.properties.name + "&lt;/h3&gt;&lt;/th&gt;"
                                          "&lt;/tr&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;" "&lt;/th&gt;"
                                          "&lt;/tr&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;ID&lt;/th&gt;"
                                            "&lt;td&gt;" + feature.properties.id + "&lt;/td&gt;"
                                          "&lt;/tr&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;X&lt;/th&gt;"
                                            "&lt;td&gt;" + feature.properties.x + "&lt;/td&gt;"
                                          "&lt;/tr&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;Y&lt;/th&gt;"
                                            "&lt;td&gt;" + feature.properties.y + "&lt;/td&gt;"
                                          "&lt;/tr&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;Keten&lt;/th&gt;"
                                            "&lt;td&gt;" + feature.properties.keten + "&lt;/td&gt;"
                                          "&lt;/tr&gt;"
                                          "&lt;tr&gt;"
                                            "&lt;th scope="row"&gt;Naam&lt;/th&gt;"
                                            "&lt;td&gt;" + feature.properties.name + "&lt;/td&gt;"
                                          "&lt;/tr&gt;"
                                        "&lt;/tbody&gt;"
                                      "&lt;/table&gt;";
                  }
              }); }
      }).addTo(map);
  </code></pre>
  
  <p>This is what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/uoekX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uoekX.png" alt="enter image description here"></a></p>
  
  <p>This code work but doesn't give me table mark-up:</p>
  
  <pre><code>d.innerHTML =  "&lt;h3&gt;" + feature.properties.name + "&lt;/h3&gt; ID:" + feature.properties.id + "&lt;br&gt; X-as:" + feature.properties.x + "&lt;br&gt; Y-as:" + feature.properties.y + "&lt;br&gt; Keten:" + feature.properties.keten + "&lt;br&gt; Naam:" + feature.properties.name;
                          $('.nav-tabs a[href="#tab4"]').tab('show');
  </code></pre>