table {width: 100%;
    height:100vh;
    margin: auto;
 
}

.border { border:solid;
text-align: center}

td{
    width: 5%;
    height: 8vh;
}


.cor1{
 background-color: rgba(134, 235, 3, 0.555);
}

.gasesnobres{
background-color: rgba(16, 94, 238, 0.829);
}

.metaisalcalinos{
    background-color: rgba(219, 128, 9, 0.911);
    }

    .metalemtransição{

    background-color: rgb(255, 110, 91);
    }

    .metalterroso{
        background-color: rgb(255, 255, 56);
    }

    .outrosmetais{

        background-color: rgb(143, 173, 255);
    }

    .semimetais{
        background-color: rgb(25, 153, 125);
    }

    .Halogênios{

        background-color: rgb(160, 178, 226);
    }

    .Lantanídeos{
        background-color: rgb(37, 157, 179);
    }

    .Actinídios{
        background-color: rgb(199, 96, 147);
    }

    .box-Naometais{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgba(134, 235, 3, 0.555)}

    .box-Metaisalcalinos{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgba(219, 128, 9, 0.911)}

    .box-Semimetais{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(25, 153, 125)}

    .box-Outrosmetais{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(143, 173, 255)}

    .box-Lantanídeos{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(37, 157, 179)}

    .box-Gasesnobres{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgba(16, 94, 238, 0.829)}

    .box-Metaisalcalino-terrosos{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(255, 255, 56)}

    .box-Halogênios{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(160, 178, 226)}

    .box-Metaisdetransição{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(255, 110, 91)}

    .box-Actinídios{width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-left: 60%;
    border:2px solid rgb(199, 96, 147)}