Tabelle mit Rahmen

[Pitwheazle]

Jetzt bin ich an Wertetabellen und da hätte ich gerne eine Linie unter der Tabellenüberschrift und den beiden Tabellenspalten. Wie ich Django kenne, geht das irgendwie - ich habe es aber nicht gefunden. Aus Verzweiflung habe ich schon versucht, per svg Linien über die Tabelle zu legen, das geht aber auch nicht.
Braucht ihr dafür Code (oder geht das sowieso nicht?):

Code: Alles auswählen

            <fieldset>
            <table>
                <th>{{parameter.titel_x}}</th>
                <th>{{parameter.titel_y}}</th>
                <tr>
                    <td>{{parameter.x0}}</td>
                    <td class = "{{parameter.color0}}">{{form.y0}}</td>                                                                    
                </tr>
                <tr>
                    <td>{{parameter.x1}}</td>
                    <td class = "{{parameter.color1}}">{{form.y1}}</td>                                                                    
                </tr> 
                <tr>
                    <td>{{parameter.x2}}</td>
                    <td class = "{{parameter.color2}}">{{form.y2}}</td>                                                                    
                </tr>
...
            </table>

[geraldfo]

Sollte mit CSS kein Problem sein. Hat nichts mit Django zu tun.

[Pitwheazle]

OK - CSS könnte eine Lösung sein. Es gelingt mir auch, eine horizontale Linie zu erzeugen - aber nicht innerhalb meiner Tabelle. Ich denke, das hat schon mit Django zu tun, da ich ja nicht HTML schreibe, sondern Django den HTML Code erzeugt. Außerdem sehe ich ein Problem darin, dass die vertikale Linie dann über die Tabelle gelegt werden muss.

[grubenfox]

wer schreibt denn hier die Templates?

Z.B. dieses hier:

Code: Alles auswählen

            <fieldset>
            <table>
                <th>{{parameter.titel_x}}</th>
                <th>{{parameter.titel_y}}</th>
                <tr>
                    <td>{{parameter.x0}}</td>
                    <td class = "{{parameter.color0}}">{{form.y0}}</td>                                                                    
                </tr>
                <tr>
                    <td>{{parameter.x1}}</td>
                    <td class = "{{parameter.color1}}">{{form.y1}}</td>                                                                    
                </tr> 
                <tr>
                    <td>{{parameter.x2}}</td>
                    <td class = "{{parameter.color2}}">{{form.y2}}</td>                                                                    
                </tr>
...
            </table>

[Pitwheazle]

Ich stehe mal wieder auf dem Schlauch. Einfach ein <hr> einsetzen klappt jedenfalls nicht:

Code: Alles auswählen

            <fieldset>
            <table>
                <th>{{parameter.titel_x}}</th>
                <th>{{parameter.titel_y}}</th>
               <hr>
                <tr>
                    <td>{{parameter.x0}}</td>
                    <td class = "{{parameter.color0}}">{{form.y0}}</td>                                                                    
                </tr>
                <tr>
                    <td>{{parameter.x1}}</td>
                    <td class = "{{parameter.color1}}">{{form.y1}}</td>                                                                    
                </tr> 
                <tr>
                    <td>{{parameter.x2}}</td>
                    <td class = "{{parameter.color2}}">{{form.y2}}</td>                                                                    
                </tr>
...
            </table>

Da entsteht zwar eine Linie - aber über der Tabelle.

[geraldfo]

Das fieldset-Tag gehöhrt wohl weg.
Um die th-Tags gehöhren tr-Tags.

[geraldfo]

https://validator.w3.org/

Hier kannst du deinen HTML-Code validieren lassen.

[Pitwheazle]

Nun ja, "fieldset" muss aber sein - die Kids müssen hier ja Werte in die Tabelle einsetzen.

[noisefloor]

Hallo,

Ich denke, das hat schon mit Django zu tun, da ich ja nicht HTML schreibe, sondern Django den HTML Code erzeugt.

.

Jein. Du schreibst schon den HTML-Code im Template, die Template-Engine von Django rendert ja "nur" die Template-Sprache zu einer fertigen HTML-Seite. Was aber nichts daran ändert, dass du das Styling selber via CSS machen musst. Also musst du die passenden CSS-Direktiven entweder Inline im HTML-Code einfügen (macht man eigentlich nur, wenn man nur an ein paar wenigen Stellen stylen will oder muss) oder die schreibst die Direktiven in eine CSS-Datei und verpasst dem HTML Code wo nötig die notwendigen class oder id Attribute.

