Hello Chip.

Thank you for your purchase.

This table is using the Aqua skin, with some modifications in the main settings. For instance, the surrounding borders are removed, and the table is automatically sorted in ascending fashion by the first column. There is no tutorial for the table in our documentation yet, so I'll just tell you here.

There is also conditional formatting for the first \"#\" column:

And the custom CSS goes:

.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover td{background-color:#fffbf1 !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.grey,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.grey{background-color: #dcdcdc !important;border-left: 1px solid #dcdcdc !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.blue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.blue{background-color: #0083c2 !important;border-left: 1px solid #0083c2 !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.red,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.red{background-color: #d6181f !important;border-left: 1px solid #d6181f !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.lightblue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.lightblue{background-color: rgb(91,192,222) !important;border-left: 1px solid rgb(91,192,222) !important;}
.white-text { color: #fff !important; }

Then, for the second column, the badges were taken from this link, and added in "String" type column in the following fashion. This is an example for Liverpool:

<span class="badge-1 t1"><a href="https://www.liverpoolfc.com/welcome-to-liverpool-fc">Liverpool</a></span>

So, the class "badge-1" and "badge-1.t1" classes are defined in Custom CSS:

.badge-1 {
    background-image: url(https://wpdatatables.com/wp-content/uploads/2018/12/badges-25-sprite.png);    background-repeat: no-repeat;    width: 25px;    height: 25px;    display: block;    background-position: -50px -350px;    display: inline-block;    vertical-align: middle;    margin-right: .5rem;
}
.badge-1.t1 {
    background-position: -250px -225px;
}

The second class selects the position on the provided image where Liverpool's crest is located.

This is for all the clubs:

.badge-1.t1 {    background-position: -250px -225px;
}
.badge-1.t2 {    background-position: -250px -250px;
}
.badge-1.t3 {    background-position: -275px -325px;
}
.badge-1.t4 {    background-position: -150px -150px;
}
.badge-1.t5{        background-position: 0 -50px;
}
.badge-1.t6{    background-position: -275px -200px;
}
.badge-1.t7 {      background-position: -350px -75px;
}
.badge-1.t8 {    background-position: -50px -125px;
}
.badge-1.t9 {    background-position: -250px -125px;
}
.badge-1.t10 {    background-position: -350px -250px;
}
.badge-1.t11 {    background-position: 0 -200px;
}
.badge-1.t12 {        background-position: -350px -125px;
}
.badge-1.t13 {    background-position: -100px -100px;
}
.badge-1.t14{        background-position: -50px -175px;
}
.badge-1.t15 {    background-position: -250px -225px;
}
.badge-1.t16 {    background-position: -325px -250px;
}
.badge-1.t17 {    background-position: -75px -150px;
}
.badge-1.t18 {    background-position: -25px -150px;
}
.badge-1.t19 {        background-position: -75px -225px;
}
.badge-1.t20 {    background-position: -225px -100px;    }

Now, the remaining columns are just integers, and the last one is the win/loss/draw column. It has a lot of conditional formatting applied to make it look like it does:

It goes all the way up to \"20\". And here\'s the rule for Liverpool again:

<div class="score-last-6">
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span></div>

This changes from team to team. Everything else you may need is in the custom CSS:

.score-last-6 {
    margin:0 auto;
    border-collapse: separate;
    display: table;
    border-spacing: 3px 0;
height:11px;
vertical-align: middle;
}
.score-last-one{
    display: table-cell;
    height: .7em;
    width: .7em;
}
.win {background: #0083c2;}
.lose{background: #d6181f;}
.equal {background: #dcdcdc;}

That's about it. You will probably need to dig around all this to make it look exactly the same, but this is how it's done.

Best regards.

Hey Chip.

You're welcome, I'll help you as much as I can, of course.

As for the google spreadsheet, I cannot access it, so I requested access for my e-mail address: [email protected]

When you allow me access, I'll gladly take a look and give my recommendation.

Best regards.

Hey Chip.

Great news! Thanks for letting me know.

If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.

Best regards.