Abstände innerhalb einer Tabellenzelle

[Ralf]

Hallo!

Nachdem meine Frage mit gleichem Thema gestern offensichtlich nicht verstanden wurde (bzw. die Antworten völlig am Thema vorbei waren), möchte ich sie hier nochmals etwas detaillierter gestellt wiederholen.

Ich habe eine Tabelle, deren Zellen alle gleich groß sind und in px angegeben sind (ja, das macht in diesem Fall Sinn!). Die Größe der Zellen wird berechnet (hängt von der Anzahl Zeilen und Spalten ab).

In diesen Zellen möchte ich nun farbige Flächen anzeigen, wobei die Abstände zwischen Zellenrand und Fläche bekannt sind (werden ebenfalls berechnet).

Mein erster Ansatz sieht so aus:

<table style="width:210px; height:296px; table-layout:fixed; border-collapse:collapse;">  
  ...  
  <tr>  
    ...  
    <td style="width:80px; height:50px; border:1 px solid red;">  
      <div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">  
        ???  
      </div>  
    </td>  
    ...  
  </tr>  
  ...  
</table>

An Stelle der "???" habe ich nun schon diverse Inhalte versucht und auch unterschiedliche CSS-Definitionen sowohl für <td> als auch <div> probiert.
Aber entweder ist der Inhalt zu klein und dadurch die Abstände zum Zellenrand zu groß oder der Inhalt ist zu groß und vergrößert dadurch die umgebende Zelle.

Wie kann ich die Definitionen innerhalb der Zelle so gestalten, dass mein Ziel erreicht wird?

Meine letzte Idee war eine 3x3 Tabelle innerhalb der Zelle, wobei die innere Zelle dieser Tabelle dann farbig wird und die umgebenden Zellen nur die Abstände erzeugen.
Aber vielleicht geht es ja doch einfacher?

Ralf