Tabelle mit DIV

ramfresser · 28. September 2019

Hallo

Ich baue seit den ersten Schritten meiner Internetzeit, meine Tabellen mit:

Code

<h1>einfache Tabelle</h1>

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>IBB</td>
    <td>ibb</td>
    <td>Ibb</td>
   </tr>
   <tr>
     <td>ram</td>
     <td>ramfresser</td>
     <td>Ramfresser Beck</td>
   </tr>
</table>

Alles anzeigen

Nun wurde mir gesagt nutze bitte DIV anstatt tr, td usw.

Wir suchen eine Beispieltabelle in der wir sehen können, wie die neuen Befehle für table, tr, th und td aussehen.

KarEm · 28. September 2019

Hallo,

das wurde schon öfters hier im Forum diskutiert. Mit der SuFu wirst Du sicher fündig (incl. Beispiel).

ramfresser · 28. September 2019

Hallo KarEm

Wir versuchen die Umstellung schon seit sehr langer Zeit zu verstehen, aber der Groschen will noch nicht fallen.

Antworten z.B. Nutze mal die Suchfunktion, machen das Problem nicht einfacher sondern sie verschlimmern es nur.

Solche Antworten setzen Leien nur unter Druck, und das sorgt dafür das sie aufgeben.

Wir sind keine Profis im Bereich HTML, HTML5 uns CSS.

Sorry für meinen Unterton.

CurlY BracketS · 28. September 2019

Das ist ein weites Feld.

Anfangen mit Lesen kannst du bei SELFHTML

Dann gibt es bei Joomlashack einen ganzen Kurs zu CSS Grid, allerdings in Englisch.

Edit: Merke, Tabellen braucht man nach wie vor, immer dann, wenn es etwas darzustellen gibt wie z.B. eine Preisliste, eine Linkliste o.Ä. Wenn es aber um Layout geht, sind Tabellen aber sowas von Out.

Sieger66 · 28. September 2019

Eventuell auch nützlich:

[Gelöst] Homepage formatierung ohne Tabellen, alternativen?

Layout: responsive Alternative zu einem Table

https://wiki.selfhtml.org/wiki…/Flexbox/Warum_Flexbox%3F

https://forum.joomla.org/viewtopic.php?t=764162

KarEm · 28. September 2019

Zitat

Nutze mal die Suchfunktion, machen das Problem nicht einfacher sondern sie verschlimmern es nur.

Solche Antworten setzen Leien nur unter Druck, und das sorgt dafür das sie aufgeben.

Sorry, wenn Du das so verstanden hast.

Es gibt Beiträge, die m.M. nach eine gute Hilfestellung bieten.

In Deinem Eingangsstatement hast Du auch nur sehr allgemein das Thema angesprochen. Ich verstehe dieses Forum als Hilfe zur Selbsthilfe.

Wenn man ein Ziel habt, dann muss man dafür auch etwas tun und darf nicht aufgeben.

My2Cents

Elfangor93 · 28. September 2019

Tabellen (table, th,td,tr) sind zum strukturieren von Datensätzen, während man mit div layoutet (CSS Layout Methoden: float-layout, flex-layout, grid-layout)...

firstlady · 28. September 2019

Jetzt mal ganz praktisch: Du hast da eine Liste von Einträgen. Jedes hat ein Bild und einen Text.

Eigentlich könntestdu eine ganz einfache Joomla Lösung machen.

Mach eine Kategorie "Partner"

Und für jeden Partner einen Artikel.

Im Reiter "Bilder und links" trägst du das bild ins inleitungsbild ein.

Die Beschreibung kommt in den Text.

Dann mach einen Menüpunkt "Kategoriblog" Partner.

Und alles wird schön sauber und ohne Tabelle aufgebaut.

Nur nicht versetzt, aber dafür kannst du das leicht mit css stylen.

Dafür kannst du verschieden Sortieren / entfernen / Einfügen ..

ramfresser · 28. September 2019

Hallo

Dankeschön für die Beiträge, Tipps und Hilfen.

firstlady

Bei der Tabelle geht es nicht nur um die Partnerseite, wird haben in vielen selbstgebauten Unterseiten die alte Art der Tabelle Codes genutzt.

