Tabellen

[franzsen]

Ich hatte mit dem alten html zwei Tabellen so gestaltet, daß ich in jeder Zeile zwischen den betreffenden Spalten eine leere Spalte eingefügt habe. Optisch hatte es den Eindruck als würden zwei Tabellen in einem bestimmten Abstand nebeneinander stehen.

Mit html5 geht das sicher eleganter? Außerdem ist der alte inline-Code ziemlich üppig. Wie gestalte ich das? Erzeugt "table" einen block? Benötigt werden zwei Tabellen mit je zwei Spalten. Beide sollten mit Abstand nebeneinander stehen.

Meine Überlegung wäre zwei Tabellen mit einer id, position: relativ und float: left. Nun könnte ich diese Idee ausprobieren aber ich denke, es wäre verlorene Zeit wenn das Prozedere anders ist und ich die Übung gleich mit der richtigen Methode mache.

[Sara]

Hallo,

die Frage hast du dir bestimmt schon selber gestellt, ist eine Tabelle überhaupt nötig? Wenn ja dann würde ich dieses wohl so umsetzten

<section>                  
	<table class="table">
           <thead>
             <tr>
               <th>Titel 1</th>
               <th>Titel 2</th>
               <th>Titel 3</th>

             </tr>
           </thead>

           <tbody>
             <tr>
               <td>Inhalt 1</td>
               <td>Inhalt 2</td>
               <td>Inhalt 3</td>
             </tr>
           </tbody>
    </table>

    	<table class="table">
           <thead>
             <tr>
               <th>Titel 1</th>
               <th>Titel 2</th>
               <th>Titel 3</th>

             </tr>
           </thead>

           <tbody>
             <tr>
               <td>Inhalt 1</td>
               <td>Inhalt 2</td>
               <td>Inhalt 3</td>
             </tr>
           </tbody>
    </table>
    <br style="clear:both;">
</div>

Und bisschen CSS dazu

section {
	width: 50%;
	margin: 0 auto;
}
.table {
	display: inline-block; 
	width:45%;
	text-align: left;
}

[Rita Rosenkohl]

<section>
<table class="table">

</table>
<br style="clear:both;">

</div>

Jetzt mal abgesehen davon, dass dir am Ende ein </div> statt des </section> rausgerutscht ist: <section> (oder sonst ein klammerndes Element) ist für das Problem bzw. dessen Lösung überflüssig, ebenso <br> bzw. das enthaltene clear. Nicht nur überflüssig, sondern schon als kurios würde ich <table class="table"> bezeichnen. Du brauchst in diesem Beispiel keinen Klassenbezeichner (weil keine anderen Tabellen da sind), benennst ihn dann aber auch noch nach dem Element selbst.

.table { display: inline-block; width:45%; text-align: left; }

text-align und width sind ebenfalls überflüssig.

Worauf ich hinaus will: Deine Problemlösung könnte eigentlich aus der einzelnen Zeile mit display:inline-block bestehen. Leider verschleierst du das mit dem ganzen Budenzauber drumherum.

Und dann muss ich dummerweise anfügen, dass display:inline-block bei einem Tabellenelement in die Hose gehen dürfte, da diese ihren eigenen display-Wert table haben. Vermutlich muss stattdessen jede Tabelle einzeln in ein <div> gekapselt und diesen dann jeweils display:inline-block verpasst werden.

[Gunnar Bittersmann]

@@Rita Rosenkohl

.table { display: inline-block; width:45%; text-align: left; }

text-align und width sind ebenfalls überflüssig.

Nein und nein.

Da text-align vererbt wird, kann man mit der Angabe für table die einheitliche Textausrichtung in th- und td-Elementen erzielen.

Und wenn die Tabelle eben 45% der Breite des umgebenden Containers einnehmen soll, ist width genau richtig.

Richtig erkannt hast du die Problematik mit display: inline-block. Allerdings nicht die Lösung.

Vermutlich muss stattdessen jede Tabelle einzeln in ein <div> gekapselt und diesen dann jeweils display:inline-block verpasst werden.

Nö, wozu? display: inline-table existiert.

LLAP 🖖

[Rita Rosenkohl]

.table { display: inline-block; width:45%; text-align: left; }

text-align und width sind ebenfalls überflüssig.

Nein und nein.

Da text-align vererbt wird, kann man mit der Angabe für table die einheitliche Textausrichtung in th- und td-Elementen erzielen.

Was hat das mit der Frage nach der Positionierung der Tabellen nebeneinander zu tun?

Und wenn die Tabelle eben 45% der Breite des umgebenden Containers einnehmen soll, ist width genau richtig.

Was hat das mit der Frage nach der Positionierung der Tabellen nebeneinander zu tun?

[Auge]

Hallo

Da text-align vererbt wird, kann man mit der Angabe für table die einheitliche Textausrichtung in th- und td-Elementen erzielen.

Was hat das mit der Frage nach der Positionierung der Tabellen nebeneinander zu tun?

Und wenn die Tabelle eben 45% der Breite des umgebenden Containers einnehmen soll, ist width genau richtig.

Was hat das mit der Frage nach der Positionierung der Tabellen nebeneinander zu tun?

