Hi,
ich habe eine Tabelle mit 5 Zeilen und "Javascriptverschönerung".
Nun möchte ich einen kleinen Rand um dieTabelle haben. Wenn ich mit dem sogenannten Borderwert arbeite, habe ich den Effekt in allen Zeilen, den will ich aber nicht. Ich möchte das links rechts und oben und unten ein Rand um die ganze Tabelle definiert ist, wie stelle ich das an?
Danke........
Vollansicht: Tabellen mit Rand
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
Recht einfach, falls du folgendes meinst:
<table style="border:1px solid #FF0000;" >
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
<table style="border:1px solid #FF0000;" >
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
Nee, er meint glaube ich:
cu
Conny
QUELLTEXT
<div style="border:1px solid #FF0000;" >
<table border="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
<table border="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
cu
Conny
@ Conny:
passt irgendwie zu meinem Beitrag, wo ich mich über Layer vs Tabellen ausgelassen hab. Bleibt zu hoffen, dass dein Vorschlag mit allen möglichen Browsern gleich gut funktioniert... :wink:
Gruß
Mike
passt irgendwie zu meinem Beitrag, wo ich mich über Layer vs Tabellen ausgelassen hab. Bleibt zu hoffen, dass dein Vorschlag mit allen möglichen Browsern gleich gut funktioniert... :wink:
Gruß
Mike
@Unclickable
Das geht!
Im gleichen anderen Beitrag habe ich auch schon geschrieben!
Die beispiel Webs. die ich dort angegeben habe, zeigen mitunter genau dieses verhalten (div's mit border und blinde Tabellen) und alles dreifach getestet! IE, Opera, Mozilla.
cu
Conny
Das geht!
Im gleichen anderen Beitrag habe ich auch schon geschrieben!
Die beispiel Webs. die ich dort angegeben habe, zeigen mitunter genau dieses verhalten (div's mit border und blinde Tabellen) und alles dreifach getestet! IE, Opera, Mozilla.
cu
Conny
ZITAT
Nee, er meint glaube ich:
cu
Conny
QUELLTEXT
<div style="border:1px solid #FF0000;" >
<table border="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
<table border="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
cu
Conny
Sorry Conny, aber das hat so nicht funktioniert. Ich konnte nur einen Erfolg mit unclickables Variante erziehlen. Aber hab trotzdem vielen Dank. Natürlich auch Danke an unclickable.
Gruss Xyberlord
Hi,
Versteh ich nicht!
Was hat denn da nicht funktioniert???
Falls Du meinst, daß das DIV über die ganze breite der Seite geht und die Tabelle nur so breit wird wie der darin vorhandnen Text, kann Dir geholfen werden:
Du machst einfach eine width Angabe.
Achte darauf, daß im DIV auf die Tabellenweite die Borderstärke des DIVs mal 2 drauf gelegt wird!
(Sehe Beispiel!)
Das Ergebnis:
Oder hattest Du da noch ein anderes Problem?
cu
Conny
ZITAT
Sorry Conny, aber das hat so nicht funktioniert. Ich konnte nur einen Erfolg mit unclickables Variante erziehlen. Aber hab trotzdem vielen Dank. Natürlich auch Danke an unclickable.
Gruss Xyberlord
Gruss Xyberlord
Versteh ich nicht!
Was hat denn da nicht funktioniert???
Falls Du meinst, daß das DIV über die ganze breite der Seite geht und die Tabelle nur so breit wird wie der darin vorhandnen Text, kann Dir geholfen werden:
QUELLTEXT
<div style="border:4px solid #FF0000; width:108px;">
<table border="0" width="100px">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
<table border="0" width="100px">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
Du machst einfach eine width Angabe.
Achte darauf, daß im DIV auf die Tabellenweite die Borderstärke des DIVs mal 2 drauf gelegt wird!
(Sehe Beispiel!)
Das Ergebnis:
Oder hattest Du da noch ein anderes Problem?
cu
Conny
Hi Conny,
ja habe ich wahrscheinlich. Aber ich kann es nicht lösen. Ich habe es nun auch mit deiner Variante hinbekommen, nun habe ich aber das Problem das meine Tabelle nicht mehr mittig angezeigt wird sondern ganz links. Um Dir das mal etwas näherzubringen habe ich meine code beigefügt....
Was ist nun falsch?
Danke
QUELLTEXT
Oder hattest Du da noch ein anderes Problem?
ja habe ich wahrscheinlich. Aber ich kann es nicht lösen. Ich habe es nun auch mit deiner Variante hinbekommen, nun habe ich aber das Problem das meine Tabelle nicht mehr mittig angezeigt wird sondern ganz links. Um Dir das mal etwas näherzubringen habe ich meine code beigefügt....
QUELLTEXT
<BODY marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" text=#ffffff link=#000099 alink=#000099 vlink=#000099 background="../bilder/hintergr3.JPG" >
<div align="center" style="border:1px solid #212973; width:100px;">
<table class="kopf" border="0" cellpadding="0" cellspacing="0" width="100">
<td div align="left" class="hbutton">Home</td>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" onclick="this.bgColor='#FFCE3C'","location.href=index.htm" onmouseover="this.bgColor='#FFCE3C'" onmouseout="this.bgColor='#ffffff'" style=""><font><div align="left"><a href=../htm_dokumente/ueberuns.htm target=z class="ubutton" title="Infos zu dieser Website" onmouseover="window.status='Infos zu dieser Website'; return true;" onmouseout="window.status=''; return true;">Über Uns</a></font></td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" onclick="this.bgColor='#FFCE3C'","location.href=index.htm" onmouseover="this.bgColor='#FFCE3C'" onmouseout="this.bgColor='#ffffff'" style=""><font><div align="left"><a href=../htm_dokumente/partner.htm target=z class="ubutton" title="Unsere Partner" onmouseover="window.status='Partner'; return true;" onmouseout="window.status=''; return true;">Partner</a></font></td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" onclick="this.bgColor='#FFCE3C'","location.href=index.htm" onmouseover="this.bgColor='#FFCE3C'" onmouseout="this.bgColor='#ffffff'" style=""><font><div align="left"><a href=../htm_dokumente/links.htm target=z class="ubutton" title="Interessantes und Nützliches" onmouseover="window.status='Links'; return true;" onmouseout="window.status=''; return true;">Links</a></font></td>
</tr>
<div align="center" style="border:1px solid #212973; width:100px;">
<table class="kopf" border="0" cellpadding="0" cellspacing="0" width="100">
<td div align="left" class="hbutton">Home</td>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" onclick="this.bgColor='#FFCE3C'","location.href=index.htm" onmouseover="this.bgColor='#FFCE3C'" onmouseout="this.bgColor='#ffffff'" style=""><font><div align="left"><a href=../htm_dokumente/ueberuns.htm target=z class="ubutton" title="Infos zu dieser Website" onmouseover="window.status='Infos zu dieser Website'; return true;" onmouseout="window.status=''; return true;">Über Uns</a></font></td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" onclick="this.bgColor='#FFCE3C'","location.href=index.htm" onmouseover="this.bgColor='#FFCE3C'" onmouseout="this.bgColor='#ffffff'" style=""><font><div align="left"><a href=../htm_dokumente/partner.htm target=z class="ubutton" title="Unsere Partner" onmouseover="window.status='Partner'; return true;" onmouseout="window.status=''; return true;">Partner</a></font></td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" onclick="this.bgColor='#FFCE3C'","location.href=index.htm" onmouseover="this.bgColor='#FFCE3C'" onmouseout="this.bgColor='#ffffff'" style=""><font><div align="left"><a href=../htm_dokumente/links.htm target=z class="ubutton" title="Interessantes und Nützliches" onmouseover="window.status='Links'; return true;" onmouseout="window.status=''; return true;">Links</a></font></td>
</tr>
Was ist nun falsch?
Danke
ZITAT
nun habe ich aber das Problem das meine Tabelle nicht mehr mittig angezeigt wird sondern ganz links. Um Dir das mal etwas näherzubringen habe ich meine code beigefügt....
Der Code sieht etwas kapott aus. Zum einen fehlen teilweise tr-Elemente, zum anderen macht der JavaScript-Code nicht wirklich Sinn. Desweiteren solltest Du Deine Finger von der Statusleiste lassen. Die ist Teil der Benutzeroberfläche und enthält wichtige Informationen. Manipulationen daran verschlechtern die Benutzbarkeit Deiner Seite, also laß es lieber.
Nur mal als Beispiel, wie man es vielleicht machen könnte, zuerst das Stylesheet (entweder extern oder im Kopf des HTML-Dokuments):
QUELLTEXT
#kopf {text-align: center}
#kopf table {margin: 0 auto; border-spacing: 0; border: 1px solid #227}
#kopf td {padding: 0; background: white}
#kopf td:hover {background: #FC3}
#kopf td.hbutton:hover {background: white}
#kopf table {margin: 0 auto; border-spacing: 0; border: 1px solid #227}
#kopf td {padding: 0; background: white}
#kopf td:hover {background: #FC3}
#kopf td.hbutton:hover {background: white}
Und hier der zugehörige HTML-Code:
QUELLTEXT
<div id="kopf">
<table>
<tr><td class="hbutton">Home</td></tr>
<tr><td><a href="../htm_dokumente/ueberuns.htm"
title="Infos zu dieser Website">Über Uns</a></td></tr>
<tr><td><a href="../htm_dokumente/partner.htm"
title="Unsere Partner">Partner</a></td></tr>
<tr><td><a href="../htm_dokumente/links.htm"
title="Interessantes und Nützliches">Links</a></td></tr>
</table>
</div>
<table>
<tr><td class="hbutton">Home</td></tr>
<tr><td><a href="../htm_dokumente/ueberuns.htm"
title="Infos zu dieser Website">Über Uns</a></td></tr>
<tr><td><a href="../htm_dokumente/partner.htm"
title="Unsere Partner">Partner</a></td></tr>
<tr><td><a href="../htm_dokumente/links.htm"
title="Interessantes und Nützliches">Links</a></td></tr>
</table>
</div>
HTH
n!
ZITAT
... nun habe ich aber das Problem das meine Tabelle nicht mehr mittig angezeigt wird sondern ganz links.
Vor dem Tag:
QUELLTEXT
<div align="center" style="border:1px solid #212973; width:100px;">
Stellst Du:
QUELLTEXT
<center> <div style="border:1px solid #212973; width:100px;">
(das align="center" im DIV-Tag kannst Du raus nehmen)
Hinter dem </DIV> kommt natürlich auch: </center> !
Damit wird alles zentriert dargestellt; ansonnsten ist es schon auch so wie Netizen schreibt, halte Deine Code sauber!
Weiche minimal vom Grundprinzip ab, mache kleine schritte und immer wieder Testen!
Versuche Probleme 'einfach' zu lösen! Think simple!
(wie z.B. das einfügen eines 'center' Tags, anstatt align="center"!)
cu
Conny
Hi Cyberlord,
mit dem Problem der Zentrierung von DIV-Containern habe ich mich auch herumgeschlagen.
Abgesehen von dem was mein Vorredner schon geschrieben hat hab ich noch folgendes hinzuzufügen:
Wenn du mit CSS formatierst, dann mach es konsequent, also nicht noch zusätzlich HTML-Attribute wie
Am besten sind externe Stylesheets, die du dann in dein HTML-Document verlinkst. So stehen die dir dann in allen Dokumenten zur Verfügung.
Align-Attribute beziehen sich auf folgenden Text und nicht auf Kind-Objekte.
Definiere einen Container mit z.B. 80% (width: 80%) und einen linken Rand mit der Hälfte der restlichen % auf 100%, also margin-left: 10%.
So zentriere ich das.
mit dem Problem der Zentrierung von DIV-Containern habe ich mich auch herumgeschlagen.
Abgesehen von dem was mein Vorredner schon geschrieben hat hab ich noch folgendes hinzuzufügen:
Wenn du mit CSS formatierst, dann mach es konsequent, also nicht noch zusätzlich HTML-Attribute wie
QUELLTEXT
<DIV align="center" style:"...
Am besten sind externe Stylesheets, die du dann in dein HTML-Document verlinkst. So stehen die dir dann in allen Dokumenten zur Verfügung.
Align-Attribute beziehen sich auf folgenden Text und nicht auf Kind-Objekte.
Definiere einen Container mit z.B. 80% (width: 80%) und einen linken Rand mit der Hälfte der restlichen % auf 100%, also margin-left: 10%.
So zentriere ich das.
Ich habe (glaube ich) ein ähnliches Problem: ich will einen Absatz mit fester Breite (28em) zentriert darstellen, der enthaltene Text soll aber linksbündig sein - und das ganze nur mit StyleSheets (ohne Tabellen). IE lässt sich folgendermaßen überreden:
aber Netscape und Mozilla sträuben sich. <div> scheint sich nicht auf die ganze Seite ausdehnen zu lassen :cry: Gibt es da eine Lösung (wie gesagt ohne Tabellen) ?
QUELLTEXT
<div style="text-align:center; width:100%">
<p style="text-align:left; width:28em">
langer Text
</p>
</div>
<p style="text-align:left; width:28em">
langer Text
</p>
</div>
aber Netscape und Mozilla sträuben sich. <div> scheint sich nicht auf die ganze Seite ausdehnen zu lassen :cry: Gibt es da eine Lösung (wie gesagt ohne Tabellen) ?
Hallo Nemored,
versuche es mal so:
Wobei Du der erste DIV-Container auch weg lassen köntest (abhängig von der Ebene könnte das auch direkt der Body tag sein.)
cu
Conny
versuche es mal so:
QUELLTEXT
<div style="margin: 0px auto;">
<div style="text-align:left; width:28em, margin: 0px auto;">
<p>langer Text</p>
</div>
</div>
<div style="text-align:left; width:28em, margin: 0px auto;">
<p>langer Text</p>
</div>
</div>
Wobei Du der erste DIV-Container auch weg lassen köntest (abhängig von der Ebene könnte das auch direkt der Body tag sein.)
cu
Conny
Das klappt bei Netscape und Mozilla 
aber dafür nicht mehr beim IE :evil:
Ich habe noch in den ersten <div>-Tag ein text-align: center eingefügt:
Jetzt sieht es gut aus
(Nur Opera macht mir noch etwas Sorgen, aber man kann halt nicht alles haben...)
Danke für die Hilfe!
aber dafür nicht mehr beim IE :evil:
Ich habe noch in den ersten <div>-Tag ein text-align: center eingefügt:
QUELLTEXT
<div style="margin: 0px auto; text-align: center">
<div style="text-align:left; width:28em, margin: 0px auto;">
<p>langer Text</p>
</div>
</div>
<div style="text-align:left; width:28em, margin: 0px auto;">
<p>langer Text</p>
</div>
</div>
Jetzt sieht es gut aus
(Nur Opera macht mir noch etwas Sorgen, aber man kann halt nicht alles haben...)
Danke für die Hilfe!
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.