Table: Width, Margin, usw.
bearbeitet von Matthias ApselErst 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"}