Wer ist gut in html? Tabellen...

***storm21*** · 10. März 2020

Versuche verzweifelt jeweils zwei Tabellen aneinander auszurichten, dass sie nebeneinander und nicht untereinander sind...

Jetzt:
Tabelle 1
Tabelle 2
Tabelle 3 usw.

Ich hätte gerne:
Tabelle 1 / Tabelle 2
Tabelle 3 usw

Ich weiss, ich kann die einfach zusammensetzen zu einer, funktioniert auch... Aber ich möchte eine gewissen Abstand dazwischen und das Ausrichten je nach Browser sollte von der Mitte her sein. Ich kann auch mit dem margin schieben aber es stimmt dann nicht bei unterschiedlicher Fenstergrösse... Habe nun das halbe Internet durchsucht, mein Stand das geht gar nicht! Aber geht nicht gibts nicht! Wer kann helfen?

***one0one*** · 10. März 2020

ich habe keine Ahnung von HTML... Was mir aber in den Sinn kommt:

Geht es eventuell mit unterschiedlichem Format der Spalten? Also, zusammengesetzte Tabellen, aber dein "Abstand* in der Hintergrundfarbe formatiert?

Das mit verschiedenen Fenstergroessen muesste doch mit relativen Abstaenden und Spaltenbreiten zu machen sein? Oder geht das bei HTML auch nicht?

Cheers

Passy · 10. März 2020

Musst die beiden stylen, mit display: flex zB.
Ist also ein CSS und nicht ein HTML Problem

***storm21*** · 10. März 2020

@one0one Das ist ein Test den ich gemacht habe, die Platzhalter Zelle kann ich sogar transparent machen oder anderst farbig... Aber gefällt nicht soo, weil der Rahmen ist halt durchgezogen.

@Passy Hmmm, so Zeug hab ich schon gelesen, hab auch mit "display: grid" rumgespielt, aber das Problem ist: Oben ist eine Texttabelle zentriert und unten sollen jeweils die zwei Tabellen runter, wenn es nicht aufgeht mit den Anzahl die letzte wieder einzeln zentriert... Dann ordnet es alles falsch an. Puhh ist das Zeug mühsam Das heisst das wird nen riesen Ding das wieder alles zusammenzugoogeln mit dem css...

display: flex, ok aber das reicht doch sicher noch nicht, wie ordne ich die dinger dann an? z.B. Tabelle1 -Abstand 100px- Tabelle2, dann runter z.B. 50px, die nächsten zwei

Passy · 11. März 2020

Wenn ichs nicht verpenn versuch ich dir mal ein beispiel in den nächsten Tagen zu machen

Edit: Hatte sowas ähnliches, nur mit nem Canvas. Wenn du die untereinander drücken willst wenn du es arg klein machst, haust du das mit dem display: flex in einen @media screen and (min-width: 768px) Block ( { ... } ), dann schiebts die Tabellen untereinander wenn das Fenster schmäler als 768 Pixel wird.

Ansonsten hier der Quellcode der HTML:

HTML: tables.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Tables PoC</title>
    <link  type="text/css" href="tables.css">
</head>
<body>
<main>


    <div id="tablefield">
        <div>
            <h3>Tabelle 1</h3>
            <table class="tables">
                <tr>
                    <th>Berlin</th>
                    <th>Hamburg</th>
                    <th>München</th>
                </tr>
                <tr>
                    <td>Miljöh</td>
                    <td>Kiez</td>
                    <td>Bierdampf</td>
                </tr>
                <tr>
                    <td>Buletten</td>
                    <td>Frikadellen</td>
                    <td>Fleischpflanzerl</td>
                </tr>
            </table>
        </div>


        <div>
            <h3>Tabelle 2</h3>


            <table class="tables">
                <tr>
                    <th>Berlin</th>
                    <th>Hamburg</th>
                    <th>München</th>
                </tr>
                <tr>
                    <td>Miljöh</td>
                    <td>Kiez</td>
                    <td>Bierdampf</td>
                </tr>
                <tr>
                    <td>Buletten</td>
                    <td>Frikadellen</td>
                    <td>Fleischpflanzerl</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Alles anzeigen

Diese packst du zusammen mit der CSS in dein Webserver-Root Verzeichnis und versuchst es mal. Die css sollte laut dem html Doc tables.css heißen.

Hier die CSS:

CSS: tables.css

* {
    font-family: sans-serif;
}
html, body{
    margin: 0;
}


main {
    margin: 2%;
}
.tables{
    background: aqua;
    width: 100%;
}
#tablefield *{
    margin-right: 1em;
}
#tablefield > div {
    width: 50%;
}


@media screen and (min-width: 768px){
    #tablefield{
        display: flex;
    }
}

Alles anzeigen

Ich hab dir das mit den drunter schieben mal doch mit reingehängt, hab ja oben beschrieben wo es geschieht.

Allgemein:
Die Crux hinter dem ganzen: Du machst statt der id tables vom äußeren div einfach eine Klasse tables und dadurch kannst du das ganze copy & pasten wie du willst. Spiel mal ein wenig damit rum, dann verstehst du was ich meine

***storm21*** · 12. März 2020

@Passy Danke! Sieht schon mal gut aus, habs bisschen abgeändert um ein File zu haben... Werde noch rumspielen damit...

