Advertisement:

Author Topic: Matchup html code  (Read 937 times)

Offline njtweb

  • Sophist Member
  • *****
  • Posts: 1,012
Matchup html code
« on: October 22, 2019, 10:37:44 AM »
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]
<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.


Online Mick.

  • Customizer
  • SMF Hero
  • *
  • Posts: 5,238
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Matchup html code
« Reply #1 on: October 22, 2019, 11:49:03 AM »
Maybe something like this?

Code: [Select]
<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>

Offline njtweb

  • Sophist Member
  • *****
  • Posts: 1,012
Re: Matchup html code
« Reply #2 on: October 22, 2019, 11:59:43 AM »
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.

Online Mick.

  • Customizer
  • SMF Hero
  • *
  • Posts: 5,238
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Matchup html code
« Reply #3 on: October 22, 2019, 12:12:35 PM »
Like this?

Code: [Select]
<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>

Offline njtweb

  • Sophist Member
  • *****
  • Posts: 1,012
Re: Matchup html code
« Reply #4 on: October 22, 2019, 12:34:33 PM »
That'll do it. Thank you!

Online Mick.

  • Customizer
  • SMF Hero
  • *
  • Posts: 5,238
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Matchup html code
« Reply #5 on: October 22, 2019, 12:35:13 PM »