HTML : Tabelle ist komisch (positionen)

[xBloodbath]

Hallo liebe Forum Besucher

Ich bin in der Schule gerade an einer Homepage dran und habe ein ziemlich grosses problem :/

http://www.imagebanana.com/view/j3pn7be5/problem.png

Auf jedenfall möchte ich, dass diese rechte Tabelle jetzt oben ist (roter pfeil) ich weiss aber nicht wie -.-

Hier ist noch der Quellcode

<hr class="noscreen" />

<h1 id="title">Über uns</h1>

<ub-navigation>
<p>
<br>
</p>

<Three columns>
<div class="content box">

<div class="content-in box">



<h2>Das sind wir</h2>
<table>
<tr><td><img src="http://www.html.de/images/elija.jpg" width="137" height="201"/> </td>
<td><table><tr>
<td style='color:#606060;width:83px;padding-bottom:12px'>Name:</td>
<td style="font-size:16px;padding-bottom:12px"><b>Elija Betschart</b></td> </tr>
<tr><td style='color:#606060;width:83px;padding-bottom:12px'>Status:</td>
<td style="padding-bottom:12px">Aktiv</td></tr>
<tr><td style='color:#606060;width:83px;padding-bottom:12px'>Alter:</td>
<td style="padding-bottom:12px">16 Jahre</td></tr>
<tr><td style='color:#606060;width:83px;padding-bottom:12px'>Wohnsitz:</td>
<td style="padding-bottom:12px">Luzern</td></tr>
<tr><td style='color:#606060;width:83px;padding-bottom:20px'>Aufgaben:</td>
<td style="padding-bottom:20px"><ul style="padding:0;margin:0;margin-left:12px">
<li>Administration</li>
<li>Organisation</li>
<li>Support</li>
<li>News</li>
<li>Grafik</li> </ul></td></tr>

<tr><td style='color:#606060;width:83px'>Kontakt:</td>
<td><a href="mailto:elija.betschart@parcom.ch"><img src="http://www.html.de/images/mail-button.jpg" width="62" height="22"></a>
<a href="standort.html"><img src="http://www.html.de/images/tel-button.jpg" width="62" height="22"</a>
<a href="http://www.facebook.com/Elija7x"><img src="http://www.html.de/images/fb-button.jpg" width="82" height="22"</a> </td></tr>
<tr><td style='color:#606060;width:83px'> </td> <td> </td></tr></table> </td> </tr></td>
</table>

Danke

 

[Mr. Poe]

warum machst du tabellen in tabellen???
das nächste mal poste bitte den code in einem code block... die dinger gibts nich umsonst

auserdem siht man kein bild wies jetzt aussieht...

 

[xBloodbath]

Amarok2

Doch ich habe oben ein Bild, wies jetzt aussieht.

Das mit dem Codeblock hab ich jetzt hinzugefügt

Die Tabellen in Tabellen mach ich, weils für mich mehr Style hat. Es sollte ja links nur das bild und rechts nur die Daten sein.

ps: darf nur html und css benutzen

 

[Mr. Poe]

ja jetzt seh ich das bild auch...

haste das schon mit align versucht?
also allign und vallign?

@edit:
http://de.selfhtml.org/html/tabellen/gestaltung.htm#ausrichtung_zellen

 

[xBloodbath]

Amarok2

Align hab ich versucht, was denkst du, wohin ich den align positionieren soll?
könntest du den genauen code + wo ich den nacher hinschreiben muss posten?

 

[Plankokan]

Scheinbar hast du einen Fehler in deiner CSS. Ohne CSS passt das ganze nämlich. Mach doch am besten mal ein Beispiel mit dienem CSS unter JSFiddles.

Da kann man dann auch besser nachvollziehen

 

[Gewa]

Versuch mal das bild mit float left ich weiß jetzt nicht mehr genau wie der code war aber das war CSS.

 

[Mr. Poe]

