Matchup html code

[njtweb]

Can anybody do an html code like the image attached? I tried and mine is a mess. I want to replace "Final" with the rink and time of game.

Code Select Expand

<strong>Tonights Schedule</strong>
<hr>
<p><div style="width:92px;height:95px;margin-right:1030px; float:right; padding:5px;"><i><strong>Rink</strong><br />7:30pm</i></div>
<img style="vertical-align: middle;" src="https://mysite.com/images/image.png" height="35px" width="32px" /> Titans</div>
<img style="vertical-align: middle;" src="https://mysite.com/images/image.png" height="35px" width="32px" /> Bucks</div></p>
<hr>
<p><div style="width:92px;height:95px;margin-right:1030px; float:right; padding:5px;"><i><strong>Rink</strong><br />7:30pm</i></div>
<img style="vertical-align: middle;" src="https://mysite.com/images/image.png" height="35px" width="32px" /> Patriots</div>
<img style="vertical-align: middle;" src="https://mysite.com/images/image.png" height="35px" width="32px" /> Knights</div></p>

Basically, I want it to look exactly like the image in the attachment.

Thanks to all in advance.

[Mick.]

Maybe something like this?

Code Select Expand


<style>
table {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-spacing: 0;
}

table tr th {
background-color: #F1F5F8;
        border-bottom: 2px solid #ccc;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
text-align: left;
}

table tr {
        border-bottom: 1px solid #ccc;
}

table tr td {
background-color: #fff;
border: 0;
padding: 10px;
}

table tr:nth-of-type(odd) td {
background-color: #fff;
}

table tr:last-of-type td {
border-bottom: 0;
}

table tr td img {
border-radius: 50%;
object-fit: cover;
height: 35px;
width: 35px;
}

table tr td:nth-of-type(2), table tr td:nth-of-type(3) {
font-weight: bold;
}

table tr td:nth-of-type(3), table tr td:nth-of-type(4) {
text-align: center;
}
</style>


<table>
  <tbody>
<tr>
<td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/45/Colorado_Avalanche_logo.svg/220px-Colorado_Avalanche_logo.svg.png" alt=""></td>
<td>COL</td>
<td>1</td>
<td>Rink</td>
</tr>
<tr>
<td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ed/St._Louis_Blues_logo.svg/220px-St._Louis_Blues_logo.svg.png" alt=""></td>
<td>STL</td>
<td>3</td>
<td>7:30p</td>
</tr>
  </tbody>
</table>


[njtweb]

Hi @Mick, that'll work. I was aiming to have the Rink and time centered between the two teams  like where it says "Final". I appreciate your help and this will work if that's not possible.

[Mick.]

Like this?

Code Select Expand


<style>
table {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-spacing: 0;
}

table tr th {
background-color: #F1F5F8;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
text-align: left;
}

table tr td {
background-color: #fff;
border: 0;
padding: 10px;
}

table tr:nth-of-type(odd) td {
background-color: #fff;
}

table tr:last-of-type td {
border-bottom: 0;
}

table tr td img {
border-radius: 50%;
object-fit: cover;
height: 35px;
width: 35px;
}

table tr td:nth-of-type(2), table tr td:nth-of-type(3) {
font-weight: bold;
}

table tr td:nth-of-type(3), table tr td:nth-of-type(4) {
text-align: center;
}
</style>


<table>
  <tbody>
<tr>
<td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/45/Colorado_Avalanche_logo.svg/220px-Colorado_Avalanche_logo.svg.png" alt=""></td>
<td>COL</td>
<td>1</td>
</tr>
                <tr>
<td></td>
                 <td></td>
                 <td></td>
<td>Rink 730p</td>
</tr>
<tr>
<td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ed/St._Louis_Blues_logo.svg/220px-St._Louis_Blues_logo.svg.png" alt=""></td>
<td>STL</td>
<td>3</td>
</tr>
  </tbody>
</table>


[njtweb]

That'll do it. Thank you!

[Mick.]

That'll do it. Thank you!