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.