Formatierung einerTabelle

Hallo,

aus gesundheitlichen Gründen konnte ich meine letzte Anfrage nicht abarbeiten.

Ich habe auf Grundlage des Artikels in der c’t 03/11 Seite 158 eine Tabelle erstellt.

Der rechte Teil funktioniert tadellos, aber im linken Teil habe ich probleme. Dort benötige ich 3 Spalten.

Weder mit „Style“ noch mit „width“ erhalte ich gleichgroße Spalten. Was mache ich falsch?

VielenDank im Voraus

meilott

Moin!

aus gesundheitlichen Gründen konnte ich meine letzte Anfrage
nicht abarbeiten.

Muss ich das verstehen?

Ich habe auf Grundlage des Artikels in der c’t 03/11 Seite 158
eine Tabelle erstellt.

Das heißt?

Der rechte Teil funktioniert tadellos, aber im linken Teil
habe ich probleme. Dort benötige ich 3 Spalten.

Verstehe kein Wort. Vielleicht ein Link zur Seite?

Weder mit „Style“ noch mit „width“ erhalte ich gleichgroße
Spalten. Was mache ich falsch?

Hört sich zunächst mal so an, als wolltest Du mit Tabellen layouten. Das ist Unfug.
Tabellen sind dazu da, tabellarische Daten auszuzeichnen. Dabei ist es, was das optische angeht, nicht vorrangig wichtig, den Spalten feste Breiten zu geben, sondern der Browser soll dafür sorgen, dass die Inhalte der Zellen angezeigt werden. Es kann schon sein, dass ein Browser eine Spalte breiter macht, als angegeben, wenn er z.B. den Inhalt nicht umbrechen kann.

Wichtig ist aber für Dein Problem erstmal, dass Du auch wirklich tabellarische Daten auszeichnen willst. Ansonsten ist Dein Problem womöglich völlig anders zu lösen.

VielenDank im Voraus

Kurzum, wir brauchen mehr Infos.

Liebe Grüße,
-Efchen

Hallo Efchen,

Hört sich zunächst mal so an, als wolltest Du mit Tabellen
layouten. Das ist Unfug.

nein, ich will nich layouten, ich möchte „nur“ dass z.B.: die 2. Spalte in jeder Zeile die gleiche Breite hat.

Viele Grüße

meilott

Hier das CSS-Listing:

lisnav.css

/* Angaben fÌr alle standardkonformen Browser */
body {
margin:0;
padding:0;
background:#ffffff;
}
div.innerDiv{
width:120px;
white-space:nowrap;
}

div.columns{
overflow:hidden;
width:383px;
}

div.rows{
overflow:hidden;
height:188px;
}

div.data{
overflow:scroll;
width:400px;
height:200px;
}

table {
border-width:5px;
border-style:solid;
table-layout:fixed;
}

table td {
border-width:1px;
border-style:solid;
vertical-align:top;
}

table.inner {
border-width:0px;
border-style:hidden;
border-collapse:collapse;
}

table.inner td {
border-width:1px;
border-style:solid;
}

und hier die HTML-Daei

Navigationselemente
function scrollData(){
var colHead=document.getElementById(„columnHeads“);
var rowHead=document.getElementById(„rowHeads“);
var data=document.getElementById(„data“);

colHead.scrollLeft=data.scrollLeft;
rowHead.scrollTop=data.scrollTop;
}

Präge-
Präge-
Jahr
stätte
art

Auflistung der für Deutschland geprägten Kursmünzen
K u r s m ü n z e n
CC-

1 Cent
2 Cent
5 Cent
10 Cent
20 Cent
50 Cent
1 Euro
2 Euro
2 Euro
Gesamt

2002
A
NP
D
NP
F
NP
G
NP
J
NP
A
PP
D
PP
F
PP
G
PP
J
PP

1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8
1
1
1
1
1
1
1
1

8

Moin,

nein, ich will nich layouten, ich möchte „nur“ dass z.B.: die
2. Spalte in jeder Zeile die gleiche Breite hat.

Warum?

Hier das CSS-Listing:

Ich hätte mir einen Link gewünscht.

