Zwei unabhänige Tabellen nebeneinander anzeigen

[kRuzeFiX]

Hallo html.de-Community,

ich bin sowohl in diesem Forum als auch auf dem Gebiert des HTMLs neu und habe gleich eine Frage (habe die Forensuche und Google ausreichend benützt aber nichts gefunden).
Und zwar habe ich zwei unabhängige Tabellen, unabhänig deshalb, da in jedem Tabellenfeld eine Eingabe gemacht werden kann. Diese Eingaben werden dann durch eine Aktion (<form action.../>) und einem Submit Button per PHP und anschließendem SQL Befehl zu einem neuem Datensatz in jenachdem einer von zwei Datenbanken.

Nun habe ich die zwei Tabellen und würde sie gerne zentral mit 5px abstand (per margin?) nebeneinander anordnen. Habe es schon mit float, mit einem css Befehl usw. versucht, bekomme es aber irgendwie nicht so richtig hin.
Habt Ihr Vorschläge?

Gruß,
kRuzeFiX

 

[Degers]

Was ist nun die Frage, wie man 2 Tabellen nebeneinander platzieren kann? Float wäre da schon das richtige Stichwort.

 

[kRuzeFiX]

Was ist nun die Frage, wie man 2 Tabellen nebeneinander platzieren kann?

ja, das ist die Frage.

Aber wie mit Float? Habe echt schon einiges ausprobiert, schaffe es aber einfach nicht...

 

[Degers]

Je nachdem was du vorhast, so ungefähr:

<table style="float:right;width:40%;">
<tr>
<td>Ein Inhalt</td>
<td>Noch Einer</td>
</tr>
<tr>
<td>Ein Dritter</td>
<td>Ein Letzter</td>
</tr>
</table>

<table style="width:40%;">
<tr>
<td>Ein Inhalt</td>
<td>Noch Einer</td>
</tr>
<tr>
<td>Ein Dritter</td>
<td>Ein Letzter</td>
</tr>
</table>

Zwei Tabellen nebeneinander

 

[kRuzeFiX]

Danke! Jetzt sitzen sie schonmal in der gleichen Reihe. Aber die eine am rechten und die andere am linken Bildschirmrand. Wie bekomme ich sie jetzt mittig nebeneinander?

Gruß

 

[Wustersoss]

Wieviele Eingabefelder hast du denn insgesamt. Darfst auch gerne deinen Code hier posten, damit man mal sieht was du schon hast.

 

[Degers]

Bspw. mithilfe von margin. In das (im Beispiel) Inline-CSS den gewünschten Abstand definieren, zB. margin-left:10%;

 

[Space Vampire]

Floate eine Tabelle rechts und eine links.
Am Ende der zweiten tabelle wieder die Floats clearen.
Umgib die beiden Tabellen samt Clearing mit einem Rahmen-Element (z.B. <div></div>)
Gib diesem die gewünschte Gesamtbreite beider Tabellen, samt Zwischenraum, falls erforderlich.
Vermittele das Rahmenelement mit margin:0 auto;

<div style="margin: 0 auto; width: 800px;">						
	<table style="float:right; width:390px;">
		<tr>
			<td>Ein Inhalt</td>
			<td>Noch Einer</td>
		</tr>
		<tr>
			<td>Ein Dritter</td>
			<td>Ein Letzter</td>
		</tr>
	</table>

	<table style="float:left; width390px;">
		<tr>
			<td>Ein Inhalt</td>
			<td>Noch Einer</td>
		</tr>
		<tr>
			<td>Ein Dritter</td>
			<td>Ein Letzter</td>
		</tr>
	</table>
	<br style="clear:both;">
</div>

 

[kRuzeFiX]

Danke Space Vampire und Degers. Jetzt hats funktioniert. Jetzt noch eine allerletzte Frage zur Theorie:
Mit "<div style="margin: 0 auto; width: 800px;">...</div>" definiere ich durch margin den abstand zur anderen Tabelle "0" und mit "auto"?
<table style="float:right; width:390px;">
<table style="float:left; width390px;"> Lassen die Tabellen links oder rechts floaten.
<br style="clear:both;"> das bewirkt hier genau was? Und was genau ist dafür zuständig, dass die Tabellen je nach Eingabe direkt nebeneinander sitzen? Lediglich die Eingaben der beiden Tabellenbreite und die Breite des divs??

Vielen Dank!
Gruß

 

[Space Vampire]

Wer nachfragt will lernen.
da nehm ich mir gerne die Zeit :)

margin: 0 auto;

bezieht sich auf das Rahmenelement <div>, dass deine Tabellen umgibt und bezeichnet dessen Außenabstand
0 ist der Abstand nach oben und unten. Also keiner
auto ist der Abstand nach links und rechts. auto bewirkt, dass nach beiden seitender gleiche Abstand eingehalten wird, also eine Vermittelung zum nächsten übergeordneten Element.
Außenabstände können auch folgendermaßen angegeben werden:

/* vier verschiedene */
margin: 0 10px 20px 15px; /* Abstand im Uhrzeigersinn: oben rechts unten links; */
/* oder einzeln */
margin-top: 0; /* oben */
margin-right: 10px; /* rechts */
margin-bottom: 20px; /* unten */
margin-left:15px; /* links; */

float bewirkt, dass alle nachfolgenden Elemente die gefloateten umfließen.
"Wer floatet muss auch clearen", sagt man gerne.
clear beendet den Umfluss.
Alles was nach einem clear kommt verhält sich wieder völlig normal.
Clearen kann man

clear: left; /* linker Umfluss wird beendet */
clear: right; /* rechter Umfluss wird beendet */
clear: both; /* beide Umflüsse werden beendet */

Beendet man den Umfluss nicht, kann es zu ungewollten verschiebungen in der darstellung des nachfolgenden Codes kommen!

float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[kRuzeFiX]

Vielen Dank :)