Tabelle formatieren mit CSS

Computer: Software & Programmierung HTML & CSS
#1

Hi!

Irgendwie hab ich das System noch nicht verstanden, wie ich meine Tabelle formtieren kann. Die Farben gehen nicht und ein Rand wird auch nicht angezeigt.

Hier mal der ein Ausschnitt aus der HTML-Datei:

von
bis
Montag
Dienstag
Mittwoch
Donnerstag
Freitag
08:30
09:15
NM V**
 
ND ILV**
 
 
09:15
10:00
 
 
 
10:15
11:00
 
ND V**
SE V***
BN V
11:00
11:45
 
 
12:00
12:45
 
 
BWL 1 V
 
12:45
13:30
NM ILV**
NS V
SE ILV***
WE V
13:30
14:15
14:30
15:15
NS ILV
E 4 S
PMF
WE ILV*
15:15
16:00
 
16:15
17:00
 
 
 
 
17:00
17:45
 
 
 
 
 
18:00
18:45
 
 
 
 
 
18:45
19:30
 
 
 
 
 

Und hier die CSS-Datei:

h1{
font-family:Arial;
font-style:italic;
vertical-align:middle;
text-align:center
}

h2{
font-family:Arial;
vertical-align:middle;
text-align:center
}

table{
vertical-align:middle;
text-align:center
border-style:solid;
border-width:thick
}

td{
/*width=100;*/
font-family:Arial;
vertical-align:middle;
text-align:center;
font-weight:bold
}

th{
/*width=100;*/
font-family:Arial;
font-size:20px
}

th.klein{
font-family:Arial;
font-size:14px
}

td.klein{
font-family:Arial;
font-size:14px
}

td.zweizeilig{
row-span:2
}

td.dreizeilig{
row-span:3
}

td.vierzeilig{
row-span:4
}

Ich hoffe ihr könnt mir weiterhelfen. Ich weiß nicht was ich falsch mache …

Viele Grüße
Franz

#2

Hallo Franz,

soweit ich weiß, geht Zellverschmelzung nicht über CSS. Das funktioniert nur, wenn Du es direkt in die Tabelle schreibst, also so:

Bei der Hintergrundfarbe gibt es 2 verschiedene Schreibweisen, die hast Du durcheinander geschmissen :wink:



    entweder: 
    oder: 
    
    Und damit die Rahmen um die Tabelle auch angezeigt werden:
    
    
    Soll um jede Zelle noch ein Rahmen, müssen die leeren Zellen gefüllt sein (am besten mit einem geschützten Leerzeichen). Um leere Zellen anzuzeigen, gibt es auch das Style-Attribut "empty-cells:show", wird allerdings vom IE nicht interpretiert (zumindest nicht bis zum IE6, wie das mit dem IE7 aussieht, weiß ich leider nicht).
    
    Grüße,
    Kerstin
    
    
    > <small>[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]</small>
#3

Hi Kerstin!

Erstmal vielen Dank für deine Hilfe! Ich hoffe es sind nicht zu viele Fragen an dich… Aber mir fehlt irgendwie ein System …

Irgendwie akzeptiert der IE6 dieses Codestück trotzdem nicht

Egal.Deshalb habe ich dann die zweite Möglichkeit genommen. Hab ich wirklich durcheinander gebracht :wink:

Auf http://validator.w3.org/ hab ich mir dann meine HTML-Seite checken lassen. K.A. warum er folgendes nicht akzeptiert:
NM V**

there is no attribute „BGCOLOR“

Wie kann ich für die Spalten eine Breite angeben:
Montag
ist auch nicht XHTML konform…

there is no attribute „WIDTH“

Wie zentriere ich die Tabelle in der Mitte?

ist nicht XHTML konform …