Wozu sind die ganzen Gruppen in Deinen Zellen, die keine Gruppen sind?
Sehe ich das richtig, dass Du Deine Tabelle, die eigentlich eine ist, in mehrere Tabellen aufteilst? Und deswegen die selbe Spaltenbreite verlangst?
Wenn Du Daten hast, die zu einer Tabelle gehören, dann darfst Du nicht mehrere Tabellen draus machen. Dann geht ja der Sinn (Semantik) verloren. Wenn Du das nicht machst, dann hast Du auch die Spaltenbreiten wieder richtig.
Und wenn es ums Scrollen geht…normalerweise sollte das gehen, indem Du und verwendest und diese dann scrollen lässt (overflow:auto).

Gruß,
-Efchen

Hallo Efchen,

ich habe schon einige große Tabellen im Web. Das Scrollen klappt darin einwandfrei, sowie man jedoch in den Tabellen zoomt werden die Spalten förmlich zerrissen.

Weil HTML keine halb fixierten Zeilen und Spalten kennt, bedarf es eines Tricks:

Die ursprüngliche Tabelle wird in vier Bereiche zerlegt.

Die drei Zeilen/Zellen ganz oben links bewegen sich bei keinem Scrollvorgang, sondern bleibt immer fest. Die Zeile mit den Spaltenköpfen ist immun gegen vertikale Bewegungen, folgt aber horizontalen. Die Spalte mit den Zeilen köpfen hingegen lässt sich nach oben und unten schieben. Nur der Datenbereich reagiert auf beide Scrollachsen.

Dadurch wird keineswegs die Semantik beeinträchtig ganz im Gegenteil, dadurch werden auch größere Tabellen lesbar.

Nun noch einmal meine Frage:

Ich möchte der Spalte 1 bis 3 eine Breite, die über alle Zeilen gilt, zuweisen. Es funktioniert aber nicht über Style oder width.

Viele Grüße

meilott

Moin,

Die ursprüngliche Tabelle wird in vier Bereiche zerlegt.
Dadurch wird keineswegs die Semantik beeinträchtig

Das wird sie gewiss, denn jetzt hast Du vier Tabellen (ich hab das schon richtig gesehen, dass „zerlegt“ heißt, neue Tabellen zu beginnen?).

ganz im Gegenteil, dadurch werden auch größere Tabellen lesbar.

„lesbar“ hat ja mit der Semantik nichts zu tun.

Ich möchte der Spalte 1 bis 3 eine Breite, die über alle
Zeilen gilt, zuweisen. Es funktioniert aber nicht über Style
oder width.

Wenn ich der ersten Zelle (Spalte) eine Breite gebe, dann funktioniert das, dann haben alle Zellen dieser Spalte diese Breite.
Das geht nur dann nicht, wenn der Inhalt der Zelle nicht umbrechen kann. Das ist IMHO ein Feature von Tabellen.

Ich kann Dir nicht garantieren, dass ich nen Fehler finde, aber ich würde nur reingucken, wenn ich einen Link zur Seite hätte.

Grüße,
-Efchen

Hallo Efchen,

ich habe den Fehler gefunden.

Wenn die Seite fertig ist, teile ich Dir den Link mit.

Viele Dank für die Hilfsbereitschaft.

Gruß

meilott

Hallo Efchen,

es hat leider etwas länger gedauert. Hier nun die Links.

s375107086.online.de/Download/6deutest4.html
s375107086.online.de/Download/lisnav.css

Mich würde noch interessieren wie man die Spaltenbreite anpassen kann und wie man Kommentare innerhalb des Datenbereichs einfügt. /* … */ funktioniert hier nicht.

Viele Grüße

Lothar

Moin,

ich verstehe Deinen HTML-Code nicht.

  1. Wozu sind die divs innerhalb der tds? Macht doch keinen Sinn. div dient dazu, eine logische Gruppe auszuzeichnen, eine Gruppe hast Du da aber nicht. Außerdem ist eine Gruppe innerhalb einer Tabelle schon die Tabellenzelle, also td. Manchmal ist es notwendig, für bestimmte CSS-Definitionen ein neutrales Element einzufügen. Dazu verwendet man dann div oder span. Aber so etwas liegt hier ja nicht vor. Nichts, was Du in .innerDiv setzt, könntest Du nicht auch in der td setzen. td.innerDiv würde doch völlig ausreichen.

  2. Das Tag „b“ dient der physischen Auszeichnung und hat daher im HTML-Code nichts zu suchen. Es hat keine semantische Bedeutung. Du willst mit dem Fettdruck hier vermitteln, dass es sich bei der Tabellenzelle um eine Überschrift handelt. Dazu gibt es das Tag th. Ändere td in th, und wenn D es noch fett haben willst, dann nutze CSS (font-weight:bold).