Wenn du sagst „text-align und width sind ebenfalls überflüssig.“, erweckst du den Eindruck, dass man text-align und width bei Tabellen nicht benutzen soll. Das ist falsch. Wenn du hättest aussagen wollen, dass die Angabe von text-align und width nichts mit dem konkreten Problem zu tun haben, hättest du genau das sagen sollen.

Tschö, Auge

[Sara]

Hallo,

Jetzt mal abgesehen davon, dass dir am Ende ein </div> statt des </section> rausgerutscht ist: <section> (oder sonst ein klammerndes Element) ist für das Problem bzw. dessen Lösung überflüssig, ebenso <br> bzw. das enthaltene clear. Nicht nur überflüssig, sondern schon als kurios würde ich <table class="table"> bezeichnen.

wenn du mein edit angeschaut hättest, dann hättest du gesehen, dass ich zuerst ein folat:left genommen hatte. Ich hatte es dann allerdings geändert und vergessen das <br> zu löschen. Sorry dafür.

Du brauchst in diesem Beispiel keinen Klassenbezeichner (weil keine anderen Tabellen da sind), benennst ihn dann aber auch noch nach dem Element selbst.

Mag sein, dass man es für dieses Beispiel nicht braucht, ein HTML soll robust sein und ein Klassenbezeichner mehr oder weniger stört keinen. Außerdem soll das ganze bestimmt in eine bestehende Seite eingebunden werden, also kann davon ausgegangen werden, dass es vielleicht noch weitere Tabelle existieren.

[Gunnar Bittersmann]

@@Sara

ein Klassenbezeichner mehr oder weniger stört keinen.

Wirklich nicht?

Außerdem soll das ganze bestimmt in eine bestehende Seite eingebunden werden, also kann davon ausgegangen werden, dass es vielleicht noch weitere Tabelle existieren.

Für den Fall wäre aber eine Klasse "table" für eine bestimmte Sorte von Tabellen ziemlich blöd benannt.

LLAP 🖖

[Rita Rosenkohl]

wenn du mein edit angeschaut hättest

Wenn du gewollt hättest, dass deine vorige Antwort stehen bleibt, hättest du sie nicht geändert. Schon der Anständigkeit halber sollte Zurückgezogenes auch als solches behandelt, d.h. ignoriert werden. Und davon unabhängig sehe ich auch nicht, warum man sich zusätzlich zur Antwort auch noch durch ihre Entstehungsgeschichte wühlen soll; eine Änderungsmöglichkeit ist doch gerade dazu da, eine in sich stimmige Antwort zu geben.

Mag sein, dass man es für dieses Beispiel nicht braucht, ein HTML soll robust sein

Wie schon geschrieben: Mir war das zu viel Tralala drumherum, eineinhalb Sätze mit dem Hinweis auf die display-Eigenschaft hätten zur Beantwortung gereicht.

[franzsen]

Hallo,

die Frage hast du dir bestimmt schon selber gestellt, ist eine Tabelle überhaupt nötig? Wenn ja dann würde ich dieses wohl so umsetzten

Meines Erachtens schon. Es soll sämtliche Linien, die bereits erforscht wurden, auflisten.

<table>
  <caption>Pree</caption>
   <colgroup>
     <col width="80">
     <col width="400">
  </colgroup>
  <tbody>
   <tr>
    <td style="vertical-align: top;"><a href="Pree/Die Linie Adam/index.html">Adam Pree</td>
    <td style="vertical-align: top;">Diese Linie stammt aus Maissau (ca. 1689).</td>
   </tr>
  </tbody>
</table>

<style>
caption {
  background-color: aqua;
  }
table, caption, td {
  border: 1px solid;
  }
</style>

<br style="clear:both;">

</div>

Wozu ein "br"? Das clear ist mir schon klar. das </div> sollte eigentlich </section> heißen?

Und bisschen CSS dazu

Wird da nicht auch wieder getrickst? Da könnte ich ja wieder eine fünfspaltige Tabelle erzeugen wobei die mittlere eine leere ist?

Ich habe es etwas umgebaut und jede Tabelle einmal links und einmal rechts gefloatet, die nötigen Prozente eingeteilt und ich glaube so dürfte es passen.

[Rita Rosenkohl]

Und bisschen CSS dazu

Wird da nicht auch wieder getrickst? Da könnte ich ja wieder eine fünfspaltige Tabelle erzeugen wobei die mittlere eine leere ist?

Die Daten deiner beiden Tabellen gehören nicht tabellarisch zusammen, das sind zwei Familien, jeweils Name und Info als Spalten.

Wo du nun CSS-seitig Trickserei siehst, kann ich nicht nachvollziehen. Du hast float benutzt, Saras Lösung setzt stattdessen auf display:inline-table (nicht inline-block). Der Effekt ist der gleiche, display:inline (-table/-block) halte ich allerdings für grundsätzlich leichter unter Kontrolle zu halten als die Floaterei, weil inline schlicht das macht, was gefordert ist, nämlich Elemente nebeneinander in eine Zeile stellen. float ist nicht fürs banale Nebeneinanderstellen gedacht, sondern um eine beliebige Textmenge um ein Element herumfließen zu lassen – das ist dann doch ein deutlicher Unterschied.

[franzsen]

Ich habe das Problem so gelöst:

http://members.aon.at/meine_private_seite/#

Ich glaube, daß hier eine Tabelle geeignet ist.