Wir bzw. ich möchte mit den DIV zeug eines schönen Tages genau so umgehen können, wie mit dem table, tr, td und th Codes.

Da unsere erste Webseite über 15 Jahre alt wurde, denken und planen wir für die neue Webseite ebenfalls soweit.

oder bis hoffentlich eines schönen Tages, die Wissenschaft die Seuche Krebs und alle anderen Krankheiten besiegt.

skodi · 29. September 2019

Hi Patrick,

wie schon erwähnt: Tabellen nur für Daten die auch in eine Tabelle gehören.

Joomla! 3 hat das Bootstrap Framework integriert. Damit kann man sich (neben vielen anderen tollen Sachen) auch ein fast beliebiges Layout zusammenstellen.

Basieren tut das ganze auf einem Gitter-System (Grid), dieses ist 12 Spalten breit. Mit diesen 12 Spalten kann man nun arbeiten.

Für jedes Element in einer Reihe kann man angeben, wieviele Spalten es einnehmen soll.

Für die Spaltenbreite gibt es Klassen die man einfach einem Div-Container zuweist z.B. eben span9 für 9 Spalten breit.

Diese Klassen bringt Bootstrap fix und fertig mit.

Dieser einfache Code:

Code

    <div class="row-fluid">
      <div class="span9">...</div>
      <div class="span3">...</div>
    </div>

ergibt dann quasi eine Reihe mit 2 div-containern die befüllt werden können. Einer ist 9 Spalten breit, der andere 3.

Dazu ein Praxis-Beispiel aus der echten Welt. Im Joomla Standard-Template ist es so, dass der Inhaltbereich 9 Spalten einnimmt, die rechte Sidebar 3 Spalten.

Man muss sich da etwas reinfuchsen, kann damit aber echt sehr viel anstellen.

Du kannst das auch innerhalb eines Artikels oder innerhalb eines Moduls verwenden.

Auf deiner Startseite hast du im Moment eine Tabelle mit 2 Spalten und 3 Reihen.

Das kannst du mit Bootstrap auch ganz einfach machen.

Eine Reihe mit zwei gleichen Spalten, in der linken Text, in der rechten ein Bild, erstellst du mit:

Code

<div class="row-fluid">

<div class="span6"> <p>text</p> </div>

<div class="span6"> <img src="bild"> </div>


</div>

Die offizielle Dokumentation dazu findest du hier:

https://getbootstrap.com/2.3.2/scaffolding.html

Ab Joomla! 4 bekommen wir dann auch die aktuelle Bootstrap 4 Version mitgeliefert, da hat man dann nochmal mehr Möglichkeiten.

ramfresser · 29. September 2019

Hallo Ihr Lieben

Dankeschön für die Tipps und Erklärungen, ich glaube mit dem DIV habe ich nun verstanden.

Werde es in Zukunft aber erst einmal Experimentieren um zu sehen ob ich es wirklich verstanden habe.

--------------------------------------------------------------------------------------------

Jetzt zu den CSS Sachen für die Tabelle/n.

In der Standart CSS Datei von Joomla die Sachen für die Tabelle/n rein zu schreiben, kommt wahrscheinlich nicht so gut.

Wird wahrscheinlich im nächsten Update überschrieben.

Eine eigene CSS Datei für die DIV Tabellen wäre eventuell da von Vorteil, nur wie und wo muss ich die Datei importieren, wenn mein Gedanke des Überschreibens bei Update richtig ist?

christine2 · 29. September 2019

Hallo Patrick,

Zitat von ramfresser

Wird wahrscheinlich im nächsten Update überschrieben.

Du erstellst Dir eine: user.css

Danach sieht es so aus:

Wichtig ist, dass die user.css NACH der template.css geladen wird.

Hier ist es auch: https://docs.joomla.org/J3.x:A…custom_CSS_with_Protostar

Beim Protostar gilt: keine custom.css (zum Unterschied zu anderen Templates), sondern user.css

Ergänzend: Joomlaeigene Templates anpassen/ändern (z.B. Protostar, Beez3). Vorher eine Template-Kopie anlegen!

Liebe Grüße

Christine

Sieger66 · 29. September 2019

Um welches Template(Name und Quelle) geht es dir ?

