Text in einer Tabelle on top schieben

Diskutiere Text in einer Tabelle on top schieben im CSS Forum im Bereich Programmierung; Guten Tag. Programmieren kann ich überhaupt nicht, aber ich bin fleissiger Websiteersteller für meine privaten Homepages. Ich habe eine Tabelle...
Neues Thema erstellen Antworten
  • Text in einer Tabelle on top schieben Beitrag #1
G
Gast5162
Guten Tag. Programmieren kann ich überhaupt nicht, aber ich bin fleissiger Websiteersteller für meine privaten Homepages.

Ich habe eine Tabelle mit 3 Spalten und 4 Zeilen angelegt. da in der mittleren Spalte ein etwas längerer Text steht, erscheint dieser mehrzeilig. Dabei werden aber die Zeilennummerierung in der 1. Spalte und der Preis in der 3. Spalte vertikal zentriert. Wie kann ich den gesamten Text gleichmässig nach oben bringen?

HTML sieht so aus:
<table style="border-collapse: collapse; width: 100%; height: 72px;" border="0">
<tbody>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px;">11.1</td>
<td style="width: 33.3333%; height: 24px;">vegetarisch</td>
<td style="width: 33.3333%; height: 24px;">9,50</td>
</tr>

Kann ich das mir "valign=top" erreichen, wenn ja, wo muss das hin?
 
Zuletzt bearbeitet von einem Moderator:
  • Text in einer Tabelle on top schieben Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Das würde zwar funktionieren mit vertical-align="top" ist jedoch veraltet und hat den Nachteil, dass Du es bei jeder Tabellenzelle notieren müsstest. Was auch für deine anderen inline-Styles gilt. Du kannst das selbe mit CSS vertical-align: top; erreichen:
