Если по клику/ховеру на td должен меняется цвет, то можно через :focus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
width: 150px;
height: 150px;
}
.p1, .p2, .p3 {
border: 1px solid black;
transition: 1s;
}
.p1 {
background: red;
color: white;
font-size: 30px;
}
.p2 {
background: yellow;
color: #292929;
font-size: 30px;
}
.p3 {
background: green;
color: black;
font-size: 30px;
}
.p1:focus, .p2:focus, .p3:focus {
background: black;
color: white;
font-size: 40px;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<td class="p1"><center>1</center></td>
<td class="p2"><center>2</center></td>
<td class="p3"><center>3</center></td>
</tr>
<tr>
<td class="p2"><center>4</center></td>
<td class="p3"><center>5</center></td>
<td class="p1"><center>6</center></td>
</tr>
<tr>
<td class="p3"><center>7</center></td>
<td class="p1"><center>8</center></td>
<td class="p2"><center>9</center></td>
</tr>
</table>
</center>
</body>
</html>
Примечание: на моб. устройствах :focus не работает