Hängt eben wie oben schon Christine schreibt vom verwendeten Template ab wie der Dateiname für die Benutzer-css-Datei lautet und in welchen Dateiordner die css-Datei muß.

http://develop.linsner-luebeck…m-template-protostar.html

Dies sieht man bei Standard-Templates die ohne zusätzliches Framework oder ähnliches Funktionieren

in der index.php des Templates.

Siehe zum Beispiel bei Protostar(Zeile90+91) oder Beez3(Zeile74+75):

https://github.com/joomla/joom…otostar/index.php#L90-L91

https://github.com/joomla/joom…s/beez3/index.php#L74-L75

ramfresser · 30. September 2019

Guten Morgen

Die user.css Datei ist erstellt worden. Steht an dritter Stelle unter der template.css und offline.css.

Brauche ich kein require 'filename'; Befehl in einer der php Dateien erstellen, damit die user.css mit geladen wird?

oder habe ich das richtig verstanden, das die user.css bei meinem genutzen Style automatisch mit geladen wird, wenn sie vorhanden sind.

ramfresser · 30. September 2019

Okay verstanden die user.css wird abgefragt und wenn vorhanden mit geladen.

Dankeschön ihr Lieben.

PS. Eine Frage habe ich doch noch:

Gibt es einen guten Div Tabellen Generator?

CurlY BracketS · 30. September 2019

Du würdest mehr lernen, wenn du es von Hand machen würdest, aber bittesehr:

https://divtable.com/generator/

Zudem: ich würde das heutzutage mit CSS Grid machen.

Sieger66 · 30. September 2019

Zitat von CurlY BracketS

Zudem: ich würde das heutzutage mit CSS Grid machen.

Wozu ich z.B. auch noch folgendes gefunden habe:

https://css-tricks.com/snippets/css/complete-guide-grid/

ramfresser · 30. September 2019

Guten Morgen

So nun habe ich den befürchteten Salat:

Mein Versuch:

Code

<div class="divTable Tabelle Partner">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><img class="pull-center" title="Keyweb AG" src="images/keyweb.png" alt="Keyweb AG" width="251" height="165" /></div>
<div class="divTableCell" style="text-align: left;">Die Keyweb AG aus Erfurt ist seit Ende 2004 unser offizieller Serverpartner im Bereich Server, Domains und Webhosting. Alle unsere Onlineprojekte werden auf einen Server der Keyweb AG gehostet.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_2</div>
<div class="divTableCell">cell2_2</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_3</div>
<div class="divTableCell">cell2_3</div>
</div>
</div>
</div>

Alles anzeigen

Code

div.Tabelle Partner {
  width: 100%;
  height: 255px;
  text-align: left;
}
.divTable.Tabelle Partner .divTableCell, .divTable.Tabelle Partner .divTableHead {
  border: 0px solid #FFFFFF;
  padding: 2px 2px;
}
.divTable.Tabelle Partner .divTableBody .divTableCell {
  font-size: 13px;
  color: #FFFFFF;
}
.Tabelle Partner .tableFootStyle {
  font-size: 14px;
}
.Tabelle Partner .tableFootStyle .links {
     text-align: right;
}
.Tabelle Partner .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.Tabelle Partner.outerTableFooter {
  border-top: none;
}
.Tabelle Partner.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

Alles anzeigen

Ergebnis:

Katastrophe

weil es sollte so aussehen oder wenigstens ähnlich sein:

https://www.vapke.de/partner.html (sorry für die Url ich hatte keinen Nerv mehr noch einen weiteren Screenshot zu erstellen)

Ich habe keinerlei Ahnung was da schief gelaufen ist, geschweige denn was ich da gemacht habe und mit was ich da herumgespielt habe.

Ihr eventuell???

Gute Nacht

ramfresser · 1. Oktober 2019

Alles sollte so einfach wie möglich gemacht werden aber einfacher.

Zitat von Albert Einstein

Lui_brempt · 1. Oktober 2019

Es fehlen die Ausrichtungen der div-container. Woher sollen die wissen, wie sie gruppiert werden sollen, wo sie stehen sollen etc. So werden sie als einzelne "Absätze" nacheinander angezeigt.