Feature request: `Base.show(io::IO, ::MIME"text/html", e::Elements)` method

[rakeshksr]

@carstenbauer It's good to have Base.show(io::IO, ::MIME"text/html", e::Elements) method similar to Base.show(io::IO, ::MIME"text/html", e::Element) to display rich periodic table in pluto.jl directly. I have created Base.show(io::IO, ::MIME"text/html", e::Elements) method for demo purpose.

_clrs = Dict(
    "diatomic nonmetal" => ("#e2eeff", "#0060f0"),
    "noble gas" => ("#ffe7eb", "#cd1d5e"),
    "alkali metal" => ("#d8f8ff", "#00758c"),
    "alkaline earth metal" => ("#ffe7e7", "#d60024"),
    "metalloid" => ("#fef7e0", "#945700"),
    "polyatomic nonmetal" =>  ("#e2eeff", "#0060f0"),
    "post-transition metal" => ("#d6f9e8", "#227754"),
    "transition metal" => ("#f3e8fd", "#6232ec"),
    "lanthanide" => ("#dff3ff", "#003355"),
    "actinide" => ( "#ffe6d4", "#c73200"),
    "unknown, probably transition metal" => ("#e7e7ea", "#3f374f"),
    "unknown, probably post-transition metal" => ("#e7e7ea", "#3f374f"),
    "unknown, probably metalloid" => ("#e7e7ea", "#3f374f"),
    "unknown, predicted to be noble gas" => ("#e7e7ea", "#3f374f"),
    "unknown, but predicted to be an alkali metal" => ("#e7e7ea", "#3f374f"),
)

function _fill_element_data(el::Element)
    clr = _clrs[el.category]
    return """
    <td class="element" style="background-color:$(clr[1]);color:$(clr[2]);">
        <div class="top">
            <div>$(el.number)</div>
            <div>$(round(el.atomic_mass.val; digits=3))</div>
        </div>
        <div class="symbol">$(el.symbol)</div>
        <div>$(el.name)</div>
    </td>
    """
end

function Base.show(io::IO, ::MIME"text/html", e::PeriodicTable.Elements)
    table = fill("<td></td>\n", 10, 18)
    for el in e
        table[el.ypos, el.xpos] = _fill_element_data(el)
    end
    ht = """
    <table style="width:100%;empty-cells:hide;border:0px;background-color:#ffffff">
            <style>
                .element {
                    border: 5px solid #ffffff;
                    min-width: 100px;
                    height: 100%;
                    text-align: center;
                    font-size: 10px;
                    border-radius: 10px;
                    border-collapse: collapse;
                }
                .top {
                    display: flex;
                    justify-content: space-between;
                }

                .symbol {
                    text-align: center;
                    font-weight: bold;
                    # font-size: 5px;
                }
            </style>
    """
    s = size(table)
    for i = 1:s[1]
        ht *= "\n<tr>\n"
        for j = 1:s[2]
            ht *= table[i,j]
        end
        ht *= "</tr>"
    end
    ht *= "\n</table>"
    print(io, ht)
end

Preview:

Heavily inspired by google preview of periodic table. If you are ok with it, I will create pr.