there is no attribute „ALIGN“.

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the „Strict“ document type with a document that uses frames (e.g. you must use the „Transitional“ document type to get the „target“ attribute), or by using vendor proprietary extensions such as „marginheight“ (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

Irgendwie hab ich gemerkt, dass viele Sachen noch nicht unterstützt werden. Eigentlich sollte ja das Layout mit CSS gemacht werden, aber irgendwie komme ich immer auf HTML zurück …

Danke dass du mir weiterhilfst!

Liebe Grüße
Franz

#4

Irgendwie akzeptiert der IE6 dieses Codestück trotzdem nicht

Was soll er da auch verarbeiten? So doof ist nicht mal
der Internet Exploder.
Das ist keine CSS-Syntax. Es muss heißen

Auf http://validator.w3.org/ hab ich mir dann meine HTML-Seite
checken lassen. K.A. warum er folgendes nicht akzeptiert:
NM V**

there is no attribute „BGCOLOR“

Na, die Antwort auf Deine Frage steht doch da: "There ist no attribute „bgcolor“.
Zu deutsch: Es gibt kein Attribut „bgcolor“. Entferne es.

Wie kann ich für die Spalten eine Breite angeben:

Mit CSS und der Eigenschaft „width“.

Montag
ist auch nicht XHTML konform…

there is no attribute „WIDTH“

Richtig.

Wie zentriere ich die Tabelle in der Mitte?

Wie man jedes Block-Element zentriert:
Mit CSS und „margin:auto“. Allerdings muss das Block-Element dazu auch eine Breite (width) angegeben haben, denn sonst erstreckt es sich über die gesamte, zur Verfügung stehende Breite, und dann siehst Du nichts mehr von der Zentrierung.

Irgendwie hab ich gemerkt, dass viele Sachen noch nicht
unterstützt werden.

Nein. Nicht mehr! Du benutzt Attribute, die Du mit HTML4 Transitional verwenden kannst, aber nicht mehr mit einer Strict-Variante.

Eigentlich sollte ja das Layout mit CSS
gemacht werden, aber irgendwie komme ich immer auf HTML zurück

Das solltest Du Dir abgewöhnen. Mit HTML sollst Du nur Deinen Inhalt auszeichnen. Semantisches HTML nennt man das. Verwende für eine Überschrift ersten Grades, ein address, um eine Adresse auszuzeichnen, verwende nie mehr b, i oder u, denn die Tags verändern das optische. Und das machst Du jetzt mit CSS.

Danke dass du mir weiterhilfst!

Ich hoffe, Du bist nicht böse, dass ich mich eingemischt habe :smile:

Tschö,
-Efchen

#5

Hi Efchen!

Vielen Dank für deine Hinweise! Irgendwie finde ich wird alles ein bisschen aufwendiger. Ich muss für alles und jedes eine Klasse definieren. Im Endeffekt habe ich mehr zum Schreiben. Klar der Vorteil liegt in der Trennung von physischen und logischen Teilen.

Trotzdem fehlt mir irgendwie ein System oder ein vernünftiges Nachschlagewerk, wo ich kurz und bündig das finde was ich suche. Selfhtml gehört für mich nicht dazu …

So eine letzte Frage habe ich noch. Wie kann ich einen Text zentrieren:

HTML-Datei:

von
bis
Montag
Dienstag
Mittwoch
Donnerstag
Freitag

CSS-Datei:
th.gleichbreit{
width:100px;
vertical-align:middle;
text-align:center;
}
th.klein{
font-family:Arial;
font-size:14px;
width:50px;
vertical-align:middle;
text-align:center;
}

Ich schaffe es nicht mal einen Text zu zentrieren …

Viele Grüße
Franz

#6

So hier ein anderes Bsp. Ich komme hier wieder nicht mit Zentrierung klar:

HTML-Datei:

  1. Operator

±*/%

  1. Operator

Ergebnis:

CSS-Datei:

table{
margin:auto;
width:250px
}

td{
vertical-align:middle;
text-align:center;
width:100px
}

td.klein{
width:50px;
vertical-align:middle;
text-align:center;
}

h1{
font-family:Arial;
font-size:20px;
vertical-align:middle;
text-align:center
}

LG
Franz

#7

Moin,

Vielen Dank für deine Hinweise! Irgendwie finde ich wird alles
ein bisschen aufwendiger.

Nein. Das bildest Du Dir nur ein. So ist das immer, wenn man etwas Neues macht, mit dem man noch nicht vertraut ist. Aber Du wirst feststellen, dass CSS sehr einfach und sehr logisch ist.

Ich muss für alles und jedes eine Klasse definieren.

Nein. Wer sagt das?

Im Endeffekt habe ich mehr zum Schreiben.

Nein. CSS erspart Dir viel Tipparbeit.

Klar der Vorteil liegt in der Trennung von physischen und
logischen Teilen.

In der Trennung von Struktur und Layout. Das ist wichtig, barrierefrei und übersichtlicher. Auch verkürzen sich die Ladezeiten und Redesigns gehen in ein paar Minuten.

Trotzdem fehlt mir irgendwie ein System oder ein vernünftiges
Nachschlagewerk, wo ich kurz und bündig das finde was ich
suche. Selfhtml gehört für mich nicht dazu …

Ich hätte SelfHTML angeführt. Ich nutze es als Nachschlagewerk.
Es gibt da noch http://www.css4you.de/ das wird von vielen auch als gut angeführt.

So eine letzte Frage habe ich noch. Wie kann ich einen Text
zentrieren:

Mit der CSS-Eigenschaft „text-align“ und dem dazugehörigen Wert „center“.

bis
Montag

Das sind ganz schlechte Namen, die Du da vergeben hast. Deine HTML-Datei sollte nur die Struktur des Inhalts enthalten. Deine Klassennamen weisen aber auf Layout hin. Wenn Du „klein“ mal größer machen willst, willst Du doch nicht alle Verweise auf „klein“ in allen HTML-Dateien in „gross“ abändern? Oder riskierst Du, dass die Klasse „klein“ heißt, aber großen Text erzeugt?

Ich schaffe es nicht mal einen Text zu zentrieren …

text-align:center ist doch richtig. Funktioniert einwandfrei.

Gruß,
-Efchen

#8

So hier ein anderes Bsp. Ich komme hier wieder nicht mit
Zentrierung klar:

Eben getestet - Zentrierung ist doch einwandfrei!
Was soll denn da nicht passen?

Gruß,
-Efchen

#9

Habs gerade mit dem FF aufgemacht. Funktioniert so wie ich es programmiert habe *ggg*

Der IE6.0.2900.2180 kann es nicht richtig darstellen … Der Opera kanns auch. Hätt ich schon früher draufkommen sollen. Sorry.

Trotzdem Danke!

LG Franz

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#10

Hallo Efchen!

Hier war das gleiche Problem mit dem IE6… Im FF funktioniert es wieder!

Mir sind einfach keine besseren Namen für die Klassen eingefallen …

Nochmals vielen Dank für deine Hilfe!

LG
Franz

#11

Moin,

Eben getestet - Zentrierung ist doch einwandfrei!
Was soll denn da nicht passen?

Habs gerade mit dem FF aufgemacht. Funktioniert so wie ich es
programmiert habe *ggg*

Der IE6.0.2900.2180 kann es nicht richtig darstellen … Der
Opera kanns auch. Hätt ich schon früher draufkommen sollen.
Sorry.

Trotzdem Danke!

Und das wars jetzt? Damit gibst Du Dich zufrieden?
Na klar kann der IE das nicht darstellen, solange Du ihn im Quirks Mode lässt.
Gib Deinem Dokument einen vernünftigen Doctype und versetze ihn in den Standards Mode, dann kann der IE das auch!
Informiere Dich über DOCTYPEs!

Schönes Wochenende,
-Efchen

#12

Hier war das gleiche Problem mit dem IE6… Im FF
funktioniert es wieder!

Quirks Mode vs. Standard Mode. --> DOCTYPE

Mir sind einfach keine besseren Namen für die Klassen
eingefallen …

Wähle sie so, dass sie den Inhalt beschreiben und nicht, wie sie aussehen.

Gute Klassennamen sind:
„Menu“, „MainArea“, „Content“, „HeaderCell“, etc.