Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Ja, klar! Stell dir vor, eine Tabelle ist wie ein Gitternetz mit Reihen und Spalten. Normalerweise benutzt man dafür `<table>`, aber du kannst auch `<div>`-Elemente mit CSS verwenden.
- Hier ist ein einfaches Beispiel für eine Tabelle mit `<div>` und Klassen:
- ### 1️⃣ HTML-Code:
- ```html
- <div class="tabelle">
- <div class="reihe">
- <div class="zelle kopf">Name</div>
- <div class="zelle kopf">Alter</div>
- <div class="zelle kopf">Stadt</div>
- </div>
- <div class="reihe">
- <div class="zelle">Lisa</div>
- <div class="zelle">10</div>
- <div class="zelle">Berlin</div>
- </div>
- <div class="reihe">
- <div class="zelle">Tom</div>
- <div class="zelle">12</div>
- <div class="zelle">München</div>
- </div>
- </div>
- ```
- ### 2️⃣ CSS-Code (macht die Tabelle schön):
- ```css
- .tabelle {
- display: table;
- border-collapse: collapse;
- width: 300px;
- }
- .reihe {
- display: table-row;
- }
- .zelle {
- display: table-cell;
- border: 1px solid black;
- padding: 8px;
- }
- .kopf {
- font-weight: bold;
- background-color: lightgray;
- }
- ```
- ### 🔹 Was passiert hier?
- - `.tabelle` macht das `<div>`-Element zu einer Tabelle.
- - `.reihe` ist wie eine Tabellenzeile.
- - `.zelle` ist eine einzelne Zelle in der Tabelle.
- - `.kopf` gibt den Überschriften eine andere Farbe.
- So sieht es aus:
- 🟦 Name | Alter | Stadt
- 🟩 Lisa | 10 | Berlin
- 🟩 Tom | 12 | München
- Falls du Fragen hast, frag einfach! 😊
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement