Wieder mal CSS und Tabelle

[CSS-Problem]

Hallo,

suche jetzt schon ne halte ewigkeit nach einer vernünftigen Info wie man mittels css eine tabelle erstellt wie

<table>
  <tr>
    <td style="width:150px">111</td>
    <td style="width:250px">222</td>
    <td>333</td>
  </tr>
  <tr>
    <td style="width:150px">444</td>
    <td style="width:250px">555</td>
    <td>666</td>
  </tr>
  <tr>
    <td style="width:150px">777</td>
    <td style="width:250px">888</td>
    <td>999</td>
  </tr>
</table>

für mich machen da immer noch Tabellen am meisten sinn da eindach zu formatieren und hintergrund und schrift usw kann man ja im TD mittels css formatieren

man kann in verbindung mittels einer db die ganzen formatierungen auch so einfach ändern aber wenn alle nach css schreiben und es das non plus ultra im bezug auf tabellen sein soll dann muß man da halt mitziehen

also wie schaut das ganze jetzt mittels css aus ?

• 3 Spalten nebeneinander
• weitere spalten darunter die dann auch eine feste breite haben denn ohne feste breite habe ich es schon hinbekommen

<div>
 <div style="display:inline; width:150px;">111</div>
 <div style="display:inline; width:250px;">222</div>
 <div style="display:inline;">333</div>
</div>
<div>
 <div style="display:inline; width:150px;">444</div>
 <div style="display:inline; width:250px;">555</div>
 <div style="display:inline;">666</div>
</div>
<div>
 <div style="display:inline; width:150px;">777</div>
 <div style="display:inline; width:250px;">888</div>
 <div style="display:inline;">999</div>
</div>

[Mathias Brodala]

Hallo CSS-Problem.

suche jetzt schon ne halte ewigkeit nach einer vernünftigen Info wie man mittels css eine tabelle erstellt wie

Mit CSS Tabellen zu erstellen ist nur da sinnvoll, wo es keine vorgefertigten Tabellen-Konstrukte gibt. (Wie z. B. in XML.)

<table>
  <tr>
    <td style="width:150px">111</td>
    <td style="width:250px">222</td>
    <td>333</td>
  </tr>
  <tr>
    <td style="width:150px">444</td>
    <td style="width:250px">555</td>
    <td>666</td>
  </tr>
  <tr>
    <td style="width:150px">777</td>
    <td style="width:250px">888</td>
    <td>999</td>
  </tr>
</table>

für mich machen da immer noch Tabellen am meisten sinn da eindach zu formatieren und hintergrund und schrift usw kann man ja im TD mittels css formatieren

Du solltest nicht dem Aussehen folgend entscheiden, ob eine Tabelle angebracht ist, oder nicht. Wenn du entsprechende Daten vorliegen hast und meinst, dass diese in einer Tabelle am besten aufgehoben wären, dann nimm eine Tabelle.

<div>
<div style="display:inline; width:150px;">111</div>
<div style="display:inline; width:250px;">222</div>
<div style="display:inline;">333</div>
</div>
<div>
<div style="display:inline; width:150px;">444</div>
<div style="display:inline; width:250px;">555</div>
<div style="display:inline;">666</div>
</div>
<div>
<div style="display:inline; width:150px;">777</div>
<div style="display:inline; width:250px;">888</div>
<div style="display:inline;">999</div>
</div>

Bloß nicht! Eine div-Suppe ist oft schlimmer als eine Layouttabelle, da wirklich aussagefrei.

Einen schönen Sonntag noch.

Gruß, Mathias

[wucher wichtel]

Hallo!

Wenn deine Tabelle tabellarische Daten enthält, dann schreibe sie auch in eine Tabelle.
Wenn es aber keine tabellarische Daten (z.b. das Layout) sind, dann solltest du auch keine Tabelle verwenden.
Also musst du uns erstmal sagen, was in der Tabelle stehen soll!

ciao, ww

[CSS-Problem]

Im Endeffekt ist es ein formular

Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
usw

wie gesagt die info wie der obenstehende text in css aussehen würde würde mich schon mal interessieren

[Mathias Brodala]

Hallo CSS-Problem.

Im Endeffekt ist es ein formular

… welches man durchaus tabellarisch strukturieren könnte. Ebenso brauchbar sind aber auch Listen (insbesondere Definitionslisten) oder gar einfache Absätze.

Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
Bezeichnung - Eingabe - weitere option
usw

wie gesagt die info wie der obenstehende text in css aussehen würde würde mich schon mal interessieren

Wichtiger wäre erst einmal die Struktur (→ das HTML). Darauf aufbauend kannst du dann das Stylesheet entwerfen. (Ein rein CSS-basiertes Formular hatte ich auch mal als Proof-of-Concept erstellt. Vielleicht liefert es dir Anregungen.)

Einen schönen Sonntag noch.

Gruß, Mathias

[CSS-Problem]

Danke das ist ein gutes Beispiel, werde mir gleich mal den Quelltext anschauen

Wegen Tabelle, ich sehe das genauso, nur ich sehe bzw höre auch das gejammer der "barrierefreiheit-rufer"

[Daniel unreg]

Hallo,

Wegen Tabelle, ich sehe das genauso, nur ich sehe bzw höre auch das gejammer der "barrierefreiheit-rufer"

Tabellen sind schlecht genutzt leider Barriere #1.

Niemand will Tabellen ganz verbieten. In vielen Fällen sind sie sehr sehr nützlich. Aber in der vergangenen Zeit und auch heute noch wird für alles erdenkliche eine Tabelle verwendet, was zur absoluten Barriere führt.

Wenn du tabellarische Daten hast, dazu zählen z.B. Lebensläufe und bestimmte Formulare, dann verwende sie bitte auch.

Denke aber bei Formularen bitte daran, <th> und <label> für die Beschriftungen der Eingabefelder zu verwenden (letzteres *unbedingt*). Bei <th> ist eventuell noch die CSS-Eigenschaft speak-header-cell wissenswert.

Andererseits kann man die beiden genannten Fälle auch problemlos als Definitionsliste umsetzen. Das ist vermutlich ein bisschen Geschmacksfrage.
Ich muss mir mal die Chance geben, die beiden Varianten per Sprachausgabe zu testen..

Gruß und Wunsch zu gutem Rutsch;