Code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Test Vertical Alignment</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            height: 72px;
        }

        tr {
            height: 24px;
        }

        td {
            width: 33.3333%;
            height: 24px;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td>11.1</td>
                <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua.</td>
                <td>9,50</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
 
  • Text in einer Tabelle on top schieben Beitrag #3
G
Gast5162
Vielen Dank für Deine Mühe. Aber ich habe jetzt den Code in eine Tabelle eingefügt, wobei die 1. und 3. Spalte vertikal zentriert sind. Der gewünschte Effekt ist also nicht eingetreten.
Tabelle.jpg
 
  • Text in einer Tabelle on top schieben Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Den Code oben hatte ich getestet und er hat funktioniert. Poste am besten das HTML und CSS deiner Tabelle. Und dabei bitte Codetags verwenden:
1713713342544.png
 
  • Text in einer Tabelle on top schieben Beitrag #5
G
Gast5162
Meinen Ursprungscode habe ich oben gepostet, und Deinen Code habe ich original in die Tabelle übernommen. Der Effekt ist wie auf dem Screen zu sehen ist.
Ich habs jetzt nach meiner ursprünglichen Idee gelöst, ist für mich einfacher, weil die Tabelle durch mein WordPress Theme generiert wird und ich nur 1x die Ergänzung valign=top einfügen muss.

Code: 
<table style="border-collapse: collapse; width: 100%; height: 72px;" border="0">
<tbody>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px;">11.1</td>
<td style="width: 33.3333%; height: 24px;">vegetarisch</td>
<td style="width: 33.3333%; height: 24px;">9,50</td>
</tr>
<tr style="height: 24px;" valign="top">
<td style="width: 33.3333%; height: 24px;">11.2</td>
<td style="width: 33.3333%; height: 24px;">mit Hühnerfleisch oder Schweinefleisch</td>
<td style="width: 33.3333%; height: 24px;">10,50</td>
</tr>
<tr style="height: 24px;" valign="top">
<td style="width: 33.3333%; height: 24px;">11.3</td>
<td style="width: 33.3333%; height: 24px;">mit Rindfleisch</td>
<td style="width: 33.3333%; height: 24px;">11,00</td>
</tr>
<tr valign="top">
<td style="width: 33.3333%;">11.4</td>
<td style="width: 33.3333%;">mit knuspriger Ente oder Garnelen</td>
<td style="width: 33.3333%;">12,00</td>
</tr>
</tbody>
</table>
<p style="text-align: left;" valign="top">
 
  • Text in einer Tabelle on top schieben Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Deinen Code habe ich original in die Tabelle übernommen
Zum Vergrößern anklicken....
Dann musst Du dabei irgend etwas verkehrt gemacht haben. Leider postest Du immer nur Ausschnitte aus deinem Code wo man das Wesentliche nicht erkennen kann.
 
  • Text in einer Tabelle on top schieben Beitrag #7
G
Gast5162
Ich habe jeweils den kompletten Code gepostet, keinen Ausschnitt. Und Deinen Code habe ich per copy&paste eingefügt. Was soll ICH da falsch gemacht haben?
Trotzdem vielen Dank für Deine Hilfe, ich habs ja mit meiner Methode geschafft. Danke.
 
  • Text in einer Tabelle on top schieben Beitrag #8
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Nope, in #5 schreibst Du
Deinen Code habe ich original in die Tabelle übernommen
Zum Vergrößern anklicken....
Wo ist mein CSS? Ohne das kann es nicht funktionieren. Außerdem sind sämtliche inline-Styles noch in der Tabelle drin. Von deinem Versuch aus #3 sehe ich keinen Code.
 
  • Text in einer Tabelle on top schieben Beitrag #10
G
Gast5162
Nein. Wie ich schrieb wird der Code durch das WP-Theme generiert, für den Code kann ich nichts.
 
  • Text in einer Tabelle on top schieben Beitrag #12
G
Gast5162
Ok, lassen wirs. Ich werde jetzt WordPress nicht umprogrammieren. Und ob man das mit WP besser hinkriegt ist nicht mein Anliegen, ich benutze es, weil ich weder HTML noch CSS beherrsche, sondern eine Krücke brauche. Melde Dich doch bei WordPress.org und biete Deine Hilfe an. Musst mir doch keine Vorwürfe machen für das, was dort verbrochen wird. Danke.
Ich melde mich jetzt aus diesem Forum ab, bei dem ich keine Hilfe erhalte, sondern nur Vorhaltungen.
 
  • Text in einer Tabelle on top schieben Beitrag #13
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Ich bin dann raus, alles vollkommen widersprüchlich, was vom Fragesteller kommt. Vor #10 keine Rede davon, dass es sich um WP handelt.
 
  • Text in einer Tabelle on top schieben Beitrag #14
G
Gast5162
Sempervivum schrieb:
Ich bin dann raus, alles vollkommen widersprüchlich, was vom Fragesteller kommt. Vor #10 keine Rede davon, dass es sich um WP handelt.
Zum Vergrößern anklicken....
Ich habe dem keine Bedeutung beigemessen. Man hätte auch mal fragen können. Trotzdem danke für Deine Mühe. Wie geschrieben, ich bin dann auch aus diesem Forum weg, falls ich jemanden finde, der meine Kontolöschung bearbeitet.
 
  • Text in einer Tabelle on top schieben Beitrag #15
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Beispiel mit WordPress

Zusätzliches CSS
CSS: 
.mytable table td {
   text-align:center;
   vertical-align:top;
   width: 33.333%;
}
Erzeugter HTML-Code mit WordPress
HTML: 
<figure class="wp-block-table mytable">
<table>
  <tbody>
   <tr>
    <td>abc</td>
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</td>
    <td>abc</td>
   </tr>
   <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
   </tr>
   <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
   </tr>
 </tbody>
</table>
</figure>
Ausgabe
1713726175692.png

Alles kein Hexenwerk, und wenn man sich nicht mit WordPress richtig auseinander setzt, ist das Chaos eigentlich schon vorprogrammiert.

Gast5162 schrieb:
Musst mir doch keine Vorwürfe machen für das, was dort verbrochen wird
Zum Vergrößern anklicken....
WordPress hat nichts verbrochen, das warst alleine du.
Gast5162 schrieb:
Ich melde mich jetzt aus diesem Forum ab, bei dem ich keine Hilfe erhalte, sondern nur Vorhaltungen.
Zum Vergrößern anklicken....
Du hast Hilfe bekommen, kannst damit aber nichts anfangen. Und Vorhaltungen sind das auch nicht, nur Tipps, wie man es besser machen kann.
 
Thema:

Text in einer Tabelle on top schieben

Oben Unten