Tabellenstriche - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Tabellenstriche

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Tabellenstriche

Pages: [1]

geschrieben von foxi am 24.05.2001 - 13:51

Wie mach ich ich bei Tabellen so kleine feine Striche, wie sie hier im Board und auf der ganzen Javarea vorkommen?

geschrieben von Gast am 24.05.2001 - 14:16

ganz einfach indem Du 2 Tabellen miteinander so verschachtelst, das die eine geringfügig kleiner ist als die aussere. Also:
Tabellen mit Haarlinien erreichst Du nicht mit der Angabe für table border =1 denn dieser Rahmen ist immer noch zu breit. Also verschachtelt man Tabellen ineinender wie hier:

<table width="150"
cellspacing="0" cellpadding="0"
border="0" bgcolor="#000000">
<tr>
<td>
<table width="100%"
cellspacing="1" cellpadding="3"
border="0">
<td bgcolor0"#009900">
</td>
</tr>
<tr><td bgcolor="#FFFFCC">
</td></tr>
<tr><td bgcolor="#FFFFCC">
</td></tr>
<tr><td bgcolor="#FFFFCC">
</td></tr>
</table>
</td>
</tr>
</table>

in dem beispiel ist die obere Zelle der inneren Tabelle grün und die drei darunter liegenden Felder
sind gelb
Von der sxhwarzen Tabelle, die hinter dieser Tabelle liegt ist jewils nur ien pixel Breite zu sehen, der sogenannte Haarlinien effect.

Alle Angaben und Farben kannst Du individualiesieren. Dies Beispiel habe ich aus dem aktuellen Homepagemagazin. Klaus oder Rene haben bestimmt aber auch ähnliche Codes

hat das mit der Transparenz geklappt??
Pat

geschrieben von Gast am 24.05.2001 - 14:25

geschrieben von Gast am 24.05.2001 - 14:33

noch mehr Beispiele???
Bilderrahmen:
<p>
<table align="center" bgcolor="#954A00" border="5" cellpadding="5" cellspacing="5">
<tr align="center">
<td>
<table bgcolor="#333333" border="0" cellpadding="10" cellspacing="10" bordercolor="#666666">
<tr align="center">
<td><img src="images/stairs.jpg" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table></center>

Haarlinie:
<p>
<table width="150" cellspacing="0" cellpadding="0" border="0" bgcolor="#000000">
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="3" border="0">
<tr>
<td bgcolor="teal"><b>Zelle eins in grün</b>
</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">Zelle 2
</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">Zelle 3
</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">Zelle 4
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>

noch ein anderes:

<table width="150" cellspacing="0" cellpadding="0" border="0" bgcolor="#000000">
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="3" border="0">
<tr>
<td bgcolor="black"><font color="white"><b>Zelle eins</b></font>
</td>
</tr>
<tr>
<td bgcolor="white"><font color="teal">Zelle 2</font>
</td>
</tr>
<tr>
<td bgcolor="black">
<p><b><font color="white">Zelle 3</font></b></p>
</td>
</tr>
<tr>
<td bgcolor="white">
<p><font color="teal">Zelle 4</font></p>
</td>
</tr>
<tr>
<td bgcolor="black">
<p><b><font color="white">Zelle 5</font></b></p>
</td>
</tr>
</table>
</td>
</tr>
</table>

mit Schatteneffekt:

<p>

 
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="150" bgcolor="#FF9900">
<p><b><font face="Verdana"> </font></b></p>
</td>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="10">
<p> </p>
</td>
</tr>
<tr>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="150" bgcolor="#FF9900">
<p><b><font face="Verdana">Tabelle mit<br>einfachem</font></b></p>
</td>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="10" bgcolor="black">
<p> </p>
</td>
</tr>
<tr>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="150" bgcolor="#FF9900" valign="middle">
<p><font face="Verdana"><b>Schatteneffekt</b></font></p>
</td>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="10" bgcolor="black">
<p> </p>
</td>
</tr>
<tr>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="150" bgcolor="#FF9900">
<p> </p>
</td>
<td width="20" bgcolor="#FF9900">
<p> </p>
</td>
<td width="10" bgcolor="black">
<p> </p>
</td>
</tr>
<tr>
<td width="20">
<p> </p>
</td>
<td width="150" bgcolor="black">
<p> </p>
</td>
<td width="20" bgcolor="black">
<p> </p>
</td>
<td width="10" bgcolor="black">
<p> </p>
</td>
</tr>
</table>
<p> </p>
</td>

oder guck Dir die HTML au der Homepagemagazinseite an: www.pathechtdesign.de/haarlinie.htm
Die seite stammt von der HeftCD des Homepagemagazines. Sieh sie Dir aber im MSIE an, der NS stellt manches nicht dar.

Lins mal in den Quelltext, da findest Du die beispiele hier.
Quelle HomepagemagazinCD 06/01

Geh doch mal an den Kiosk und hol Dir das Homepagemagazin Nummer 6 es lohnt sich. Ich habe es abboniert und habs nicht bereut! Lese es seit einem anderthalben Jahr und lerne manchen Kniff und Trick

geschrieben von Gast am 24.05.2001 - 15:05

lDie Webseite des Team Iddenreich ist auch sehr interessant: www.drweb.de
da fand ich folgenden artikel nachzulesen auch bei DrWeb
In die Tonne mit der Tabelle!
Seit Jahr und Tag quält sich anspruchsvolles Webdesign mit tabellarischen Krücken. Es wird Zeit, einmal etwas anderes zu wagen. Ohne Tabellen geht es schließlich auch.

Zwei Möglichkeiten bieten sich an. Erstens die einfache Gestaltung mit Unterstützung von Stylesheets. Und zweitens CSS-Layer.

