--- title: "htmlarea: Problem mit CSS-Stil einer Tabelle" url: "https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle" source: "typo3.net" tags: ["Backend","RTE & CKEditor","Frage"] created: "2008-10-29" last_reply: "2008-11-05" replies: 8 solved: false page: 1 pages: 1 lang: "de" --- # htmlarea: Problem mit CSS-Stil einer Tabelle Backend › RTE & CKEditor · 8 Antworten · gestartet 2008-10-29 ## Eröffnungsbeitrag **tele5** · 2008-10-29 · [Beitrag #1](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/1) Hallo, ich habe nach Anleitung von creativesites.de für den RTE HTML-Area eine RTE-Konfiguration und CSS-Datei angelegt. Allerdings habe ich das Problem, dass ich den CSS-Stil der gesamten Tabelle nicht bearbeiten kann. Das Feld ist nicht freigeschaltet. Möchte durch Einstallung eine Tabelle mit einer Hintergrundfarbe versehen. Was muß ich tun, damit das Feld freigeschaltet wird? Gleiches gilt für den Textstil bei Textelementen. Irgendwo anders habe ich gelsen, dass es Probleme beim Parsen mit den Erweiterung CSS-Style Contend gibt, ist das bei dieser Konfiguartion auch der Fall? Wenn ja wie läßt sich das umgehen? Leider bin ich Anfänger, suche nun seit mehreren Stunden und wäre dankbar, wenn mir jemand auf die Sprünge hilft. Danke! ############################################################################### # #--- RTE Konfiguration ------------------------------------------------------- # - fuer die Einstellung TYPICAL des RTE # ############################################################################### #-- Aktiviere RTE fuer alle User setup.default.edit_RTE = 1 ############################################################################### # RTE.default - konfiguriert die RTEs für alle Tabellen, alle Felder und # alle Content-Typen. Einstellungen, die mit RTE.default # vorgenommen werden, gelten somit nicht nur für Inhalte, # die in der Tabelle tt_content gespeichert sind sondern z.B. # auch für tt_news. ############################################################################### RTE.default { # Markup Optionen (Word Foramtierungen entfernen etc.) enableWordClean = 1 removeTrailingBR = 1 removeComments = 1 removeTags = sdfield # Ein- oder Ausblenden des Color Picker bei der Auswahl der Textfarbe disableColorPicker = 0 # blendet Statusbar in htmlarea aus showStatusBar = 0 # Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border) disableSpacingFieldsetInTableOperations = 0 disableAlignmentFieldsetInTableOperations = 0 disableColorFieldsetInTableOperations = 0 disableLayoutFieldsetInTableOperations = 0 disableBordersFieldsetInTableOperations = 0 # Tabellen Optionen in der RTE Toolbar als Button vertecken oder anzeigen hideTableOperationsInToolbar = 0 # Buttons die gezeigt/versteckt werden (Standardliste der Einstellung Typical) showButtons = headline, fontstyle, fontsize, size, textcolor, textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, chMode, showhelp, about, hideButtons = formatblock, strikethrough,lefttoright, righttoleft, textindicator, emoticon, user, spellcheck, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste # Fuege der Standardliste der RTE Typical- Einstellung noch folgende Buttons hinzu showButtons := addToList(textcolor, bgcolor, size, fontsize ) # Sortierung der RTE Buttons toolbarOrder = headline, bold, italic, underline, left, center, right, orderedlist, unorderedlist, findreplace, insertcharacter, undo, redo, showhelp, about, textstylelabel, textstyle, blockstylelabel, blockstyle, image, link, removeformat, line, table, toggleborders, tableproperties,rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, textcolor,chMode # Haelt die RTE Icons gruppiert zusammen keepButtonGroupTogether = 1 keepToggleBordersInToolbar = 1 } ############################################################################### #-- Verwendung eines eigenen Stylesheets fuer den RTE ############################################################################### # Einstellungen RTE RTE.default { # Zuweisung der CSS-Datei contentCSS = fileadmin/styles/style_rte.css # zeige alle CSS-Klassen die in style_rte.css vorhanden sind im RTE an #(Dropdown-Box - Absatz) showTagFreeClasses = 1 # Verwende im RTE den benutzerdefinierten Stylsheet und ueberschreibe die # vorgegebenen Standardformateierungen des RTE ignoreMainStyleOverride = 1 } # Erlaubte span Klassen aus der CSS-Datei (span wird somit nicht wegparsed) RTE.config.tt_content.bodytext.proc.allowedClasses = author ############################################################################### # RTE.default.proc - ist ein Objekt, das die Konfiguration für die # Transformation des Inhaltes zwischen RTE-Feld und Datenbank # beinhaltet. Die Konfigurationsoptionen gelten für alle in # TYPO3 verwendbaren RTEs und werden über die Klasse # t3lib_parsehtml_proc gesteuert. ############################################################################### RTE.default.proc { # Überschreibe CSS Angaben aus dem TypoScript overruleMode = ts_css # tags die erlaubt / verboten sind allowTags = font, size, fontsize, table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center, bgcolor, bg, color, underline denyTags = # br wird nicht zu p konvertiert dontConvBRtoParagraph = 1 # Tags die ausserhalb von p, div erlaubt sind allowTagsOutside = img,hr,center # Erlaubte Attribute in p, div Tags keepPDIVattribs = class,style,id } ############################################################################### # HTML Parser Einstellungen - Inhalt ins Frontend ############################################################################### HTMLparser_rte { # tags die erlaubt/verboten sind # uebernehme die Einstellungen von RTE.default.proc allowTags < RTE.default.proc.allowTags denyTags < RTE.default.proc.denyTags # tags die untersagt sind removeTags = # entfernt html-kommentare removeComments = 1 } ############################################################################### # Speichere in Datenbank - Inhalt in die Datenbank ############################################################################### entryHTMLparser_db = 1 entryHTMLparser_db { # tags die erlaubt/verboten sind #uebernehme die Einstellungen von RTE.default.proc allowTags < RTE.default.proc.allowTags denyTags < RTE.default.proc.denyTags # Falls diese Tags auf der "remove"- Liste stehen, so entferne sie von dieser removeTags := removeFromList(font,bgcolor,underline, u) # Erlaube folgende Attribute tags.font.allowedAttribs = color, size, bgcolor,fontsize } ############################################################################### # Entfernt Images vor den Links, ("erstelle Link"- Funktion im RTE) ############################################################################### RTE.classesAnchor { internalLink { image > } externalLink { image > } externalLinkInNewWindow { image > } internalLinkInNewWindow { image > } download { image > } mail { image > } } ############################################################################### # Den Button "Textfarbe" konfigurieren. # Anlegen von Farben, welche dann fuer den Redakteur auswaehlbar sind. # # - angelegte Farben muessen zusaetzlich noch per CSS in den RTE Stylesheet # geschrieben werden # - die benoetigten Attribute und Tags sind unter RTE.default.proc.entryHTMLparser_db # zu erlauben (color) # ############################################################################### RTE.default.showButtons := addToList(textcolor, bgcolor) RTE.default.proc.entryHTMLparser_db.tags.span.fixAttrib.style.unset > RTE.default.proc.entryHTMLparser_db.removeTags := removeFromList(font) RTE.default.removeTags := removeFromList(font) RTE.default.proc.entryHTMLparser_db.tags.font.allowedAttribs = color # Farben definieren # ausserhalb der gewscheiften Klammern steht die Bezichnung der Klasse, welche dann per CSS definiert wird # name: Dies ist der Name der Farbe, den der Redakteur neben dem Farbfeld sieht # value: der Farbert RTE.colors { standard { name = standard value = #666666 } dunkelgrau { name = dunkelgrau value = #666666 } grau { name = grau value = #999999 } hellgrau { name = hellgrau value = #cccccc } weiss { name = weiss value = #FFFFFF } schwarz{ name = schwarz value = #000000 } } # die benoetigten Attribute und Tags erlauben RTE.default.proc.entryHTMLparser_db.tags.font.allowedAttribs = color, size, bgcolor,fontsize # Auflisten aller Namen der definierten Farben, welche im RTE sichtbar sein sollen RTE.default.colors = schwarz, dunkelgrau, grau, hellgrau, weiss,standard ############################################################################### # Verwende für die Ausgabe im FE die gleichen Einstellungen wie im Editor des RTE ############################################################################### RTE.default.FE.proc < RTE.default.proc RTE.default.FE < RTE.default ############################################################################### # Verwende die gleichen Einstellung zur BEreinigung von Inhatl, # welcher in den Editor kopiert wurde, wie bei RTE.default.proc.entryHTMLparser_db ############################################################################### RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db ############################################################################### # Breite des RTE in Fullscreen-Ansicht ############################################################################### TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100% TCEFORM.tt_content.bodytext.RTEfullScreenHeight= 500px Nicht vergessen: Das CSS- File muss mittels @import url("style_rte.css"); noch im Main- CSS- File der Website eingebunden werden! Passendes Beispiel- CSS- File: /* CSS Document */ body{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; margin:0; padding:0; color:#202020; background-color:#fff; } a {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#9AC507; } a.aktiv {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#9AC507;} a:hover {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#9AC507;} h1,h2,h3,h5 {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:bold;} h1{ font-size:16px; } h2{ font-size:14px; } h3{ font-size:11px; } h4{ font-size:10px; } img {border:0;} a img{border:0;} p.bodytext a img{border:0; margin:0; padding:0;} p.bodytext img{border: 0;margin:0; padding:0;} p { font-size:11px; padding:0 0 0 0; margin:0 0 0 0;} p.bodytext {border:0; margin:0; padding:0;font-size:11px; } .maincontent p.bodytext{margin:0; padding:0; line-height:1.4em;} /* ***************************************************************************************/ .weiss { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#ffffff; background-color:transparent; } .altweiss { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#F2F2F2; background-color:transparent; } .hellesgrau { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#dddddd; background-color:transparent; } .hellgrau { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color:transparent; color: #BFBFBF; } .grau { color:#888888; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color:transparent; } .dunkelgrau{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#3B3B3B; background-color:transparent; } .hellschwarz { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#202020; background-color:transparent; } .schwarz { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#000000; background-color:transparent; } ## Antworten ### [#2](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/2) · Juli · 2008-10-31 Ist nicht der eleganteste Weg, aber versuchs mal mit den CSS Selectoren in der CSS-Datei, die Du im Template angegeben hast, also etwa: ```typoscript page.stylesheet = fileadmin/templates/meineCSS-Datei.css ``` Hab' hier im Forum irgendwann mal einen Beitrag gesehen mit dem Vorschlag, folgende Selectoren auszuprobieren, und einige haben die Tabelle dann auch angesprochen: > table.contenttable.tr-0 {border: 2px solid black; > /*formatierungen für die erste Zeile*7 > } > .tr-even {padding:10px > /*formatierung für alle ungeraden Zeilen*/ > } > .tr-odd {background-color:#F0FFF0, padding:10px; > /*formatierung für alle geraden Zeilen*/ > } > .tr-even .td-0{ > /*formatierung für die linke Spalte der ungeraden Zeilen*/ > } > .tr-even .td-last { > /*formatierung für die rechte Spalte der ungeraden Zeilen*/ > } > .tr-odd .td-0{ > /*formatierung für die linke Spalte der geraden Zeilen*/ > } > .tr-odd .td-last { > /*formatierung für die rechte Spalte der geraden Zeilen*/ > } > .tr-last { > */formatierung für die letzte Zeile*/ > } > .contenttable {padding:10px; > /*allgemeine Formatierungen für alle Tabellen*/ > } > .contenttable-1 {padding:10;border: 2px solid black; > /*allgemeine Formatierungen für die erste Tabelle der Seite*/ > } > .contenttable-1 .tr-0 { > /*formatierungen für die erste Zeile der ersten Tabelle*/ > } > .contenttable .tr-0 {background-color:#8C947F;padding:10px; > /*formatierungen für die erste Zeile aller Tabellen*/ > } Schau Dir im Browser den Quell-Text Deiner Seite mit den Tabellen an, dann siehst Du welche Selektoren auftauchen. Eine super Programm-Erweiterung für Typo3 ist der CSS Usage Analyzer Im Extention Manager (import extension) nach "tstemplate_cssanalyzer" suchen und dann installieren. Gibt ein Video von Kasper dazu unter: Titel: 9. BONUS Getting Css Selectors On A Silver Plate Wenn du die Adresse Deiner Seite eingibst, siehst Du in etwa folgendes: > DIV#content DIV.csc-frame csc-frame-frame2 TABLE.contenttable contenttable-0 TR.tr-even tr-0 TD.td-last td-2 {} Dann ist das Kunststück herauszufinden, welcher Selector tatsächlich das gewünchste Element anspricht. Allerdings, bei den Tabellen kann man die Doppelbezeichnung > contenttable .contenttable als Selektor nicht in die CSS-Datei übernehmen, das funzt nicht - während die einfache Notierung mit .contenttable funktioniert. Weiß auch nicht warum und weshalb. Da mußt Du Dich im Forum weiterhangeln oder wie immer: lesen, lesen, lesen. Ist einiges zu "CSS Tabellen" zu finden. Gruß Jürgen ### [#3](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/3) · tele5 · 2008-10-31 Danke für die Antwort. Stellt denn diese Lösung eine Auswahlmöglichkeit dar oder werden dann alle Tabelle nach dem Schema formatiert? Ich habe vorher tinyMCE benutzt, da konnte man einfach eine CSS-Datei verknüpfen und da hatte ich dann so Sachen wie: /* Tabelle */ .tabelle_kopf { background-color: #3a6d9d; } .tabelle_zelle_01 { background-color: #f2fafc; } .tabelle_zelle_02 { background-color: #d7eafb; } usw. Ich habe so was in die CSS-Datei geschrieben. Aber die Auswahlmöglichkeit nicht im Editor zur Verfügung gestellt bekommen, sprich das Dropdown Menü für Tabelle-Stile wird nicht angezeigt. Oder muß noch was an der Konfiguration ändern? Oder man steigt am besten wieder TinyMce um... Fragen über Fragen. ### [#4](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/4) · Juli · 2008-11-01 Hab' mich laenger nicht mehr mit RTE rumgeschlagen, aber ich glaube es war so: Wenn Du die Tabellen via RTE eingeben und dann ueber die Menuleiste formatieren willst, musst du noch Typoscript in der TSconfig der entsprechden Seite einfuegen. Die Angaben in Deiner CSS-Datei und die TSconfig muessen sich ergaenzen. Das gilt dann fuer alle Tabellen. Bin immer zu faul gewesen mich da durchzubeissen :) Hab' die meisten Sachen immer individuell ueber die CSS-Datei regeln koennen. ### [#5](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/5) · Juli · 2008-11-01 Hilft Dir dieser Link vielleicht weiter: ### [#6](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/6) · tele5 · 2008-11-01 Auf der Seite war ich auch schon... Ich habe gesehen, daß von tinyRTE gestern ein Update rausgekommen ist. Ich frage mich mich ob das Programm nicht besser ist als htmlarea. Das Programm ist ja kompliziert, mich wundert's das es noch keine Typo3-Studium an der Uni gibt. ### [#7](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/7) · Juli · 2008-11-01 Die Vorlesung waere rappelvoll, das Auditorium ist wohl nicht gross genug!! o.O ### [#8](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/8) · Hille · 2008-11-04 Hallo... Du mußt im SeitenTSConfig Deine im CSS erstellten Klassen auch einfügen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ classesTable = Tbreite-VOLL classesTR = Tzeile-KOPF, Tzeile-FUSS classesTD = Tzelle-weiss, Tzelle-hell, Tzelle-dunkel allowedClasses = Tbreite-VOLL, Tzeile-KOPF, Tzeile-FUSS, Tzelle-weiss, Tzelle-hell, Tzelle-dunkel #- Tabellen- und Tabellenzellen-Eigenschaften Fenster disableLayoutFieldsetInTableOperations = 0 disableSpacingFieldsetInTableOperations = 0 disableAlignmentFieldsetInTableOperations = 0 disableBordersFieldsetInTableOperations = 1 disableColorFieldsetInTableOperations = 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Die ..FieldsetInTableOperations... ermöglichen Dir dann innerhalb der Eigenschaftenbox die Tabellenklassen auch auszuwählen. Hille ### [#9](https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle/9) · tele5 · 2008-11-05 Danke! Werde es mal ausprobieren. In der Hoffnung, dass es klappt. Welcher Editor ist den wohl besser: Die neuen Version von tinyRTE oder htmlarea? --- Quelle: „htmlarea: Problem mit CSS-Stil einer Tabelle“, typo3.net, https://www.typo3.net/d/83397-htmlarea-problem-mit-css-stil-einer-tabelle Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.