<hr class="noscreen" />

<h1 id="title">Über uns</h1>

<ub-navigation>
<p>
<br>
</p>

<Three columns>
<div class="content box">

<div class="content-in box">



<h2>Das sind wir</h2>
<table>
<tr><td><img src="http://www.html.de/images/elija.jpg" width="137" height="201"/> </td>
<td [COLOR="Red"]valign="top"[/COLOR]><table><tr>
<td style='color:#606060;width:83px;padding-bottom:12px'>Name:</td>
<td style="font-size:16px;padding-bottom:12px"><b>Elija Betschart</b></td> </tr>
<tr><td style='color:#606060;width:83px;padding-bottom:12px'>Status:</td>
<td style="padding-bottom:12px">Aktiv</td></tr>
<tr><td style='color:#606060;width:83px;padding-bottom:12px'>Alter:</td>
<td style="padding-bottom:12px">16 Jahre</td></tr>
<tr><td style='color:#606060;width:83px;padding-bottom:12px'>Wohnsitz:</td>
<td style="padding-bottom:12px">Luzern</td></tr>
<tr><td style='color:#606060;width:83px;padding-bottom:20px'>Aufgaben:</td>
<td style="padding-bottom:20px"><ul style="padding:0;margin:0;margin-left:12px">
<li>Administration</li>
<li>Organisation</li>
<li>Support</li>
<li>News</li>
<li>Grafik</li> </ul></td></tr>

<tr><td style='color:#606060;width:83px'>Kontakt:</td>
<td><a href="mailto:elija.betschart@parcom.ch"><img src="http://www.html.de/images/mail-button.jpg" width="62" height="22"></a>
<a href="standort.html"><img src="http://www.html.de/images/tel-button.jpg" width="62" height="22"</a>
<a href="http://www.facebook.com/Elija7x"><img src="http://www.html.de/images/fb-button.jpg" width="82" height="22"</a> </td></tr>
<tr><td style='color:#606060;width:83px'> </td> <td> </td></tr></table> </td> </tr></td>
</table>

denke so sollte es funktionieren...

 

[xBloodbath]

Amarok2

geht nicht, habs jetzt ausprobiert..

Gewa

könntest du bitte den vollständigen code posten, wäre lieb

Picola

ok danke, mal schauen was ich mache kann, wäre auch nett wenn du den css code posten könntest

 

[Floletni]

Wenn ihr CSS nutzen dürft, dann tu das bitte auch. Bei diesen ganzen "styles" verliert man ja den Überblick.

Nächstte Sache ist die. Keine Tabellen fürs Layout benutzen. Vorallem würde ich keine Tabelle in einer Tabelle machen. Kostet nur Nerven. Nutze lieber großflächig <div> dafür.

Aus Selfhtml

Noch häufiger wird mit Überschriften und Tabellen Schindluder getrieben. Überschriften sind nicht dazu da, um Text groß und fett zu machen, sondern dazu, logische Hierarchieverhältnisse zwischen Textabschnitten zu markieren. Tabellen sollten zur Gliederung tabellarischer Daten und nicht für Layout-Zwecke eingesetzt werden. Wenn Sie Text auffällig formatieren oder positionieren wollen, dann benutzen Sie dazu Kapitel Stylesheets.

 

[Mr. Poe]

dann leigt das an deiner css....
poste die mal...

 

[xBloodbath]

Floletni

Ich habe insgesamt 5 CSS (Style Sheets) das sollte ausreichen.

Die ganze page ist eigentlich mit divs gestaltet, jedoch nehme ich für das lieber eine tabelle.
wie kann man denn divs in tabellen einfügen?

CSS1:

body {padding:50px 0; background:url("../design/bg.gif") 0 0 repeat-x; font:0.8em/1.6 "arial", sans-serif;}
h1, h2, h3, h4, h5, h6, address, blockquote, dl, fieldset, ol, p, table, ul {margin:15px 0;}

