<!--
    Demo for this article:
    http://blustemy.io/using-the-html-template-element/
-->

<template id="color-template">
    <tr>
        <td class="color-name"></td>
        <td class="color-value"></td>
        <td class="color-sample"></td>
    </tr>
</template>

<table class="colors-table">
    <thead>
        <tr>
            <th>Color name</th>
            <th>Value</th>
            <th>Sample</th>
        </tr>
    </thead>
    <tbody>
        <!-- Will be populated -->
    </tbody>
</table>
/*
    Demo for this article:
    http://blustemy.io/using-the-html-template-element/
*/

.colors-table {
    font-family: sans-serif;
    border-spacing: 1rem .5rem;
    text-align: left;
}

.color-value {
    font-family: monospace;
}
/*
    Demo for this article:
    http://blustemy.io/using-the-html-template-element/
*/

document.addEventListener("DOMContentLoaded", () => {
    const colorsData = {
        "black":          "#000000",
        "darkslategray":  "#2f4f4f",
        "dimgray":        "#696969",
        "gray":           "#808080",
        "slategray":      "#708090",
        "lightslategray": "#778899",
        "darkgray":       "#a9a9a9",
        "silver":         "#c0c0c0",
        "lightgray":      "#d3d3d3",
        "gainsboro":      "#dcdcdc",
        "whitesmoke":     "#f5f5f5",
        "ghostwhite":     "#f8f8ff",
        "snow":           "#fffafa",
        "white":          "#ffffff"
    };
    
    const colorTemplate = document.getElementById("color-template"),
          colorsTable = document.querySelector(".colors-table"),
          colorsTableBody = colorsTable.querySelector("tbody");
    
    for (let colorName in colorsData) {
        const colorValue = colorsData[colorName],
              colorTemplateInstance = document.importNode(colorTemplate.content, true);
        colorTemplateInstance.querySelector(".color-name").textContent = colorName;
        colorTemplateInstance.querySelector(".color-value").textContent = colorValue;
        colorTemplateInstance.querySelector(".color-sample").style.background = colorValue;
        colorsTableBody.appendChild(colorTemplateInstance);
    }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.