Mich würde noch interessieren wie man die Spaltenbreite anpassen kann

Die Frage hört sich komisch an, wo Du doch in .innerDiv die Spaltenbreite festlegst und eine Änderung sich auch wunderbar auf die Tabelle auswirkt.

wie man Kommentare innerhalb des Datenbereichs einfügt.
/* … */ funktioniert hier nicht.

Das verstehe ich auch nicht. /* */ sind keine HTML-Kommentare, wenn das Dein Ziel ist. Kommentare in HTML macht man mit

Kann ich Dir sonst noch irgendwie helfen?

Gruß,
-Efchen

Hallo Efchen,

erst mal vielen Dank für die Anregungen und Tipps. Selbstverständlch nehme ich auch Deine Kritik ernst.

Jedoch möchte ich mich noch als blutigen HTML/CSS-Anfänger(seit Jan. 2011) bezeichnen.

Die Datei habe ich nur an meine Vorstellung angepasst, wie ich schon berichtet hatte stammt die Vorlage aus der c’t(www.ct.de/1103158 /(Tabelle4)).

Ein schönes Wochenende

Gruß

meilott

Hallo Efchen,

mit der Frage, wie ich die Spaltenbreite anpassen kann, war nach die individuelle Breite, also je nach Inhalt, gemeint.

Mich würde noch interessieren wie man die Spaltenbreite anpassen kann

Die Frage hört sich komisch an, wo Du doch in .innerDiv die
Spaltenbreite festlegst und eine Änderung sich auch wunderbar
auf die Tabelle auswirkt.

Mit dem CSS-Eintrag in .innerDiv erreiche ich nur dass jede Salte die gleiche Breite erhält, aber das hatte ich nicht gefragt.

Viele Grüße

meilott

Moin,

Jedoch möchte ich mich noch als blutigen
HTML/CSS-Anfänger(seit Jan. 2011) bezeichnen.

Das ist ja kein Problem - aber das muss sich ändern.
Siehe auch FAQ:1161.

Die Datei habe ich nur an meine Vorstellung angepasst, wie ich
schon berichtet hatte stammt die Vorlage aus der
c’t(www.ct.de/1103158 /(Tabelle4)).

Das macht den Code dann nicht richtiger :wink: und ändert nichts an meinen Fragen.

Grüße,
-Efchen

Moin,

mit der Frage, wie ich die Spaltenbreite anpassen kann, war
nach die individuelle Breite, also je nach Inhalt, gemeint.

Tabellen funktionieren so, dass ihre Zellen immer die Breite haben, die der breiteste Inhalt benötigt, um komplett angezeigt zu werden. Wenn Du also keine feste Breite angibst, wird sich die Tabelle dem Inhalt anpassen. Du musst also Deine festen Breiten entfernen.

Mit dem CSS-Eintrag in .innerDiv erreiche ich nur dass jede
Salte die gleiche Breite erhält, aber das hatte ich nicht
gefragt.

Sondern? Du fragst nach einer individuellen Breite, setzt aber eine feste Breite. Das beißt sich natürlich. Entweder Du lässt den Browser die Breite selber festlegen, oder aber Du setzt eine fixe Breite. Die einzigen beiden Alternativen sind die Einheiten % und em. Mit % legst Du die Breite einer Zelle fest in Abhängigkeit von der Größe des Elternelements (also der Tabelle), mit „em“ orientiert sich die Größe des Elements an der eingestellten Schriftgröße.

Aber es gibt keine Einheit, die sich am Inhalt orientiert, da bleibt nur die Möglichkeit, die Angabe einer Größe ganz zu entfernen.

aber das hatte ich nicht gefragt.

In Deinem Ursprungsposting fragtest Du, wie Du gleichgroße Spalten erhältst. Du hast überall eine feste, gleich große Breite angegeben, also ist DIE Frage ja wohl beantwortet.

Im Moment haben alle Spalten und alle Zellen die gleiche Breite. Wie ist also Deine Frage, was ist Dein Problem, das noch übrig bleibt?

Liebe Grüße,
-Efchen