Table: Width, Margin, usw.

[Gunnar Bittersmann]

@@bleumi85

  <caption><span>Januar</span><br><span>2016</span></caption>

Hier würde ich die spans noch geschwätziger machen, was sie denn so in sich haben, z.B. mit Klassen:

  <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.

  <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:

  <tbody>
    <tr>
      <th>53</th>

Und schon ist man auch die Klasse kal_kw los; wenn gewünscht kann man ja .kalender thead th und .kalender tbody th anders stylen.

      <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; Abweichungen gibst du für .kalender .tag_anderer an.

Am Ende muss natürlich </tr> stehen, im Dabblet ist’s aber richtig.

      <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:

body{
	background:#333;
	text-align:center;
}

.kalender{
	width:40em;
	height:40em;
	background:blue;
}

Im Dabblet hast du für .kalender auch noch display: inline; was nicht wirklich Sinn macht. Irgendwas muss ja display: (inline-)table haben; wenn es kein solches Element gibt, wird eine anonyme Box mit display: table angelegt.

Du könntest stattdessen display: inline-table setzen; so richtig sinnvoll ist das aber auch nicht. Besser du lässt das auf display: table (gibst also gar nichts an, weil Default) und zentrierst die Tabelle per margin: auto.

Dann willst du text-align: center vielleicht auch nicht für body angeben, sondern für .kalender.

Wenn du .kalender noch etwas border gibst, geht das wohl in die von dir gewünschte Richtung, siehe Dabblet.

LLAP 🖖