Die einfache Gestaltung ist schnell erklärt. Sämtliche Elemente einer Seite werden schlichtweg untereinander gestellt. Damit das auf modernen und großen Monitoren lesbar bleibt, definiert man Ränder. Das könnte so aussehen.

<body style="margin-left : 15%; margin-right : 20%">

Besonders hervorzuhebende Textpassagen lassen sich via CSS mit einer raumschaffenden Hintergrundfarbe versehen:

<p style="background-color : silver">Die ist die Textpassage mit beliebiger Länge</p>

Satzteile können auf dieselbe Weise mit Textmarkereffekten versehen werden. Das lockert das Layout auf und verleiht Ihrer Gestaltung Kontur.

Layer (Ebenen) gehen einen Schritt weiter. Ein Layer ist ein beliebig großer Bereich irgendwo auf der Seite - Sie können das exakt festlegen. Ein Layer kann jede Art von Inhalt aufnehmen. Damit wird nicht nur mehrspaltiger Satz möglich, Layer können sich sogar überlagen, eigene Rollbalken haben, sich verstecken oder von Skripts gesteuert werden. Die Tabelle wird überflüssig. Wir brauchen sie nur, wenn es um lange, tabellerarische Auflistungen mehrerer Elemente geht. Dann , und nur dann, ist sie dem Layer überlegen.

<div id="Layer1" style="position:absolute; width:125px; padding : 8px;height:285px; z-index:1; left: 100px; top: 100px; background-color: #FFFF00; layer-background-color: #FFFF00;>Dies ist ein Layer</div>

Layer lassen sich sogar in externe Dateien auslagern. Das bietet vollständige Kontrolle über das Layout einer Seite ohne in diese selbst eingreifen zu müssen. Ein mächtiges Werkzeug.

Modernes Design kann durchaus auf Tabellen verzichten. Hin und wieder wird das sogar in die Tat umgesetzt. Ein Prinzip, das sich durchsetzen könnte. Noch freilich machen uns allerlei Browser einen Strich durch die ambitionierte Rechnung.

Diese Art der Gestaltung ist, einmal angelegt, besonders pflegeleicht; schließlich muss nur eine einzige Datei verändert werden. Auch Suchmaschinen mögen die intelligente Trennung von Form und Inhalt. Pluspunkte heimst man auf dem Gebiet der Accessibility (Zugänglichkeit) ein. Ein mit Layern erstelltes Dokument eignet sich prima, um zum Beispiel vorgelesen zu werden, von komplexen Tabellenkonstrukten lässt sich das leider nicht behaupten.

Mehr dazu verrät die Web-Site Einfach-Für-Alle der Aktion Mensch, an der auch das Dr. Web Team mitgearbeitet hat. (sl)

http://www.drweb.de/webdesign/ohne_tabellen.shtml genaue URL des Artikels

geschrieben von Gast am 24.05.2001 - 15:13

auch interessant.
http://www.drweb.de/html/seiten_einrahmen.shtml
http://www.drweb.de/html/frames_4.shtml
http://www.drweb.de/trickkiste/tricks63.shtml
http://www.drweb.de/html/hoverlinks.shtml dazu auch ein SuperTool bei und auf der Javarea Home Seite unter Tools!!!!
http://www.drweb.de/html/terrortabellen.shtml
http://www.ideenreich.com/html/tabellen_2.shtml
http://www.drweb.de/search.pl?Terms....hnellsuche hier
alle Seiten die sich bei DrWeb mit Tabellen und was man mit Ihnen alles anstellen kann, und das ist einiges ))

geschrieben von Gast am 24.05.2001 - 15:32

so wies der @rene schon angegeben hat, ist es genau richtig.

Das ganze ist eigentlich einfach erklärt.....

das cellspacing="1" ist hierbei sehr entscheidend. Je größer der Wert desto größer der Abstand zu der 2 Tabelle.
Im Prinzip wird hier nur ein Tabelle ein eine Tabellen gelagert.

geschrieben von Gast am 24.05.2001 - 16:00

Ja danke Pat, das mit dem Transperenten Hintergrund hat geklappt.

Diese Beispiele hier auch. Aber eine Tabellen Frage hab ich noch:

Wie kann ich es schaffen, das sich die Tabelle von dem Punkt aus wo sie anfängt so weit ausbreitet bis sie am Rand der Zeile angelangt ist?

geschrieben von Gast am 26.05.2001 - 00:30

hi foxi,

Verstehe jetzt nicht ganz was du damit meinst. Vielleicht mal ein Beispiel Online stellen wie so ist wie es nicht sein soll ;)

In dem Beispiel von mir oben hat die äußere Tabelle keine angaben für width oder height diese passt sich der inneren Tabelle immer an egal wie groß diese ist.

geschrieben von Gast am 26.05.2001 - 11:06

gibt z.B. das Width in Prozente an.

Beispiel:

<table border="0" cellpadding="10" cellspacing="1" width="50%">

dann nimmt die Tabelle 50% Raum der Zeile ein...Alles klar?

geschrieben von Gast am 26.05.2001 - 11:44

@ Philipp,

zu deiner Sig.

Wissen ist Macht, nicht's Wissen macht nicht's

Gott Weis alles ich Weis nicht's ( siehe Punkt 1 ;))

geschrieben von Gast am 26.05.2001 - 21:09

- ich weiss, dass ich nichts weis-
[ Sokrates, griech. Philosoph]

geschrieben von Gast am 27.05.2001 - 11:25

Lass das osoph weg, dann passt es

geschrieben von Gast am 27.05.2001 - 11:53

da haste zur Abwechslung aber mal voll recht