HTML

<!DOCTYPE html>


<html>


<head>


    <title>Tables PoC</title>


    <style>


        body {
            margin: 0;
        }


        main {
            margin: 2%;
        }


        .tables {
            background: aqua;
            width: 100%;
        }


        #tablefield * {
            margin-right: 1em;
        }


        #tablefield > div {
            width: 50%;
        }


        @media screen and (min-width: 768px) {
            #tablefield {
                display: flex;
            }
        }
    </style>


</head>


<body>
    <main>
        <div id="tablefield">
            <div>
                <h3>Tabelle 1</h3>
                <table class="tables">
                    <tr>
                        <th>Berlin</th>
                        <th>Hamburg</th>
                        <th>München</th>
                    </tr>
                    <tr>
                        <td>Miljöh</td>
                        <td>Kiez</td>
                        <td>Bierdampf</td>
                    </tr>
                    <tr>
                        <td>Buletten</td>
                        <td>Frikadellen</td>
                        <td>Fleischpflanzerl</td>
                    </tr>
                </table>
            </div>
            <div>
                <h3>Tabelle 2</h3>
                <table class="tables">
                    <tr>
                        <th>Berlin</th>
                        <th>Hamburg</th>
                        <th>München</th>
                    </tr>
                    <tr>
                        <td>Miljöh</td>
                        <td>Kiez</td>
                        <td>Bierdampf</td>
                    </tr>
                    <tr>
                        <td>Buletten</td>
                        <td>Frikadellen</td>
                        <td>Fleischpflanzerl</td>
                    </tr>
                </table>
            </div>
        </div>
    </main>
</body>
</html>

Alles anzeigen

Ist es auch möglich die Tabellengrösse fix zu haben? Wenn ich das Fenster verkleinere...

Hier mal mein Beispiel, bin recht zufrieden damit... Alles fix verschiebt sich nichts.

Code

<table style="margin: 0pt auto; background-color: transparent; width: 1020px; height: 63px; text-align: left;">
  <tbody>
    <tr>
        <td style="width: 155px; height: 63px; text-align: center;">
            <p align="center" style="margin-top: 0; margin-bottom: 0"><a class="btn" href="#" onclick="goto('HEN_VTX/index.html');"><b><font face="Arial" color="#FFFFFF" size="7"><img border="0" src="hen.png" align="left" width="155" height="63"></font></b></a></p>
        </td>
        <td style="width: 345px; height: 63px; text-align: center; background-color: silver;">
            <p style="margin-top: 0; margin-bottom: 0"><b>HEN-VTX</b></p>
            <p style="margin-top: 0; margin-bottom: 0"><font size="1">PS4 5.05 Kernel Exploit HEN-VTX 2.12 Homebrew Enabler Payload</font></p>
        </td>
      <td style="width: 50px; height: 63px; text-align: center; background-color: transparent;">
      <br>
      </td>
      <td style="width: 155px; height: 63px; text-align: center; background-color: silver;">
          <p align="center" style="margin-top: 0; margin-bottom: 0"><a class="btn" href="#" onclick="goto('HEN_Mira/index.html');"><b><font face="Arial" color="#FFFFFF" size="7"><img border="0" src="hen.png" align="left" width="155" height="63"></font></b></a></p>
      </td>
      <td style="width: 345px; height: 63px; text-align: center; background-color: silver;">
          <p style="margin-top: 0; margin-bottom: 0"><b>HEN-MIRA</b></p>
          <p style="margin-top: 0; margin-bottom: 0"><font size="1">PS4 5.05 Kernel Exploit HEN-MIRA (Specter) Homebrew Enabler Payload</font></p>
      </td>
    </tr>
  </tbody>
</table>

Alles anzeigen

Passy · 12. März 2020

Ist es jetzt so wie du es haben wolltest? Ansonsten, was meinst du mit fix?
Nichts zu danken, helfe gern wo ich kann

***storm21*** · 12. März 2020

Also ich habe fünf Möglichkeiten gemacht und die unten ist recht gelungen Bei mir sind die Tabellen eben verbunden, aber mit den Farben und Rahmen so gelöst. Denke ist ok so...

Aber dein Template ist recht gut und fexibel, werde damit auch noch was ausarbeiten, weil eben die Tabellen getrennt sind. Mit dem fix meine ich, wenn du das Fenster verkleinerst oder halt andere Auflösung hast verschieben sich die Tabellen. Bei mir ist das fix. (Grösse und Position) Das Bild wird einfach geschnitten und man muss scrollen. Kein überlappen, zusammenschieben usw.

Passy · 12. März 2020

das lässt sich im übrigen auf alle html Objekte anwenden. Die Magie wird da ja durch den Äußeren div gebastelt. Im Div Sind dann die Objekte, die mit einer Klasse gestyled werden. Kannst also auch 3 Tables mit width 33% hinbauen
Falls du nochmal irgendwie was brauchen solltest im HTML/CSS/JS Bereich, komm gern auf mich zu

***storm21*** · 13. März 2020

Genau das ist das Gute daran Das Angebot nehme ich gerne an! Danke nochmals...

Wer ist gut in html? Tabellen...

Jetzt mitmachen!

Teilen