Du benutzt doch Bootstrap als CSS-Framework oder? Benutzt du bist jetzt "nur" das oder hast du auch eigene CSS-Dateien, ergänzend zu Bootstrap.

Und, wie @geraldfo schon sagte, solltest du die Tabelle richtig bauen, also mit allen notwendigen HTML-Tags, siehe z.B. https://wiki.selfhtml.org/wiki/HTML/Tab ... er_Tabelle

Gruß, noisefloor

[geraldfo]

Dann müsste es ja input-Elemente geben. Die sind aber nirgends zu sehen.

[Pitwheazle]

<tr> und </tr> habe ich ergänzt. "{{form.y0}}" usw. sind die Eingabefelder.

[Pitwheazle]

Du benutzt doch Bootstrap als CSS-Framework oder? Benutzt du bist jetzt "nur" das oder hast du auch eigene CSS-Dateien, ergänzend zu Bootstrap.

Ich benutze kein bootstrap, ich habe meinen CSS Code selbst geschrieben.

[geraldfo]

Ich schlag vor, du zeigst uns den generierten HTML-Code.

[Pitwheazle]

Wie kann man den kopieren? Im inspektor gelingt mir das nicht.
Nachtrag: Mit "Quelltext anzeigen" auch nicht - da steht die Tabelle nicht drin.

[geraldfo]

In jedem Browser kannst du über das Kontext-Menü eine Source-Code-Ansicht öffnen. Von dort kannst du den HTML-Code kopieren.

[Pitwheazle]

Wie gesagt mit "Quelltext anzeigen" klappt das nicht.

[Dennis89]

Welchen Browser benutzt du?
Firefox:
1. Strg + u
2. Strg + a
3. Strg + c

Und dann hast du alles in der Zwischenablage.

Zeigt es dir den Code gar nicht an?

Grüße
Dennis

[Pitwheazle]

Du meinst Strg + c. Das kann ich, aber da ist kein Code für die Tabelle:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
    <head>       
        <title>Rechentrainer von Peter Doll</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/staticfiles/styles.css">
        <link rel="stylesheet" href="/staticfiles/auswahl.css">
    </head>
    <header>
        <div class="navbar">
            <a href="/">&#8962 Home</a>
            <a>Anmelden</a>
        </div> 
    </header>
    <container>
<body>
  <form method="POST" action="/accounts/login/">
    <input type="hidden" name="csrfmiddlewaretoken" value="">
    <table>    
      <tr>
    <th><label for="id_username">Benutzername:</label></th>
    <td>
      <input type="text" name="username" required id="id_username">
    </td>
  </tr>
  <tr>
    <th><label for="id_password">Passwort:</label></th>
    <td>
      <input type="password" name="password" required id="id_password">
    </td>
  </tr>
    </table>
    <p>Achte darauf, dass auch beim Benutzername zwischen großen und kleinen Buchstaben unetrschieden wird!</p>
    <input type="Checkbox"  name="cookie_loeschen"> 
    <label> Ich arbeite nicht an meinem eigenen Gerät, bitte Cookies nach der Abmeldung löschen</b> </label>
    <br>
    <br>  
      <input type="submit" value="anmelden">
  </form>
  <p>Du hast dein Passwort vergessen? 
    <button><a href="/password_reset">hier klicken</a></button></p>
  <p>Du hast noch keinen Account? 
    <button><a href="/registrieren">hier klicken</a></button></p>
</body>
    </container>
</html>

Im Inspektor sehe ich ihn (den Code für die Tabelle), da kann ich ihn aber nicht komplett kopieren.

[Pitwheazle]

Das der Quelltext wenig mit der angezeigten Seite zu tun hat, sehe ich auch. Angezeigt wird aber meine Wertetabelle:

[geraldfo]

Vorschlag:

Überprüfe deinen HTML-Code
https://validator.w3.org/#validate_by_input

Korrigiere deinen HTML-Code bis er fehlerfrei ist.

Dann kannst du mit einer solchen CSS-Anweisung eine Linie am unteren Rand einer Zelle erzeugen:

Code: Alles auswählen

border-bottom: 1px solid black;