Table: Width, Margin, usw.

[bleumi85]

Hallo liebes Forum!

Ich habe mir einen Kalender mittels PHP gebaut und jetzt soll der "schön" werden. Optisch sieht meiner allerdings so aus: Kalender unschön

Mein Problem ist jetzt, dass ich es nicht hinbekomme den tbody unterhalb der caption zu positionieren, weder mit margin, noch mit padding, noch mit sonstwas. Und mein Zeil das ich erreichen möchte ist dieses hier: Kalender schön

Das ist mein Aufbau für den Januar 2016:

<table class="kalender" id="cal-1">
  <caption><span>Januar</span><br><span>2016</span></caption>
  <thead>
    <tr>
      <th>KW</th>
      <th>Mo</th>
      <th>Di</th>
      <th>Mi</th>
      <th>Do</th>
      <th>Fr</th>
      <th>Sa</th>
      <th>So</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="kal_kw">53</td>
      <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>
    <tr>
      <td class="kal_kw">1</td>
      <td class="tag_standard">4</td>
      <td class="tag_standard">5</td>
      <td class="tag_standard">6</td>
      <td class="tag_standard">7</td>
      <td class="tag_standard">8</td>
      <td class="tag_standard">9</td>
      <td class="tag_standard">10</td>
    <tr>
  </tbody>
</table>

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;
}

.kalender caption{
	background:white;
	text-transform:uppercase;
	padding:1em;
	width:38em;
}

.kalender caption span:last-child{
	font-size:0.6em;
	color:#bbb;
}

.kalender{
	display:inline-block;
	margin:3em;
	border-collapse:collapse;
}

.kalender th, .kalender td{
	width:4em;
	height:4em;
	border:1px solid #ccc;
}

Hat jemand nen schlauen Tipp für mich wie ich den Body mittig unter die Caption bekomme?

[Matthias Apsel]

Hallo bleumi85,

Hat jemand nen schlauen Tipp für mich wie ich den Body mittig unter die Caption bekomme?

Verzichte auf Breiten- und Höhenangaben für table und caption.

Bis demnächst
Matthias

[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 🖖

[bleumi85]

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]

[MrMurphy1]

Hallo

Das Grundproblem ist, dass hier eine Tabelle zum Layouten mißbraucht wird.

Kalenderdaten sind keine Tabellendaten.

Das ist um so trauriger da auf der verlinkten Vorbildseite korrekterweise auf Tabellen verzichtet wird. Das andere Elemente als die dort massiv verwendeten div heutzutage sinnvoller sind ist ein anderes Thema.

Zusätzlich ließe sich die Seite ohne das unsinnige table-Element viel flexibler an die unterschiedlichen Fenstergrößen und Endgeräte anpassen. Mit dem sachlich falschen table-Element kaufst du also zugleich unnötige Nachteile ein.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Das Grundproblem ist, dass hier eine Tabelle zum Layouten mißbraucht wird.

Kalenderdaten sind keine Tabellendaten.

Zeilen: Kalenderwochen, Spalten: Wochentage. Ich kann hier keinen Missbrauch feststellen.

Handelt es sich um tabellarische Daten? IMHO ja, also ist alles andere als eine Tabelle falsch. (Danke, Cheatah.)

Zusätzlich ließe sich die Seite ohne das unsinnige table-Element viel flexibler an die unterschiedlichen Fenstergrößen und Endgeräte anpassen.

Nicht 7 Tage nebeneinander, sondern 5? Kann man machen, nur ist es dann kein Kalender mehr.

LLAP 🖖

[Matthias Apsel]

Hallo MrMurphy1,

Kalenderdaten sind keine Tabellendaten.

Das sehe ich nicht so. Wenn man sich dafür entscheidet, jedem Tag ein eigenes Element zu geben, ist ein Tabelle die richtige Wahl. Wenn man das aus Gründen nicht tut, könnte man (z.B.) diese Tabellen viel eher als Layouttabellen brandmarken.

Das ist um so trauriger da auf der verlinkten Vorbildseite korrekterweise auf Tabellen verzichtet wird. Das andere Elemente als die dort massiv verwendeten div heutzutage sinnvoller sind ist ein anderes Thema.

Die Klassenbezeichnungen zeigen, dass nichts weiter versucht wurde, als eine Tabelle nachzubauen. Mit allen bekannten Nachteilen: Die Zuordnung zum Wochentag wird durch redundante Span-Elemente versucht, data-*-Attribute wären besser aber bei einer Tabelle ebenfalls nicht notwendig, eine mögliche Zuordnung zur Kalenderwoche erfolgt nicht.

Zusätzlich ließe sich die Seite ohne das unsinnige table-Element viel flexibler an die unterschiedlichen Fenstergrößen und Endgeräte anpassen. Mit dem sachlich falschen table-Element kaufst du also zugleich unnötige Nachteile ein.

Nicht zuletzt aufgrund ihrer Flexibilität wurden Tabellen jahrzehntelang als Layoutmittel missbraucht. So ist das auch heute noch, eine Tabelle ohne Größenangaben sieht ohne Aufwand auf jedem Endgerät ordentlich aus. Das trifft in besonderer Weise auf eine Tabelle zu, die lediglich einen Kalendermonat zeigt.

Bis demnächst
Matthias