Simon Viell: Tabelle neben Text

SELF-Forum

Tabelle neben Text

Simon Viell
– Informationen zu den Bewertungsregeln

Hallo liebes Forum,

ich habe folgendes Problem: Ich arbeite gerade an einer kleinen Website und hab mir gedacht, ich könnte ja links neben Text und Bild (beide zentriert) eine Tabelle einfügen. Hat auch geklappt, aber der Text war auf einmal rechtsbündig. Ich habe alles mögliche ausprobiert, aber Pustekuchen, der Text bleibt rechts. Vielleicht hat ja hier jemand eine Idee, wie die Sache wieder geradegestellt werden kann.

MfG Simon

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabelle neben Text

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@Simon Viell

    Vielleicht hat ja hier jemand eine Idee, wie die Sache wieder geradegestellt werden kann.

    Ich habe eine Idee, wie die Sache erstmal vor‍gestellt werden kann.

    Durch dich: Zeige die problematische Seite!

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

  2. Tabelle neben Text

    MrMurphy1
    +1 Informationen zu den Bewertungsregeln

    Hallo

    ich könnte ja links neben Text und Bild (beide zentriert) eine Tabelle einfügen.

    Das könnte zum Beispiel so aussehen:

    <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Tabelle neben zentrierter Box</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         line-height: 1.6;
      }
      html {
         font-size: 100%;
      }
      body {
         width: 98%;
         padding: 0;
         margin: 1rem auto;
      }
      main {
         display: flex;
      }
      article {
         width: 40%;
         padding: 1rem;
         border: 1px solid #666;
         margin-right: 30%;
      }
      article h1 {
         font-family: Times, "Times New Roman", serif;
         font-variant: small-caps;
         margin-bottom: 2rem;
      }
      img {
         max-width: 100%;
      }
      table {
         width: 28%;
         padding: 1rem;
         border: 1px solid silver;
         margin: 0 1%;
      }
      th,
      td {
         text-align: left;
         vertical-align: top;
         padding: 0.3rem 0.7rem;
      }
   }
   </style>
</head>
<body>
   <main>
      <table>
         <caption>Caption: Eine Beispieltabelle</caption>
         <colgroup> <!-- CSS-Zugriff auf Spalten -->
            <col class="col01" />
            <col class="col02" />
            <col class="col03" />
         </colgroup>
         <thead>
            <tr>
               <th></th>
               <th>Banane</th>
               <th>Kiwi</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th>VW</th>
               <td>0101</td>
               <td>0102</td>
            </tr>
            <tr>
               <th>Mercedes</th>
               <td>0201</td>
               <td>0202</td>
            </tr>
            <tr>
               <th>Audi</th>
               <td>0301</td>
               <td>0302</td>
            </tr>
            <tr>
               <th>BMW</th>
               <td>0401</td>
               <td>0402</td>
            </tr>
            <tr>
               <th>Jaguar</th>
               <td>0501</td>
               <td>0502</td>
            </tr>
         </tbody>
         <tfoot> <!-- tfoot muss nicht mehr direkt hinter thead stehen -->
            <tr>
               <td colspan="3">Der tfoot der Tabelle.</td>
            </tr>
         </tfoot>
      </table>
      <article>
         <h1>Überschrift</h1>
         <img src="https://c1.staticflickr.com/3/2442/4343722845_f4dd1d3447.jpg" alt="Ein schönes Bild">
         <p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.</p>         
      </article>
   </main>
</body>
</html>

    Gruss

    MrMurphy

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln