Align für Spalten

Computer: Software & Programmierung HTML & CSS
1

Liebe ExpertInnen,

ich scheitere an der Aufgabe, einen Spaltentext zu zentrieren:

grafik
grafik833×149 34.3 KB

Könnte daran liegen, dass ich nicht verstehe, was width bewirkt. Meine Versuche, den Zellen Rahmen zu verpassen, um zu sehen, wo die Zellen der Tabelle sitzen, laufen ebenso ins Leere.

Hier der Quelltext:

        <tr>
            <th width=100></th>
             <th width=10>Beitrag </th>
            <th width=100>Schießgeld 1. Disziplin </th>
            <th width=120>Schießgeld je weitere Disziplin </th>
        </tr>
        <tr>
            <td>Erwachsene </td>
            <td align=center>33 €</td>
            <td align=center>17 €</td>
            <td align=center>8 €</td>
        </tr>
        <tr>
            <td>Junioren</td>
            <td align=center>25 €</td>
            <td align=center>13 €</td>
            <td align=center>8 €</td>
        </tr>
        <tr>
            <td>Jugend, Schüler</td>
            <td align=center>14 €</td>
            <td align=center>8 €</td>
            <td align=center>8 €</td>
        </tr>
        <tr>
            <td>Zweitmitglieder</td>
            <td ></td>
            <td align=center>17 €</td>
            <td align=center>8 €</td>
        </tr>
        <tr>
            <td >Fördermitglieder</td>
            <td align=center>14 €</td>
            <td ></td>
            <td ></td>
        </tr>
	   </table>

</body<>

Wer weiß was?
Dank & Gruß & Guten Rutsch
Ralf
2

In allen anderen Spalten wird der Text doch zentriert, und da steht überall ein align=center im HTML. Genau das fehlt beim Betrag.

“Width” heißt zu deutsch “Breite”, und steuert eben die Spaltenbreite. Ich bin mir gerade nicht sicher, ob das überhaupt so funktioniert, denn deine angegebenen Breiten findet man in der Ansicht nicht wieder. Ich denke, du musst da mit style=”width:…” arbeiten.

Eine Breite solltest du auch nicht in festen Pixeln angegeben, sondern prozentual, dann wird das auch auf einem Smartphone lesbar.

Generell empfehle ich dir, dich mit css zu beschäftigen. Es ist am Anfang etwas Einarbeitung, spart später aber viel Schreibarbeit.

1 „Gefällt mir“
3

Danke für die Tipps, werde ich bei Bedarf berücksichtigen.

In meinem Fall half ein Bauerntrick: Mit ist es ja nicht gelungen, wie schon erwähnt, die Spalten mit Rahmen zu versehen, obwohl streng nach SELTHTML verfahren:

#table width=100% border rules=cols#

erzeugt keine Spaltenrahmen, sondern nur einen Tabellenrahmen. (Lattenzaun steht für gt und lt)

Anstatt mich mit unsichtbaren Spaltengrenzen zu plagen, habe ich einfach zusätzliche Spalten ohne Inhalt eingefügt, und siehe da, es läuft:

grafik
grafik731×139 26.7 KB

Gruß
Ralf

4

Wo steht das, in HTML? Normalerweise musst du in HTML die Tabelle einfach mit
<table border>
anlegen.
rules="cols" ist mir noch nicht begegnet, ist aber lt. KI ein veraltetes HTML-Attribut für das <table> -Tag. Vielleicht lässt du das einfach mal weg?

Nein, width reich in HTML aus, aber wo keine Maßeinheit angegeben wird, werden Pixel benutzt, und 10 für Betrag ist deutlich zu wenig.

So ist es.

Oh Gott, ich glaube, ich möchte den Quelltext nicht sehen!

Sauberes HTML:

<table>
  <thead>
    <tr>
      <th width=25%>&nbsp;</th>
      <th width=25% align="center">Beitrag</th>
      <th width=25% align="center">Schießgeld 1. Disziplin</th>
      <th width=25% align="center">Schießgeld je weitere Disziplin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Erwachsene</td>
      <td align="center">33 €</td>
      <td align="center">17 €</td>
      <td align="center">8 €</td>
    </tr>
    <tr>
      <td>Junioren</td>
      <td align="center">25 €</td>
      <td align="center">13 €</td>
      <td align="center">8 €</td>
    </tr>
    <tr>
      <td>Jugend, Schüler</td>
      <td align="center">14 €</td>
      <td align="center">8 €</td>
      <td align="center">8 €</td>
    </tr>
    <tr>
      <td>Zweitmitglieder</td>
      <td align="center"></td>
      <td align="center">17 €</td>
      <td align="center">8 €</td>
    </tr>
    <tr>
      <td>Fördermitglieder</td>
      <td align="center">14 €</td>
      <td align="center"></td>
      <td align="center"></td>
    </tr>
  </tbody>
</table>

(auf thead und tbody kannst du auch verzichten).

Gruß
Christa

5

Servus,

hier die Anweisung komplett:
<table border rules=cols>

Meine einzige Quelle ist SELFHTML, das führt fast meistens zu unerwarteten Ergebnissen, dann fange ich an zu experimentieren.

Um zwei Zeilenwerte einer Spalte zu zentrieren, muss jeder einzelne Wert zentriert werden. Das ist nicht ganz einfach, weil ich die Feldgrenzen nicht sehe.

(auf thead und tbody kannst du auch verzichten).

thead erlaubt, manche Spaltenattrubute für den ganzen Body mitzugeben. Ich verzichte dann lieber auf Tüttelchen, wo es sie nicht braucht.

ich möchte den Quelltext nicht sehen!

Glaub ich nicht, deshalb:

<doctype html>
<html>
<body>
<table border rules=cols>

            <tr>
                <th width=20%></th>
                <th width=7% align=center>Beitrag</th>
                <th width=5%</th>
                <th width=20% align=center nowrap>Schießgeld 1. Disziplin</th>
                <th width=5%</th>
                <th width=35% align=center nowrap>Schießgeld je weitere Disziplin</th>
            </tr>
            <tr>
                <td>Erwachsene</td>
                <td align=center>33 €</td>
                <th></th>
                <td align=center>17 €</td>
                <th></th>
                <td align=center>8 €</td>
            </tr>
            <tr>
                <td>Junioren</td>
                <td align=center>25 €</td>
                <th></th>
                <td align=center>13 €</td>
                <th></th>
                <td align=center>8 €</td>
            </tr>
            <tr>
                <td>Jugend, Schüler</td>
                <td align=center>14 €</td>
                <th></th>
                <td align=center>8 €</td>
                <th></th>
                <td align=center>8 €</td>
            </tr>
            <tr>
                <td>Zweitmitglieder</td>
                <td ></td>
                <th></th>
                <td align=center>17 €</td>
                <th></th>
                <td align=center>8 €</td>
            </tr>
            <tr>
                <td >Fördermitglieder</td>
                <td align=center>14 €</td>
                <td ></td>
                <td ></td>
            </tr>
		   </table>

</body<>
<html>

Gruß
Ralf

6

Hi!

Das sieht bei mir dann so aus:

grafik
grafik854×154 17.9 KB

rechts unten sieht’s merkwürdig aus, weil du für die letzte Zeile nur vier Spalten spezifizierst. Aber.. Rahmen sind da!

1 „Gefällt mir“
7

(Die Antwort richtete sich eigentlich an @drambeldier)

8

Servus,

mit der letzten Zeile hast Du recht, die habe ich ignoriert, weil in dort nur die erste Spalte befüllt wird, trägt also zur Verwirrung bei - war nicht meine Absicht.

Rätselhaft weiterhin, warum die Spaltenrahmen bei mir nicht zu sehen sind. Kann das daran liegen, dass ich mit dem CMS Joomla arbeite?

Was mir am HTML unheilmlich ist, das sind die Fernwirkungen. So habe ich danach gesucht, wie ein Block eingerückt werden kann. Klappte per SPAN für einen Textblock, wollte ich dann auf die Beitrags-Tabelle anwenden, und schon waren die leeren Füll-Spalten verschwunden, hockten also alle Spalten wieder aufeinander und die schöne Ausrichtung war damit im A…

Gruß
Ralf

9

<span> ist ein Inline-Element. Für Textblöcke gibt es das generische <div>-Element, um sie „irgendwie“ zu formatieren. Dann klappt’s auch mit der Tabelle.
Ich würde immer mit CSS formatieren und geeignete Klassen an den HTML-Elementen verwenden.

Btw.: was machen die leeren s in deinen Tabellenzeilen? Die gehören da nicht hin und es hängt von der Lust und Laune des Browsers ab, was er daraus macht.

Gruß
KHK

10

falls s für Spalten steht: Das sind Abstandhalter, die durch die Spaltenbreite vorgegeben sind. Und was heißt, die gehören da nicht hin. imho gehört alles aufs Blatt, was ich da haben möchte.

Gruß
Ralf

11

Scusi, da hab ich bei der Eingabe nicht aufgepasst. Ich meine die leeren <th>-Elemente zwischen den <td>s. „th“ steht für „table heading“ und sollte verwendet werden, um Zellen in der Kopfzeile auszuzeichnen. In die Tabellenzeilen mit dem Inhalt gehört „td“ wie „table data“.

12

Das ist sehr gut möglich! Wenn deine Tabelle von Joomla in ein eigenes HTML-Dokument eingebettet wird, und wenn dort per CSS Styles definiert sind, dann können die sich auf deine Tabelle auswirken. Beispielsweise könnte dort definiert sein, dass die Linien in Tabellen weiß sein sollen…

Und jetzt sehe ich auch, dass da ganz schwach ein Bild im Hintergrund deiner Tabelle zu sehen ist, davon steht in deinem HTML-Dokument gar nichts drin. Demnach muss da in der Tat mehr sein, als du schreibst.

Speicher das HTML, das du hier zeigst, in einer Datei ab, und öffne die mit einem Browser. Vermutlich siehst du die Linien dann.

Und dann lass dir den Quellcode von deiner Joomla-Seite anzeigen (Im Firefox z.B. STRG+U drücken), da wird ein ganz klein wenig mehr als nur dein HTML stehen!

1 „Gefällt mir“
13

Hallo Ralf,

Das ist trivial, wenn man verstanden hat, wie der Tabellenaufbau erfolgt.

Äh, nein, head ist head und body ist body. :sweat_smile: Aber wie gesagt, es ist an der Stelle irrelevant, weil du das weglassen kannst.

Ich sagte, ich GLAUBE, du hast unvollständig zitiert. :sweat_smile: Aber gut, dann kann ich mich austoben! Du hast es so gewollt. :zany_face:

Leere Zellen sind kein Problem, und anders als von @KeinesHerrenKnecht angegeben machen sie auch nichts kaputt, wenn man sie statt td benutzt (einziger Unterschied zwischen th und td ist, dass th den Text fett druckt und zentriert, was aber völlig Banane ist, wenn die Zelle eh’ leer ist). Aber man soll das schon richtig machen!

Du hast vergessen, nach dem Prozentzeichen th zu schließen, und &nbsp; ist ein geschütztes Leerzeichen. Das würde ich immer bei leeren Zellen angeben, um die Tabelle einfach vollständig zu haben. Zu Zeiten Nescapes gab es noch Probleme, weil solche Zellen nicht dargestellt wurden, aber die heutigen Browser verzeihen einem sehr viel (was ich nicht gut heiße, aber das ist nicht das Thema hier und heute).

Die leeren Spalten (erzeugt durch leere Zellen in jeder Zeile) sind allerdings völlig überflüssig. So etwas kannst du über die Breitenangabe der Spalte. Nimm doch einfach meine Tabelle, die Prozentzahlen kannst du natürlich noch ändern.

Das kann natürlich sein. Joomla kenne ich gar nicht, nur Typo3, aber eigentlich arbeiten alle CMS mit CSS.

Hier verstehe ich wiederum überhaupt nicht, was du vorhast. In Tabellen hast du doch Zellen und keine Blöcke, was willst du einrücken und warum??

