Tabellenfeld zum anklicken

[werny]

Hallo,

ich habe eine Tabellenzeile mit meinen social Links erstellt.
Das jeweilige Icon ist jetzt anklickbar.
Habe aber gemerkt, dass der Link im Icon nicht gut sichtbar ist.
Also möchte ich, dass die ganze Zelle ein anklickbarer link sein sollte.
Wie kann ich das umstellen? Kann ich den Link in den jeweilgen ".tg-facebook" in der stlye Section hinterlegen?
Wer kann mir da helfen?

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin-bottom:-20px;margin-top:-1px;}
.tg  td{font-family:Arial;font-size:25px;padding:0px;}
.tg  th{font-family:Arial;font-size:25px;font-weight:normal;padding:15px;}
.tg .tg-facebook{background-color:#1e77f0;color:#ffffff;text-align:center}
.tg .tg-instagram{background-color:#e0396b;color:#ffffff;text-align:center}
.tg .tg-x{background-color:#000000;color:#ffffff;text-align:center}
.tg .tg-mastodon{background-color:#5f59f1;text-align:center}
.tg .tg-discord{background-color:#5865f2;color:#ffffff;text-align:center}
#bot a:link, #bot a:visited{color:white;}
#bot a:hover{color:#cccccc;}
</style>
<table class="tg">
  <tr>
    <th class="tg-bluesky"><div id='bot'><a href="#"><i class="fa-brands fa-bluesky"></i></a></div></th>
    <th class="tg-mastodon"><div id='bot'><a href="#"><i class="fa-brands fa-mastodon"></i></a></div></th>
    <th class="tg-discord"><div id='bot'><a href="#"><i class="fa-brands fa-discord"></i></a></div></th>
  </tr>
</table>