Tabelle oda was???

Furien · 1 Juli 2008

Hi,
Ich suche eine andere Möglichkeit, ausser Tabbellen, um tabellarische Daten zu präsentieren.
Möglichst ohne Ränder und so.

Hier Der Tabellen Quelltext(ist javascript drin, aber wie soll man anders PopUps öfnnen oder Mouseovers erzeugen):

HTML:

<p class="header">Folgen</p>

<table style="text-align: left; width: 537px; height: 60px;" border="1" cellpadding="2" cellspacing="2">

  <tbody>

    <tr>

      <td>Auflösung</td>

      <td><img style="width: 16px; height: 16px;" alt="Dub" src="dub.png"></td>

      <td><img style="width: 16px; height: 16px;" alt="Sub" src="sub.png"></td>

      <td>Format</td>

      <td>Länge</td>

    </tr>

    <tr>

      <td>-</td>

      <td><img style="width: 14px; height: 8px;" alt="Sprache:DE" src="de.jpg"></td>

      <td>-</td>

      <td>.avi</td>

      <td>ca. 22 min (pro part ca. 5-9min.)</td>

    </tr>

  </tbody>
</table>

!--> ka wozu das ist
&nbsp;<br>

<a onmouseout="austausch1.src='download1.png';" onmouseover="austausch1.src='download2.png';" href="">&nbsp;</a>
<table style="text-align: left; width: 538px; height: 60px;" border="1" cellpadding="2" cellspacing="2">

  <tbody> <--!

    <tr>

      <td>NR</td>

      <td>Titel</td>

      <td>Download</td>

      <td>Livestream</td>

    </tr>

    <tr>

      <td>001</td>

      <td>Das Tor zum Traum</td>

      <td> <a href="javascript:J1214634444();" onmouseover="download1.src='download2.png';" onmouseout="download1.src='download1.png';"> <img src="download1.png" name="download1" border="0" height="13" width="20"> </a> </td>

      <td><a href="javascript:J2214634444();" onmouseover="livestream1.src='livestream2.png';" onmouseout="livestream1.src='livestream1.png';"> <img src="livestream1.png" name="livestream1" border="0" height="13" width="20"> </a></td>

    </tr>

  </tbody>
</table>

ach ja, dann wollte ich noch fragen, ob das HTML sauber ist, oder ob ich irgendetwas verbessern soll/könnte.

Furien

assmaje · 1 Juli 2008

Hi,
Ich suche eine andere Möglichkeit, ausser Tabbellen, um tabellarische Daten zu präsentieren.

Gibts nicht.

Möglichst ohne Ränder und so.

Lass die Ränder einfach weg. ;)

Code:

<table style="border:0px">...</table>

Ich empfehle dir allerdings, lieber ein Stylesheet zu erstellen, in dem dein ganzes CSS steht.

Code:

<link rel="stylesheet" type="text/css" href="standard.css">

Furien · 1 Juli 2008

css

ich hab css aber wie stelle ich dort den tabellen style ein?

das mit dem rand war eigentlich das blöde, der rest der fragen ist jetz egal.

Maxi · 1 Juli 2008

Code:

table {
/* Hier die Style-Codes */
}

Furien · 1 Juli 2008

geht das so?

Code:

table {
border="0"
cellpadding="2"
cellspacing="2"
bgcolor=#B8D1B9
}

Maxi · 1 Juli 2008

Furien schrieb:
geht das so?

Code:

