|
|||
[gelöst] Tabellen mit CSS formatieren
Hi
Ich muss für ein Projekt eine Tabelle basteln die als Gitternetzlinien eine (1px dotted) Linie vorsieht aber keinen Aussenrahmen (frame void) Ausserdem sollen alle Zellen gleich hoch sein irgendwie komme ich da nicht so recht hin Meine Probleme: 1.Wie muss ich die Höhe definieren so dass IE6 (und höher) und Firefox das auch verstehen (und in welchem Bereich) 2. Wie bringe ich die Zellen dazu ohne Abstand und mit nur einer Linie dargestellt zu werden -> in meiner Version hat jede Zelle eine eigene Linie und wenn ich cellspacing auf 0 setzen will erklärt mir topstyle dass es das gar nicht gibt Bin für jeden Tipp - Link oder sonstiges dankbar Camelrider mein jetziger Code #tabellen { margin:0px 0px 0px 0px; padding:0px 0px 40px 0px; display: block; width: 100%; } #tabellen h1 { font-size:80%; font-weight:bold; color: black; border: none; text-align: left; border: 1px dotted Black; } #tabellen p { font-size:80%; font-weight:normal; color: black; text-align: left; border: 1px dotted Black; } ---------------------------------------------------------- <body> <div id="tabellen"> <table> <thead> <tr> <th><h1>Titel/Beschreibung</h1></th> <th><h1>Datum</h1></th> <th><h1>Betrag 1</h1></th> <th><h1>Status</h1></th> <th><h1>Betrag 2</h1></th> </tr> </thead> <tbody> <tr> <th><p>Eskalationsstufen Abbildung</p></th> <th><p>12.02.2007</p></th> <th><p>74.000</p></th> <th><p>voll.</p></th> <th><p>74.000</p></th> </tr> <tr> <th><p>Krisenstab</p></th> <th><p>14.08.2007</p></th> <th><p>8.540</p></th> <th><p>unvoll.</p></th> <th><p>8.540</p></th> </tr> <tr> <th><p>Krisenmanagement Abbildung</p></th> <th><p>12.02.2007</p></th> <th><p>978</p></th> <th><p>abdf</p></th> <th><p>978</p></th> </tr> <tr> <th><p>Krisenstab</p></th> <th><p>14.08.2007</p></th> <th><p>21.099</p></th> <th><p>qupm</p></th> <th><p>21.099</p></th> </tr> <tr> <th><p>Eskalationsstufen</p></th> <th><p>12.02.2007</p></th> <th><p>7.309</p></th> <th><p>promp</p></th> <th><p>7.309</p></th> </tr> <tr> <th><p>Krisenstab</p></th> <th><p>14.08.2007</p></th> <th><p>6.079</p></th> <th><p>pmlah</p></th> <th><p>6.079</p></th> </tr> </tbody> </table> </div> </body> Geändert von Camelrider (17.11.2007 um 15:59 Uhr) |
Sponsored Links |
|
||||
Zitat:
Code:
td, th { height: 20px; } 2.) Code:
table { border-collapse: collapse; } Empfehle ich Dir SELFHTML: HTML / Tabellen bezüglich des Aufbaus von Tabellen. |
Sponsored Links |
|
||||
Hilfestellung zur Tabellengestaltung per CSS: Cascading Style Sheets { Tutorials : CSS-Tabellenlayouts }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
Hi
Vielen Dank vorerst mal Das mit dem Tutorial hat jetzt schon gut funktioniert - nur leider funktioniert das mit frame void irgendwie nicht mehr wo müsste der definiert werden ? Und wie kann man definieren dass der Inhalt der Zelle links und mittig (von der Höhe) ist ? lg Camelrider Geändert von Camelrider (13.11.2007 um 20:26 Uhr) |
|
||||
Hier schon geschaut: Cascading Style Sheets { Tutorials : CSS-Tabellenlayouts }
Was meinst du mit "frame void"?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
Hi
laut selfhtml kann ich mittels frame="void" den Aussenrahmen der Tabelle entfernen , was ich auch für mein Projekt benötigen würde nur leider wird bei selhtml das ganze direkt im html definiert SELFHTML: HTML/XHTML / Tabellen / Gestaltung einer Tabelle Das Tutorial hat mir schon bei einigen Dingen geholfen nur leider schaff ichs nicht dass der Text in den Zellen linksbündig UND von der Höhe der Zelle mittig dargestellt wird lg Camelrider |
|
|||
Gibt es einen tiefern Grund für die <h1>, <p> in der Tabelle? Die scheinen mit unnötig.
Wenn ich frame="void" richtig verstehe müsste das "border-style: hidden" entsprechen, aber ich bin nicht sicher ob alle Browser das untestützen. EDIT: Linkbündig: "text-align: left" Vertikal zentriert: "vertical-align: middle" Robin
__________________
CSS-Rauch! Nicht einatmen! |
|
|||
Hi
Mittlerweile hat sich der Code etwas verändert - das Grundproblem das ich gerne den äußeren Rahmen wegbringen würde ist geblieben - hat jemand eine Idee ? mittlerweile ist es mit wurscht ob es mittels CSS oder direkt im HTML gelöst wird <p> und <h1> verwende ich weil dadurch die Textformatierung einfacher wird (für den Kunden) - er kennts nur so und wills daher so lg Camelrider <div id="tabellen"> <table frame="void"> <!-- hier sollte eigentlich sich der Rahmen verabschieden aber er tuts nicht ... --> <thead> <tr bgcolor="E5F3FF"> <th><h1>Titel/Beschreibung</h1></th> <th><h1>Datum</h1></th> <th><h1>Betrag 1</h1></th> <th><h1>Status</h1></th> <th><h1>Betrag 2</h1></th> </tr> </thead> <tbody> <tr> <th><p>Eskalationsstufen Abbildung</p></th> <th><p>12.02.2007</p></th> <th><p>74.000</p></th> <th><p>voll.</p></th> <th><p>74.000</p></th> </tr> <tr bgcolor="F2F7FD"> <th><p>Krisenstab</p></th> <th><p>14.08.2007</p></th> <th><p>8.540</p></th> <th><p>unvoll.</p></th> <th><p>8.540</p></th> </tr> <tr> <th><p>Krisenmanagement Abbildung</p></th> <th><p>12.02.2007</p></th> <th><p>978</p></th> <th><p>abdf</p></th> <th><p>978</p></th> </tr> <tr bgcolor="F2F7FD"> <th><p>Krisenstab</p></th> <th><p>14.08.2007</p></th> <th><p>21.099</p></th> <th><p>qupm</p></th> <th><p>21.099</p></th> </tr> <tr> <th><p>Eskalationsstufen</p></th> <th><p>12.02.2007</p></th> <th><p>7.309</p></th> <th><p>promp</p></th> <th><p>7.309</p></th> </tr> <tr bgcolor="F2F7FD"> <th><p>Krisenstab</p></th> <th><p>14.08.2007</p></th> <th><p>6.079</p></th> <th><p>pmlah</p></th> <th><p>6.079</p></th> </tr> </tbody> </table> </div><!-- end tabellen --> ----------------------------------------------------------------- #tabellen { margin:0px 0px 0px 0px; padding:0px 0px 40px 0px; } #tabellen table { border-collapse: collapse; width: 100%; display: inline; vertical-align: middle; } #tabellen th { height: 20px; border: 1px dotted Black; text-align: left; vertical-align: middle; } #tabellen h1 { margin: 0px 0px 0px 5px; font-size:80%; font-weight:bold; color: black; border: none; } #tabellen p { margin: 0px 0px 0px 5px; font-size:80%; font-weight:normal; color: black; } |
|
|||
Zitat:
Zitat:
Robin
__________________
CSS-Rauch! Nicht einatmen! |
Sponsored Links |
|
||||
Wenn der Background einfarbig ist:
1) mach das "frame="void" weg (IE kapiert es nicht) 2) Benutze (hier mit rotem Background Code:
table { border:1px solid red; border-collapse:collapse; } td, th { border:1px dotted black; } (alle h1 und p sollten weg und th sollte nur in der obersten Zeilen sein... sonst td benutzen ) Der Kunde kann: - entweder die Seite selbst programmieren/formatieren -dann braucht er Dich nicht. - oder zusehen wie es gemacht wird und staunen, denn, es ist viel einfacher und lesbarer, wenn es richtig gemacht wird. -- EDIT -- @Robin: Gruss ! Du warst schneller...
__________________
To attain knowledge, add things everyday. To obtain wisdom, remove things everyday. (Lao Tzu) Links : Some needfull links (Delphi, XHTML...) Tools : Arpoon Freeware (Checksum...) Geändert von Loïs Bégué (15.11.2007 um 12:52 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Gliederungen (Tabellen???) mit CSS | Boof | CSS | 6 | 14.02.2009 21:21 |
3-Spalten in CSS und Tabellen IE/FF | IceMan | CSS | 7 | 20.07.2008 13:05 |
Tabellen Hintergrundfarbe vs. CSS File | horb | CSS | 6 | 16.05.2007 01:58 |
CSS Tabellen und Barrierefrei | |SONY| | CSS | 16 | 01.05.2007 17:43 |
Tabellen mit CSS ? | allstar | CSS | 17 | 07.10.2005 00:16 |