Advertisement
Giuseppe

Untitled

Mar 10th, 2025
239
0
20 hours
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.47 KB | None | 0 0
  1. 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.  
  2.  
  3. Hier ist ein einfaches Beispiel für eine Tabelle mit `<div>` und Klassen:  
  4.  
  5. ### 1️⃣ HTML-Code:
  6. ```html
  7. <div class="tabelle">
  8.   <div class="reihe">
  9.     <div class="zelle kopf">Name</div>
  10.     <div class="zelle kopf">Alter</div>
  11.     <div class="zelle kopf">Stadt</div>
  12.   </div>
  13.   <div class="reihe">
  14.     <div class="zelle">Lisa</div>
  15.     <div class="zelle">10</div>
  16.     <div class="zelle">Berlin</div>
  17.   </div>
  18.   <div class="reihe">
  19.     <div class="zelle">Tom</div>
  20.     <div class="zelle">12</div>
  21.     <div class="zelle">München</div>
  22.   </div>
  23. </div>
  24. ```
  25.  
  26. ### 2️⃣ CSS-Code (macht die Tabelle schön):
  27. ```css
  28. .tabelle {
  29.   display: table;
  30.   border-collapse: collapse;
  31.   width: 300px;
  32. }
  33.  
  34. .reihe {
  35.   display: table-row;
  36. }
  37.  
  38. .zelle {
  39.   display: table-cell;
  40.   border: 1px solid black;
  41.   padding: 8px;
  42. }
  43.  
  44. .kopf {
  45.   font-weight: bold;
  46.   background-color: lightgray;
  47. }
  48. ```
  49.  
  50. ### 🔹 Was passiert hier?  
  51. - `.tabelle` macht das `<div>`-Element zu einer Tabelle.  
  52. - `.reihe` ist wie eine Tabellenzeile.  
  53. - `.zelle` ist eine einzelne Zelle in der Tabelle.  
  54. - `.kopf` gibt den Überschriften eine andere Farbe.  
  55.  
  56.  
  57.  
  58. So sieht es aus:  
  59. 🟦 Name | Alter | Stadt  
  60. 🟩 Lisa | 10 | Berlin  
  61. 🟩 Tom  | 12 | München  
  62.  
  63. Falls du Fragen hast, frag einfach! 😊
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement