Tabellendesign: Nur eine Definiton

HTML² · 14. März 2010

Hey again,

momentan versuche ich mich ein wenig am Tabellendesign in CSS und das meiste klappt auch schon ganz gut. Mein Problem ist nun, dass ich nicht weiß, wie ich Folgendes bewerkstelligen kann:

Es gibt eine class, die im <table>-Tag übergeben wird.

Code

<table class="beispiel">
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>




  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Alles anzeigen

Nun will ich nicht nur Dinge für die Tabelle allgemein definieren, sondern auch für alle <tr>- und/oder <td>-Tags in der Tabelle mit der class "beispiel", ohne dass ich jedem <tr> und <td> eine einzelne class übergeben muss.

Beispiel:
<table> soll einen Rahmen mit 1 Pixel Breite (solid) der Farbe blau haben.
Alle <td>-Tags sollen einen Rahmen "border-bottom: 1px solid black;" haben. Dies soll in "beispiel" definiert werden. Wenn man dann <table class="beispiel"> schreibt, sollen auch alle <td>-Tags der Tabelle automatisch wie beschrieben gestaltet werden.

Außerdem noch eine kleine Frage:
Wenn ich Beispielsweise alle <td>-Tags mit einer Linie unterlege (border-bottom: 1px ...), dann ist zwischen den einzelnen Tabellenzellen (horizontal) ein Pixel Abstand – wie bekomme ich den weg, sodass alles flüssig ineinaner übergeht?

Danke im Voraus,
HTML²

starhunter · 14. März 2010

Hallo,

Zitat

Nun will ich nicht nur Dinge für die Tabelle allgemein definieren, sondern auch für alle <tr>- und/oder <td>-Tags in der Tabelle mit der class "beispiel", ohne dass ich jedem <tr> und <td> eine einzelne class übergeben muss.

Bezieht sich auf alle Zeilen

Code

table.beispiel tr 
{
}

Bezieht sich auf alle Zellen

Code

table.beispiel tr td
{
}

Zitat

Beispiel:
<table> soll einen Rahmen mit 1 Pixel Breite (solid) der Farbe blau haben.
Alle <td>-Tags sollen einen Rahmen "border-bottom: 1px solid black;" haben. Dies soll in "beispiel" definiert werden. Wenn man dann <table class="beispiel"> schreibt, sollen auch alle <td>-Tags der Tabelle automatisch wie beschrieben gestaltet werden.

table.beispiel
{
border: solid 1px #0000ff:
}

table.beispiel td
{
border: solid 1px #000000;
}

Zitat

Außerdem noch eine kleine Frage:
Wenn ich Beispielsweise alle <td>-Tags mit einer Linie unterlege (border-bottom: 1px ...), dann ist zwischen den einzelnen Tabellenzellen (horizontal) ein Pixel Abstand – wie bekomme ich den weg, sodass alles flüssig ineinaner übergeht?

table.beispiel
{
border-collapse: collapse;
}

Ich hoffe Du kommst damit klar ansonsten melde Dich noch mal.

Mfg

Starhunter

Pelgro · 15. März 2010

Ich habe auch eine Frage zu den Tabellen.
Wie kann man das machen, dass die Tabellen horizontal gehen antstatt waagerecht.

starhunter · 15. März 2010

Hallo,

Zitat

Wie kann man das machen, dass die Tabellen horizontal gehen antstatt waagerecht.

Hmm, was meinst Du genau ? Tabellen gehen immer von links nach rechts,
von oben nach unten.

Mfg

Starhunter

lauras · 15. März 2010

Mit CSS kannst du Breite, Höhe etc. von Tabellen formatieren.

Zum Tabellendesign: Warum Tabellendesign? Das ganze ist veraltet, unflexibel, viel zeitaufwendiger, verursacht unnötigen Traffic und ergibt einen schlechteren Rang bei Suchmaschinen. Warum kein CSS?

starhunter · 15. März 2010

Hallo Laura,

Zitat

um Tabellendesign: Warum Tabellendesign?

Woher weißt Du das er ein Tabellenlayout erstellen will ? Vielleicht will er ja Daten tabellarisch darstellen oder nur etwas probieren?

Zitat

... ergibt einen schlechteren Rang bei Suchmaschinen.

Wo hast Du das gehört? Suchmaschinen gehen in erster Linie nach dem Inhalt und nicht nach Design.

Diese Seite z.B. steht bei Google auf Seite 1. Ich bin sicher es gibt noch mehr Beispiele wo Seiten mit Tabellenlayout bei Suchmaschinen auf den ersten zwei Seiten stehen.

Mfg

Starhunter

Pelgro · 15. März 2010

Zitat von "starhunter"

Hallo,

Hmm, was meinst Du genau ? Tabellen gehen immer von links nach rechts,
von oben nach unten.

Mfg

Starhunter

Alles anzeigen

[Blockierte Grafik: http://img138.imageshack.us/img138/307/rahmenh.jpg]

So

starhunter · 15. März 2010

Hallo,

ich glaube ich verstehe es jetzt. Du willst eine Tabelle mit 3 Zeilen und nur einer Spalte ?

Code

<table>
    <tr>
      <td><img src="" height="" width="" /></td>
    </tr>




    <tr>
      <td><img src="" height="" width="" /></td>
    </tr>




    <tr>
      <td><img src="" height="" width="" /></td>
    </tr>
  </table>

Alles anzeigen

Die Höhe der einzelnen Zeilen passt sich der Höhe des Bildes an.

Mfg

Starhunter

Pelgro · 15. März 2010

Und die Felder gehen dann nach unten?

lauras · 15. März 2010

Zitat

Woher weißt Du das er ein Tabellenlayout erstellen will ? Vielleicht will er ja Daten tabellarisch darstellen oder nur etwas probieren?

Für mich hat es sich so angehört. Aber kann auch sein, dass ich das falsch verstanden habe.

Zitat

Wo hast Du das gehört? Suchmaschinen gehen in erster Linie nach dem Inhalt und nicht nach Design.

Eben, die Suchmaschinen gehen nach Inhalt und das Design wird nicht berücksichtigt, demnach ist das eine logische Schlussfolgerung.
Wenn du z.B. folgendes hast:

Code

<strong><font face="Arial, Helvetica, sans-serif" color="#333333">Dies ist ein hervorgehobener Satz</font></strong>

Hast du 115 Zeichen, davon 33 Inhalt, macht knapp 29%.

Wenn du hast:

Code

<p class="class">Dies ist ein hervorgehobener Satz</p>

Der Rest in die CSS...

Hast du 54 Zeichen, davon 33 Inhalt, macht 61%.

Wenn du jetzt nach "Satz" (4 Zeichen) suchen lässt, kriegst du beim ersten 3%, beim zweiten 7% Ausbeute, das ist mehr als doppelt soviel.

Und dann stell dir das ganze mal bitte mit Tabellen vor...

Gruß
Laura

Pelgro · 15. März 2010

Zitat von "starhunter"
Hallo,

ich glaube ich verstehe es jetzt. Du willst eine Tabelle mit 3 Zeilen und nur einer Spalte ?
Code
<table>
    <tr>
      <td><img src="" height="" width="" /></td>
    </tr>




    <tr>
      <td><img src="" height="" width="" /></td>
    </tr>




    <tr>
      <td><img src="" height="" width="" /></td>
    </tr>
  </table>
Alles anzeigen
Die Höhe der einzelnen Zeilen passt sich der Höhe des Bildes an.

Mfg

Starhunter
Alles anzeigen

Hatte mir im Seminar den Bereich Tabellen nochmmal durchgelsen und damit hat sich jetzt meine Frage beantwortet.

starhunter · 15. März 2010

Hallo Laura,

Inhalt ist das was nicht zum Html oder CSS gehört, sondern das was auf dem Bildschirm steht.

Nur so ist es zu erklären das Seiten mit Tabellenlayout oder vielen Inline-Styles be Google auf der ersten Seite landen.

Auch die Anzahl der Fehler spielt keine Rolle.
Ist zumindest meine Erfahrung wenn ich mir die Seiten - die bei Google oder Yahoo auf der ersten Seite aufgelistet werden - mal anschaue.

Mfg

Starhunter

lauras · 15. März 2010

Weil die Suchbegriffe oft genug im anderen Text vorkommen. Woher soll denn eine Suchmaschine wissen, was Inhalt ist und was nicht?

Lies dir mal ein Buch über CSS-Design durch - darin wirst du fast dieselbe Erläuterung finden.

HTML² · 15. März 2010

Danke starhunter, das hilft mir sehr.

Ich hatte eben noch eine Frage, aber die hat sich beim Formulieren des Problems gerade von selbst gelöst.

starhunter · 15. März 2010

Hallo Laura,

Zitat

Weil die Suchbegriffe oft genug im anderen Text vorkommen.

Kann nicht sein. Die Wörter die im HTML und CSS vorkommen sind genau definiert und werden wohl kaum in einem normalen Text vorkommen.

Zitat

Woher soll denn eine Suchmaschine wissen, was Inhalt ist und was nicht?

Die Html Editoren erkennen es ja auch, so werden es die Suchmaschinen wohl auch erkennen können.

Ich glaube mir beide kommen hier nicht wirklich weiter. Vielleicht meldet sich ja Axel mal zu Wort.

Mfg

Starhunter

HTML² · 15. März 2010

Jetzt habe ich doch (wieder) eine Frage.

Angenommen ich habe eine Tabelle der class beispiel.

Es ist außerdem definiert:

Code

table.beispiel tr:hover {background-color: EEEEEE;}

Nun habe ich noch eine class tr.top, die im ersten
<tr> eingebunden wird

Code

(<tr class="top">

Nun will ich, dass fpr tr:hover in tr.top sich der Zeilenhintergrund nicht verändert bzw. weiß wird (color: white;).

Code

tr.top tr:hover{background-color: white;}

Dies klappt allerdings nicht, da das tr:hover aus table.beispiel eine höhere Priorität hat. Gibt es eine Möglichkeit, dieses Problem zu lösen?

starhunter · 15. März 2010

Hallo,

versuch es doch mal so:

Die Kopfzeile in <thead> packen und den Stil thead tr:hover anlegen.

Alle anderen in tbody und den stil tbody tr und tbody tr:hover anlegen.

Mfg

Starhunter

HTML² · 15. März 2010

Super, danke. Habe gerade gar nicht an <thead> gedacht.
So macht HTML echt Spaß. :~

Und noch eine Frage (ja, mich kriegt man nicht tot):

Ich habe folgende Definitionen:

Code

body{text-align: center;}
    table.beispiel {
      color: #5599FF;
      padding-bottom: 50px;
      margin: 0 auto;
    }




    table.beispiel td {
      border-bottom: 1px solid #0077EE;
      padding: 8px 10px 8px 10px;
      border-width: 1px;
    }

    table.beispiel thead{
      border-width: 3px;
      border-collapse: collapse;
      color: #AA99FF;
      font-weight: bold;
    }




    table.beispiel tr:hover{background-color: EEEEEE;}
    thead tr:hover{background-color: white;}

Alles anzeigen

Allerdings bewirkt das border-collapse: collapse; nichts, weil man es (anscheinend?) im <table> definieren muss. Ich will es aber nur im thead haben. Wie schafft man das?

starhunter · 16. März 2010

Hallo,

border-collapse: collapse; bezieht sich scheinbar wirklich nur auf die ganze Tabelle.
Was Du mal versuchen kanst: Mach zwei Tabellen. Eine die sozusagen den thead darstellt und dann direkt die eigentliche Tabelle dann ohne border-collapse.

Mfg

Starhunter

HTML² · 16. März 2010

Ah, eine einfach und innovative Lösung. Nochmals danke.

Dies klapp soweit sehr gut, jedoch gibt es ein Problem: Die Spaltenbreite der <thead>-Tabelle passt sich nicht der Spaltenbreite der normalen Tabelle an. Mithilfe von divs ist es zwar möglich, die Tabelle dazu zu bringen, nie "auseinanderzufallen" (da es ja zwei Tabellen sind), allerdings geschieht das Anpassen nicht automatisch. Da es ja zwei verschiedene Tables sind, weiß ich nicht, wie ich das machen soll, zumal sich die Spaltenbreite dem Text anpassen soll. Mit prozentualen oder normalen Werten, mit der man die Spaltenbreite reguliert, ist das natürlich möglich, aber nicht so flexibel und dynamisch. Ist das die einzige Möglichkeit oder gibt es eine Alternative, die dafür sorgt, dass sich Breite automatisch anpasst und die beiden Tabellen angleicht (etwa dass sie nur als eine gezählt werden)?

Tabellendesign: Nur eine Definiton

Jetzt mitmachen!

Teilen