Das würde voraussetzen, dass er sich auch noch mit dem CSS-Teil von SelfHTML auseinandersetzt. :sweat_smile:

Aber du möchtest doch gar keine leeren Spalten, sondern nur Abstand zwischen den Spalten. Das erreichst du in diesem Fall durch Zentrieren der Spalten und die Angabe von passenden Spaltenbreiten. S. meine Tabelle.

Gruß
Christa

1 „Gefällt mir“
14

@all: Danke, nun lasst es gut sein. Ziel erreicht, Darstellung wie gewünscht. Mein Lerneifer hält sich in Grenzen - jeder müde Furz in HTML kostet mich Stunden, am Schluss habe ich mit viel Glück ein Ergebnis und niemand weiß, warum. Wenn ich mir die Beschreibung so anschaue, kommen mir die Tränen. Kennt jemand den begriff Syntaxbaum? Nein? Auch gut.

Gruß
Ralf

15

Servus,

so viel Mühe und darauf nicht einzugehen, das geht ja nun doch nicht.

Dein Muster habe ich mal getestet als reine .html, aifgerufen mit dem Browser. Das tut alles wie geplant im Browser, aber eben nicht in meiner Joomla-Umgebung. Inzwischen habe ich es geschafft, die Spaltenrahmen zu zeigen, und diehe da, hier liegt der Hund begraben: Die Header werden nicht zentriert; weitere Recherche führte zu Stack overflow, echt lesenswert, die haben rausgefunden, dass der align für Header sanft entschlafen ist, was man bei SELFHTML und anderswo nicht bemerkt hat. Abhilfe wird mitgeliefert:

th {text-align:center}

Gruß
Ralf

16

Hallo Ralf,

ich bin fast zu Tränen gerührt. :slightly_smiling_face:

In meiner Tabelle war eigentlich, was meinen Wissensstand betrifft, ein unbeabsichtigter Fehler (ich habe aus Faulheit die Tabelle von ChatGPT erstellen lassen und nicht auf alle möglichen Fallstricke geachtet). Ich hatte weiter oben geschrieben:

Das war sicherlich bis vor einiger Zeit auch richtig, aber wenn ich das berücksichtigt hätte, hätte

align=center

gar nicht in die th-Zellen hingehört. ChatGPT war aber wohl mit seinem Wissen weiter und wusste schon, dass th nur noch fettgedruckt, nicht aber auch noch zentriert wird.

Das ist aber ein CSS-Eintrag, und ich dachte, mit CSS wolltest du dich nicht herumplagen. :yawning_face: Und eigentlich habe ich auch gedacht, du wolltest die Rahmen nur zur Kontrolle haben, damit du siehst, warum die Spalten nicht wie gewünscht zentriert werden. Erst später kam das Gefühl auf, dass du sie doch dauerhaft haben willst.

Hast du wenigstens die leeren Spalten (nicht Zellen!) inzwischen entfernt??

Und was du mit dem Einrücken bei der Tabelle meintest, habe ich auch immer noch nicht verstanden, und du hast leider darauf nicht geantwortet. :face_with_diagonal_mouth:

Viele Grüße
Christa

17

Servus,

Das ist aber ein CSS-Eintrag

mag sein, ist mir nicht aufgefallen.

Die Rahmen wollte ich nur haben, um zu sehen, ob und was da zentriert wird.Da gilt das gleiche wie vorhin: Im .html zu sehen, im Joomla nicht.

Nachdem das geklärt war, habe ich auch die leeren Spalten wieder rausgeworfen, die hatte ich nur eingeführt, weil wg. Nicht-Align und falscher Breiten die Header aufeinanderhockten.

Einrücken sollte die Optik verbessern im Sinne von Block-Überschrift h3 steht linksbündig, Tabelle darunter sollte 1em eingerückt werden. Klappt 2 Tabellen weiter, hier aber nicht. Es lohnt die Ursachenforschung nicht, meine Kundschaft hat eh kein Auge für Typographie.

Gruß
Ralf