Ob redundanter Zierrat oder essentielle Information, die Frage lässt sich eindeutig beantworten: Beides.

Es handelt sich bei der Tabelle um einen Veranstaltungskalender, bei dem bestimmte Eigenschaften (für wen, von wem, mit was, wann) sehr platzsparend angezeigt werden - gut für die Darstellung auf dem Handy. Um den relevanten Termin schnell zu finden, sind die Symbole notwendig - alles zu lesen, überfordert viele der heutigen Besucher. Von daher: HTML. Aber aus einem Veranstaltungsnamen "Abendkonzert" kann der Zusammenhang mit Musik geschlossen werden; das Musik-Symbol gehört dann ins CSS.

Mein Hauptargument ist allerdings praktischer Natur; da der Kalender auf fast jeder Seite erscheint, sind die meisten Symbole mehrfach vorhanden. Es geht also um Mehrfachverwendung (auch wenn Bandbreite immer weniger limitierend ist). Tatsächlich habe ich auch SVG-Grafiken, die nur per HTML eingebunden werden.

Derzeit sind die Symbole in den Tabellen mit <center> festgelegt. Außerhalb der Tabellen hat der Ersatz durch .center keine Probleme bereitet.

Dass sich margin-left und margin-right als Ränder außerhalb der Tabellenzelle nicht auswirken sollen, klingt logisch. Denn was wäre ein Margin einer Zelle im Tabellenkontext? Der Abstand zu den Nachbarzellen, wofür es eigene Einstellungen wie border-spacing gibt.

Bleibt die Frage, wie der in der Zelle außerhalb des <div>-Block-Elements noch vorhandene Platz aufgeteilt werden kann.