Erst mal vielen Dank für die vielen Hinweise, die mir alle wirklich sehr geholfen haben. Ich mag dieses Forum, da einem immer kompetent und freundlich geholfen wird. :) > [Vollzitat entfernt]

Erst mal vielen Dank für die vielen Hinweise, die mir alle wirklich sehr geholfen haben. Ich mag dieses Forum, da einem immer kompetent und freundlich geholfen wird. :) > @@bleumi85 > > > ~~~html > > <caption><span>Januar</span><br><span>2016</span></caption> > > ~~~ > > Hier würde ich die `span`s noch geschwätziger machen, was sie denn so in sich haben, z.B. mit Klassen: > > ~~~html > <caption> > <span class="monat">Januar</span> > <span class="jahr">2016</span> > </caption> > ~~~ > > Und schon ist man das unschöne `br`-Element los; wenn gewünscht den Elementen `display: block` verpassen. > > > ~~~html > > <tbody> > > <tr> > > <td class="kal_kw">53</td> > > ~~~ > > Für Kopfzellen ist das `th`-Element da. Nicht nur für Spaltenköpfe, sondern auch für Zeilenköpfe: > > ~~~html > <tbody> > <tr> > <th>53</th> > ~~~ > > Und schon ist man auch die Klasse `kal_kw` los; wenn gewünscht kann man ja `.kalender thead th`{: .language-css style="white-space: nowrap"} und `.kalender tbody th`{: .language-css style="white-space: nowrap"} anders stylen. > > > ~~~html > > <td class="tag_anderer">28</td> > > <td class="tag_anderer">29</td> > > <td class="tag_anderer">30</td> > > <td class="tag_anderer">31</td> > > <td class="tag_standard">1</td> > > <td class="tag_standard">2</td> > > <td class="tag_standard">3</td> > > <tr> > > ~~~ > > Die Klasse `tag_anderer` für die Tage des vorigen und folgenden Monats macht durchaus Sinn; die Klasse `tag_standard` für die Tage des aktuellen Monats macht keinen. Du stylst `.kalender td`{: .language-css style="white-space: nowrap"}; Abweichungen gibst du für `.kalender .tag_anderer`{: .language-css style="white-space: nowrap"} an. > > Am Ende muss natürlich `</tr>`{: .language-html} stehen, im Dabblet ist’s aber richtig. > > ~~~html > <td class="tag_anderer">28</td> > <td class="tag_anderer">29</td> > <td class="tag_anderer">30</td> > <td class="tag_anderer">31</td> > <td>1</td> > <td>2</td> > <td>3</td> > </tr> > ~~~ > > > Und mein zugehöriges CSS zum testen sieht bisher wie folgt aus: > > > > ~~~css > > body{ > > background:#333; > > text-align:center; > > } > > > > .kalender{ > > width:40em; > > height:40em; > > background:blue; > > } > > ~~~ > > Im Dabblet hast du für `.kalender`{: .language-css} auch noch `display: inline`{: style="white-space: nowrap"}; was nicht wirklich Sinn macht. Irgendwas muss ja `display: (inline-)table`{: style="white-space: nowrap"} haben; wenn es kein solches Element gibt, wird eine anonyme Box mit `display: table`{: style="white-space: nowrap"} angelegt. > > Du könntest stattdessen `display: inline-table`{: style="white-space: nowrap"} setzen; so richtig sinnvoll ist das aber auch nicht. Besser du lässt das auf `display: table`{: style="white-space: nowrap"} (gibst also gar nichts an, weil Default) und zentrierst die Tabelle per `margin: auto`{: style="white-space: nowrap"}. > > Dann willst du `text-align: center`{: style="white-space: nowrap"} vielleicht auch nicht für `body`{: .language-css} angeben, sondern für `.kalender`{: .language-css}. > > Wenn du `.kalender`{: .language-css} noch etwas `border` gibst, geht das wohl in die von dir gewünschte Richtung, siehe [Dabblet](http://dabblet.com/gist/449c8bb5ee8423042c964f1e0ba217f0). > > LLAP 🖖 > -- > _“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/) > _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}