zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabellen mit CSS formatieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2007, 18:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 51
Camelrider befindet sich auf einem aufstrebenden Ast
Standard [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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.11.2007, 18:28
Benutzerbild von Hallenkicker
Fußballgott ;-)
neuer user
 
Registriert seit: 26.07.2006
Ort: Gelsenkirchen-Buer
Beiträge: 46
Hallenkicker befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Camelrider Beitrag anzeigen
Hi
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
1.)
Code:
td, th {
 height: 20px;
}


2.)
Code:
table {
 border-collapse: collapse;
}
3.)
Empfehle ich Dir SELFHTML: HTML / Tabellen bezüglich des Aufbaus von Tabellen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.11.2007, 18:39
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Hilfestellung zur Tabellengestaltung per CSS: Cascading Style Sheets { Tutorials : CSS-Tabellenlayouts }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #4 (permalink)  
Alt 13.11.2007, 20:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 51
Camelrider befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.11.2007, 21:47
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 13.11.2007, 22:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 51
Camelrider befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 14.11.2007, 14:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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!
Mit Zitat antworten
  #8 (permalink)  
Alt 15.11.2007, 11:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 51
Camelrider befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #9 (permalink)  
Alt 15.11.2007, 12:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Camelrider Beitrag anzeigen
das Grundproblem das ich gerne den äußeren Rahmen wegbringen würde ist
geblieben - hat jemand eine Idee ?
Hast du "border-style: hidden" probiert?

Zitat:
<p> und <h1> verwende ich weil dadurch die Textformatierung einfacher wird
(für den Kunden) - er kennts nur so und wills daher so
Das ist offengesagt Unsinn. Dafür gibt es <TH> und <TD> (du benutzt fälschlicherweise nur TH). Die lassen sich (wie jedes HTML-Element) genauso stylen wie alle anderen HTML-Elemente.

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.11.2007, 12:48
Benutzerbild von Loïs Bégué
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2007
Ort: Freiburg (D)
Beiträge: 779
Loïs Bégué wird schon bald berühmt werden
Standard

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; 
}
Aber in jedem Fall, pflege Deinen Tabellen-Code !
(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)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:53 Uhr.