.border2 {border: solid 3px;
text-align: center;}



table{ width: 100%;
height: 100vh;
border-spacing: 0;
}
td {width: 5.5%;
height: 8vh;}

.NãoMetais {border: solid 3px;
background-color: lightgreen;
text-align: center;}

.GasesNobres {border: solid 3px;
background-color: rgb(10, 125, 233);
text-align: center;}

.MetaisAlcalinos {border: solid 3px;
    background-color: orange;
text-align: center;}

.MetaisAlcalinos-terrosos {border: solid 3px;
    background-color: yellow;
text-align: center;}

.Semimetais {border: solid 3px;
    background-color: rgb(21, 137, 77);
text-align: center;}

.Halogênios {border: solid 3px;
    background-color: lightskyblue;
text-align: center;}

.OutrosMetais {border: solid 3px;
    background-color: lightslategray;
text-align: center;}

.MetaisDeTransição {border: solid 3px;
    background-color: lightcoral;
text-align: center;}

.Lantanídeos {border: solid 3px;
    background-color: rgba(32, 178, 171, 0.545);
text-align: center;}

.Actinídios {border: solid 3px;
    background-color: rgba(164, 61, 137, 0.389);
text-align: center;}

.nome {text-align: center;}

*{
    box-sizing: border-box;
    margin: 0px;  
}

td span {

    position: relative;
    left: -25px;
}

.legenda span {
    display: inline-block;
    margin-right: 15px;
}

.legenda span span {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: solid 2px;
    margin-right: 5px;
}

.naometais {background-color: lightgreen;}

.gases {background-color: rgb(10,125,233);}

.alcalinos {background-color: orange;}

.terrosos {background-color: yellow;}

.semimetais {background-color: rgb(21,137,77);}

.halogenios {background-color: lightskyblue;}

.outros {background-color: lightslategray;}

.transicao {background-color: lightcoral;}

.lantanideos {background-color: rgba(32,178,171,0.545);}

.actinidios {background-color: rgba(164,61,137,0.389);}