Hi, i’ve started learning HTML and CSS this week. Along side the course on here im trying a little project to make a football scores page. I want to give the 2 yellow s in the middle columns slightly more width but i’ve got stuck. I did it with padding but then i couldn’t change their color. Any feedback would be nice please.
HTML
<table>
<th colspan="4">
<h1>Premier League Scores</h1>
</th>
<tr>
<td class="home">West Hame United</td>
<td class="score">1</td>
<td class="score">1</td>
<td class="away">Chelsea</td>
</tr>
<tr>
<td class="home">Arsenal</td>
<td class="score">1</td>
<td class="score">1</td>
<td class="away">Brentford</td>
</tr>
<tr>
<td class="home">Crystal Palace</td>
<td class="score">1</td>
<td class="score">1</td>
<td class="away">Bright & Hove Albion</td>
</tr>
<tr>
<td class="home">Fulham</td>
<td class="score">2</td>
<td class="score">0</td>
<td class="away">Nottingham Forest</td>
</tr>
<tr>
<td class="home">Leicester City</td>
<td class="score">4</td>
<td class="score">1</td>
<td class="away">Tottenham Hotspur</td>
</tr>
<tr>
<td class="home">Southampton</td>
<td class="score">1</td>
<td class="score">2</td>
<td class="away">Wolverampton Wanderers</td>
</tr>
<tr>
<td class="home">AFC Bournemouth</td>
<td class="score">1</td>
<td class="score">1</td>
<td class="away">Newcastle United</td>
</tr>
<tr>
<td class="home">Leeds United</td>
<td class="score">0</td>
<td class="score">2</td>
<td class="away">Manchester United</td>
</tr>
<tr>
<td class="home">Manchester City</td>
<td class="score">3</td>
<td class="score">1</td>
<td class="away">Aston Villa</td>
</tr>
<tr>
<td class="home">Liverpool</td>
<td class="score">2</td>
<td class="score">0</td>
<td class="away">Everton</td>
</tr>
</table>
CSS
table {
margin: auto;
border: 1px solid black;
font-family: Tahoma;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
.home {
text-align: right;
padding-right: 50px;
width: 50%;
font-weight: bold;
}
.away {
text-align: left;
padding-left: 50px;
width: 50%;
font-weight: bold;
}
.score {
background-color: yellow;
}