Tabelle oda was???

html.de-Forum HTML, XHTML & CSS
1

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]

Folgen

<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>

!–> ka wozu das ist
 

 

<--! 
<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>
[/html]

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

Furien

2

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. :wink:

<table style="border:0px">...</table>Ich empfehle dir allerdings, lieber ein Stylesheet zu erstellen, in dem dein ganzes CSS steht.

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

3

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.

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

geht das so?

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

6

In CSS-Codes kommen keine = und " vor.

Ein Beispiel:

table {
background-color: #B8D1B9;
}

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

7

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

8

Schau dir mal diese Seiten an, die helfen.

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

9

bsp:

<table class="tblmain">css dazu

.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;

}
10

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.

11

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

. 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 aus, weil man es betonen will, weil es wichtig ist, niemals, weil 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: ) gelegt werden.

Grüße,
-Efchen

12

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

angibst, und im css etwas anderes definierst, werden deine css einstellungen heran gezogen.

13

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;
}[/CODE]
.
Aber der Rand ist immonoch da, sonst geht alles.

14

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

15

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;

}[/code]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

16

Das kann man kürzer schreiben:

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

17

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:

18

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“.