/* ----------------------------------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------------------------------- */

#main {width:900px; margin:0 auto; padding:0 20px;}
#header {position:relative; height:80px; padding:0 20px; overflow:hidden;}
#header #logo {margin:0;}
#header #logo img {display:block;}
#header #nav {position:absolute; top:30px; right:20px; margin:0;}
#header #nav span {margin:0 10px;}
#promo {position:relative; height:250px; overflow:hidden;}
#promo p {margin:0;}
#promo p img {margin:0;}
#promo p#slogan {position:absolute; top:90px; right:0; z-index:999;}
#promo ul#slider {margin:0;}
#footer {padding-bottom:20px; font-size:85%;}
#footer p {margin:0;}

/* ----------------------------------------------------------------------------------------------------------
Page: Homepage
---------------------------------------------------------------------------------------------------------- */

.cols3 {width:940px; margin:20px -20px; padding:20px 0;}
.cols3 .cols3-content {padding-left:20px; background:url("../design/cols3.gif") 0 0 repeat-y;}
.cols3 .cols3-bottom {width:940px; height:3px; background:url("../design/cols3-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0;}
.cols3 .col {float:left; width:270px; margin-right:15px; padding:0 10px 10px 10px;}
.cols3 .col.last {margin-right:0;}
.cols3 .col h2 {margin:0 0 10px 0; padding:15px 10px; font-size:100%; font-weight:bold;}
.cols3 .col h2 a {text-decoration:none;}
.cols3 .col h2 a:hover {text-decoration:underline;}
.cols3 .col p {margin:0;}
.cols3 .col img {margin-bottom:10px;}
.cols3 .col ul {margin:10px 0 10px 10px;}
.cols3 .col ul li {padding-left:15px; background:url("../design/ul.gif") 0 7px no-repeat;}

/* ----------------------------------------------------------------------------------------------------------
Page: Subpage
---------------------------------------------------------------------------------------------------------- */

#title {margin:0; padding:27px 20px; font:270%/1 "arial",sans-serif; letter-spacing:-1px;}
#subnav {margin:0; padding:15px 20px;}
#subnav span {margin:0 10px;}
.content {width:940px; margin:0 -20px 20px -20px; padding:20px 0;}
.content .content-in {padding:10px 40px; background:url("../design/content.gif") 0 0 repeat-y;}
.content .content-bottom {width:940px; height:3px; background:url("../design/content-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0; margin-top:-1px;}
.content .perex {border-bottom:1px solid #ddd; font-size:170%;}
.content .box-01 {padding:15px;}
.content .col50 {float:left; width:420px;}
.content ul {margin:15px 25px;}
.content ul ul {margin:0 0 0 25px;}
.content ul li {padding-left:15px; background:url("../design/ul.gif") 0 7px no-repeat;}
.content ul ul li {padding-left:15px; background:url("../design/ul-ul.gif") 0 7px no-repeat;}
.content table {margin:15px 0; border-collapse:collapse;}
.content table th, .content table td {padding:7px 10px;}
.content table th {text-align:center; font-weight:bold;}
.content dt {font-weight:bold;}
.content dd {margin-left:50px; margin-bottom:15px;}
.content h1, .content h2 {font-size:200%;}
.content h3 {font-size:160%;}
.content h4 {font-size:120%;}
.content h5, h6 {font-size:100%;}

/* ----------------------------------------------------------------------------------------------------------
Others
---------------------------------------------------------------------------------------------------------- */

img.f-right {margin-left:20px;}
img.f-left {margin-right:20px;}
.input {padding:5px; background:url("../design/input.gif") 0 0 no-repeat; font:100%/1 "arial",sans-serif;}
.input-submit {padding:5px; font:bold 100%/1 "arial",sans-serif;}
.smaller {font-size:85%;}
.block {display:block;}

CSS2:

body {text-align:center;}
.box {height:1%;}

/* ----------------------------------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------------------------------- */

#main {width:940px; text-align:left;}

/* ----------------------------------------------------------------------------------------------------------
Page: Homepage
---------------------------------------------------------------------------------------------------------- */

.cols3 .col {width:290px;}

/* ----------------------------------------------------------------------------------------------------------
Page: Subpage
---------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------
Others
---------------------------------------------------------------------------------------------------------- */

.input {height:28px;}

CSS3:

* {margin:0; padding:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img {border:0; outline:0; vertical-align:baseline; background:transparent;}
address, caption, cite, code, dfn, th, var {font-style:normal; font-weight:normal;}
h1, h2, h3, h4, h5, h6, table {font-size:100%; font-weight:normal;}
ol, ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
table caption, table th {text-align:left;}
.box {min-height:1px;}
.box:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";}
.fix {float:none; clear:both; width:0; height:0; margin:0; padding:0; border:0; line-height:0; font-size:0;}
.f-left {float:left !important;}
.f-right {float:right !important;}
.t-left {text-align:left !important;}
.t-center {text-align:center !important;}
.t-right {text-align:right !important;}
.t-justify {text-align:justify !important;}
.va-top {vertical-align:top !important;}
.va-middle {vertical-align:middle !important;}
.va-bottom {vertical-align:bottom !important;}
.nom {margin:0 !important;}
.nomt {margin-top:0 !important;}
.nomb {margin-bottom:0 !important;}
.hidden {position:absolute; left:-1000em; top:auto; width:1px; height:1px; overflow:hidden;}
.noscreen {display:none;}

CSS4:

body {background-color:#9f9f9f; color:#000;}
a {color:#000;}
a:hover, a:active, a:focus {color:#5f5f5f;}

/* ----------------------------------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------------------------------- */

#main {background-color:#fff;}
#header #nav span, #subnav span {color:#cfcfcf;}
#header #nav strong, #subnav strong {color:#000;}
#promo {background-color:#dfdfdf;}

/* ----------------------------------------------------------------------------------------------------------
Page: Homepage
---------------------------------------------------------------------------------------------------------- */

.cols3, .content {background:#e9e9e9;}
.cols3 .col h2 {background:#5f5f5f; color:#fff;}
.cols3 .col h2 a {color:#fff;}

/* ----------------------------------------------------------------------------------------------------------
Page: Subpage
---------------------------------------------------------------------------------------------------------- */

#title {border-top:5px solid #5f5f5f; border-bottom:1px solid #ddd; color:#000;}
.content .box-01 {border:1px solid #cfcfcf; background:#f9f9f9;}
.content table {border:3px solid #cfcfcf;}
.content table th, .content table td {border:1px solid #dfdfdf;}
.content table th {color:#000;}
.content table tr.odd td {background-color:#f9f9f9;}
.content dt {color:#000;}

/* ----------------------------------------------------------------------------------------------------------
Others
---------------------------------------------------------------------------------------------------------- */

.input {border:1px solid #bfbfbf;}
.input-submit {border:1px solid #afafaf; border-right:1px solid #000; border-bottom:1px solid #000; background:#5f5f5f; color:#fff;}

 

[moquai]

Du sitzt in der Schule? Deine Übungen + Hausaufgaben solltest Du alleine lösen.

 

[Plankokan]

Der Fehler ist gefunden!

Entferne vertical-align:baseline; aus dem dritten CSS. Verändert nichts und dann funktionierts auch wie du willst

Edit: http://jsfiddle.net/Gu3qu/

 

[sharkATX]

Floletni

[...]
Die ganze page ist eigentlich mit divs gestaltet, jedoch nehme ich für das lieber eine tabelle.
wie kann man denn divs in tabellen einfügen?

Wieso dann überhaupt Tabellen? Ist das copy & paste Arbeit?

<table><tr><td><div> ...