table { border="0" cellpadding="2" cellspacing="2" bgcolor=#B8D1B9 }

In CSS-Codes kommen keine = und " vor.

Ein Beispiel:

Code:

table {
background-color: #B8D1B9;
}

Lektüre: http://www.css4you.de

Furien · 1 Juli 2008

er zeigt mir immernoch rand an, und auch nicht die bg farbe

Maxi · 1 Juli 2008

Schau dir mal diese Seiten an, die helfen.

http://www.css4you.de/tableproperty.html

sysop · 2 Juli 2008

bsp:

Code:

<table class="tblmain">

css dazu

Code:

.tblmain
{
    BORDER-TOP: black 1px solid;
    BORDER-RIGHT: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;

    background-color:#fff4f9;
    width:99%;
    height:520px;

}

neuroleptika · 2 Juli 2008

sysop schrieb:

....

Code:

.tblmain
{
    BORDER-TOP: black 1px solid;
    BORDER-RIGHT: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;

    background-color:#fff4f9;
    width:99%;
    height:520px;

}

Vielleicht noch border-collapse: collapse;
Ohne border kleben die Zellen dann lückenlos aneinander.
Ob das sinnvoll ist hängt von der übrigen Gestaltung ab.

Efchen · 2 Juli 2008

Furien schrieb:
Hi,
Ich suche eine andere Möglichkeit, ausser Tabbellen, um tabellarische Daten zu präsentieren.
Möglichst ohne Ränder und so.

Grundsätzlich musst Du bei Webseiten unterscheiden zwischen der logischen Auszeichnung und der Präsentation. Die Auszeichnung wird in HTML gemacht. HTML legt fest, was der Inhalt bedeutet. Um tabellarische Daten auszuzeichznen, gibt es das Tag <table>. Sonst nichts.
Für die Präsentation ist CSS zuständig. Wie Deine Tabelle jetzt tatsächlich aussehen soll, z.B. dass sie keine Ränder hat, das wird mit CSS gemacht. Und nur mit CSS.

"Trennung von Inhalt und Layout" ist das.

HTML macht nur die Struktur, niemals irgendwas, das mit Layout oder Design zu tun hat. Man zeichnet Elemente aufgrund ihrer Bedeutung mit bestimmten Tags aus, niemals, weil sie ein bestimmtes Erscheinungsbild haben.

Das nur so als Hintergrundwissen, das übrigens so für alle anderen Tags auch gilt. Man zeichnet z.B. ein Element mit <em> aus, weil man es betonen will, weil es wichtig ist, niemals, weil <em> in einigen Browsern kursiv dargestellt wird. Um Schrift kursiv zu machen, ohne dass sie dadurch eine bestimmte Bedeutung erlangt, nimmt man CSS mit font-style:italic. Aber niemals wendet man CSS an, um etwas wichtiges auf dem Bildschirm zu verdeutlichen, dazu muss erstmal die Bedeutung per HTML (hier: <em>) gelegt werden.

Grüße,
-Efchen

sysop · 2 Juli 2008

bin nun nicht sicher, ob das w3c konform ist, aber es ist ein riesen vorteil, dass css-einstellungen deinen html-code übersteuern.
also wenn du z.b. im code <table width="200px"> angibst, und im css etwas anderes definierst, werden deine css einstellungen heran gezogen.

Furien · 2 Juli 2008

So, meine CSS Datei sieht jetzt so aus :

Code:

body, table, td, tr { 
font-family: verdana;
color: #92b499;
font-size: 10px;
line-height: 12px;
scrollbar-face-color: #dafadc;
scrollbar-shadow-color: #87b193;
scrollbar-highlight-color: #87b193;
scrollbar-3dlight-color: #dafadc;
scrollbar-darkshadow-color: #dafadc;
scrollbar-track-color: #dafadc;
scrollbar-arrow-color: #dafadc;
} 

a:link { text-decoration:none; color:#3f5341; } 
a:visited { text-decoration:none; color:#3f5341; }
a:hover { text-decoration:none; color:#92b499; font-weight:bold; }
a:active { text-decoration:none; color:#92b499; font-weight:bold; }


.header {
 font-size: 10px;
 color:#92b499;
 text-align:center;
 border:1px dotted #C5CDC6;
 height: 3px;
 font-weight:bold
}

table {
border-collapse: collapse;
border-width: 2;
border-style: 2;
background-color: #00FF0C;
border: 0;
border-spacing:0px;
}

.tblmain
{
BORDER-TOP: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
border-collapse: collapse;
border-width: 2;
border-style: 2;
background-color: #00FF0C;
border: 0;
border-spacing:0px;

width:99%;
height:520px;
}

.
Aber der Rand ist immonoch da, sonst geht alles.

Efchen · 3 Juli 2008

Furien schrieb:
font-size: 10px;

Schriftgröße in px ist gefährlich, weil die im Internet Exploder leider nicht skaliert werden kann. Besser wäre em.

a:link { text-decoration:none; color:#3f5341; }
a:visited { text-decoration:none; color:#3f5341; }

Abgesehen davon, dass man gleiche zusammenfassen kann, ist das hier ein grober Fehler in Sachen Nutzbarkeit, weil Deine Besucher nicht erkennen können, welche Links sie schon besucht haben.

border-width: 2;
border-style: 2;

2 was? Ochsen? Aliens? em? px? %?
Ohne Einheit gehts nur bei der 0.

BORDER-TOP: black 1px solid;

In CSS wird alles klein geschrieben.

Aber der Rand ist immonoch da, sonst geht alles.

In der Tabelle? Naja, Du gibst ja auch an, dass Deine Tabelle Rahmen haben soll, dann mach die verschiedenen Angaben zu border halt weg.

Gruß,
-Efchen

Furien · 3 Juli 2008

werd probieren

Mein CSS-Auszug sieht jetzt so aus:

Code:

.tblmain
{
    border-top: black 1px solid;
    border-right: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;

    background-color:#fff4f9;
    width:99%;
    height:520px;
}

Nun,ihr könnt es euch denken,der schwarze Rand ist immernoch da.

siehe hier: Ani-Loads-Superkickers2006

Ist es möglich, dass die Spalten immer andere Farben haben also:

1234
abcd

Efchen · 10 Juli 2008

Furien schrieb:

Das kann man kürzer schreiben:

Code:

border:black 1px solid;

Nun,ihr könnt es euch denken,der schwarze Rand ist immernoch da.

Ehm, die Angabe für border oben bedeutet nichts anderes, als dass ein schwarzer Rand um das Element mit der Klasse "tblmain" gelegt wird. Wenn Du den nicht willst, lass das border weg.

Ist es möglich, dass die Spalten immer andere Farben haben

Ja klar. Aber da der IE verschiedene Selektoren nicht kennt, ist es am Besten, jeder Spalte (also jedem Element einer Spalte) eine Klasse mitzugeben, also sowas wie ".pair" und ".impair" (bitte nicht ".rot" oder ".blau", weil wenn Du die Farbe ändern willst, hast Du eine Klasse "rot", die die Farbe vielleicht auf Gelb setzt oder Du hast eine Menge Korrekturaufwand).

Gruß,
-Efchen

Tar · 10 Juli 2008

Korrigiert mich wenn ich falsch liege, aber ist für CSS3 nicht solch ein Selektor geplant, der jedes Xte Kind-Element in einem Element gestaltet?

edit:

Das Website Handbuch schrieb:
tr:nth-child(2n) { ... } /* gerade Zeilen */
tr:nth-child(2n+1) { ... } /* ungerade Zeilen */

Efchen · 10 Juli 2008

Und ich dachte, sowas hätte ich schon in CSS2 benutzt. Jedenfalls unterstützt Firefox das, aber IE nicht. Kann natürlich sein, dass das schon CSS3 ist. Aber das meinte ich mit den "Selektoren, die IE nicht kennt".

Tabelle oda was???

Furien

Mitglied

assmaje

Neues Mitglied

Furien

Mitglied

Maxi

Neues Mitglied

Furien

Mitglied

Maxi

Neues Mitglied

Furien

Mitglied

Maxi

Neues Mitglied

sysop

Guest

neuroleptika

Aktives Mitglied

Efchen

Guest

sysop

Guest

Furien

Mitglied

Efchen

Guest

Furien

Mitglied

Efchen

Guest

Tar

Aktives Mitglied

Efchen

Guest

Neueste Beiträge