Poblemen mit Tabellen in HTML

Miri · 1 Juli 2007

Hallöchen,

bin ganz neu hier und hab ein Problem mit meinem eigenen Forum. Möchte das Design etwas ändern. Komm aber mit dem Template nicht klar. Wollte eine Tabelle mit drei Spalten machen, in der mitte soll das eigentliche Forum sein, jeweils am Rand links und rechts z.b. Bilder oder Links usw. um es einfach fröhlicher zu gestalten. Hab es jetzt erstmal mit zwei Spalten versucht, könnt euch das hier mal anschaun: Zwergkaninchenparadies-Forum - Index
Da ist jetzt rechts noch eine Shoutbox, die soll auch rechts sein aber das darüber das mit "So viele haben dieses Forum..." und darunter die Buttons sollen eigentlich ganz unten sein, so als Abschluss. Ich probier schon seit Tagen rum und komm einfach nicht weiter :evil: . Auch hab ich noch keine so große Erfahrungen in html.
Von der Aufteilung her hab ich mir gedacht, das es mit einer Tabelle am besten wär, oder könnte ich es mit Frames geschickter machen? Und wie stelle ich das an?
Kann mir jemand helfen? Soll ich den HTML Code des Forums hier reinstellen?

Puuh, hab einige Fragen für den Anfang, aber ärger mich jetzt damit schon so lang damit rum... :-( das ich mich hier anmelden und nachfragen musste, fragen kostet ja nichts :razz:

Vlg Miri

Maxi · 1 Juli 2007

Frames und Tabellen sind eher beides die falsche Lösung, versuche lieber, dein Design mit Div-Bereichen zu machen, die mit CSS positioniert und formatiert werden.

Miri · 2 Juli 2007

@ gutschiguh: Hmm, wie gesagt ich kenn mich auch nicht so gut aus, und auch was DIV- Bereiche sind weiß ich nicht. CSS ist doch auch so was wie HTML???
Naja, aber ich will jetzt nicht noch lauter andere Codes (außer HTML) lernen, außerdem ist in meinem HTML Code das Forum ja schon mit Tabelle gemacht, ich will das ja jetzt nicht löschen und dann mit so DIV- Bereichen oder CSS machen, wovon ich noch weniger Ahnung habe.

Kann mir denn sonst keiner helfen? Ich möchte einfach mein Forum so gestalten (wie oben schon beschrieben) Weil es mir so besser gefallen würde, so mit drei Spalten... und das in HTML.

VG Miri

JAGOGNUSSEL · 3 Juli 2007

Hi Miri!

Ich denke mal, dass diese Beispieldatei Dir weiter hilft. Mach 'ne kompl. Kopie von dem was "ROT" ist und siehe es Dir genau mit Deinem Edfitor an.

Du kannst nämlich eigenständige Tabellen in Tabellen anlegen. Nur die Größe der innen liegenden Tabelle ist abhängig von der, die sie einschließt.

Aber innerhalb bist Du unabhängig und kannst Deinen Ideen freien Lauf lassen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>Tabelle in Tabelle</title>
</head>
<body style="background-color: White; color: Blue; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px;">
<table width="600" border="1" align="center">
<tr>
<td width="300" rowspan="2">1 mit Tabelle 3</td>
<td width="300">2</td>
</tr>
<tr>
<td>
<table width="100%" border="1">
<tr>
<td>4.1</td>
<td>4.2</td>
</tr>
<tr>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">5 mit Tabelle 6</td>
</tr>
</table>
</body>
</html>

Das Dein "So viele haben dieses Forum " an der Seite halb verschwindet liegt daran, dass Du das "DT" nicht formatiert hast mit:
>>

Code:

align="center"

(das gilt ebenso für 100TOP u.s.w..)

Ich hoffe, dass ich die helfen konnte.
Gruß
Jagognussel

Mod-Edit: Codetags hinzugefügt- Bitte demnächst daran denken, siehe Nachredner ! (boehseronkel)

Corvulus · 3 Juli 2007

@JAGONUSSEL: Könntest du bitte die normalen Code Tags verwenden und nicht einfach alels rot machen? Danke.

Gruß Corvulus

JAGOGNUSSEL · 5 Juli 2007

Werd ich!

Wollte eigentlich nur den Code von dem normalen Text trennen. Es war mir nicht klar, dass Euch damit peinige!

Sorry !!!
Jagognussel

Miri · 22 Juli 2007

Danke für deine Hilfe! Und sorry das ich mich erst jetzt melde. Aber hatte keine Zeit es auszuprobieren.

Jetzt hab ich es mal so probiert. Sieht auch schon viel besser aus. Leider passt noch nicht alles richtig zusammen. Und ich hab jetzt viel zu viele so Tabellen Tags drin, und weiß nicht welche ich löschen darf oder nicht.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<center>
<IMG SRC="[URL]http://www.oyla6.de/userdaten/35146449/bilder/Forumbanner_neu_x800.jpg[/URL]"
WIDTH="800" HEIGHT="130"
<center>
<head>
<title><yabb title></title>
<meta http-equiv="Content-Type" content="text/html; charset=<yabb charset>">
<style type="text/css">
<!--
/* General layout */
A:link        { font-weight: normal; text-decoration: none; color: #3300B2; }
A:visited     { text-decoration: none; color: #0066CC; font-weight: normal; }
A:hover       { text-decoration: none; color: #FFFFFF; }
BODY          { scrollbar-face-color: #0033B2; scrollbar-shadow-color: #7FB2FF; scrollbar-highlight-color: #3366FF;
                scrollbar-3dlight-color: #3399FF; scrollbar-darkshadow-color: #000000;
                scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #0033FF; font-family: Verdana, Helvetica, Arial; 
                font-size:12px; margin-top: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-left: 0; 
                padding-right: 0; }
text          { font-family: Verdana, Helvetica, Arial; font-size: 11px; }
TD            { font-family: Verdana, Helvetica, Arial; color: #FFFFFF; font-size: 11px; }
input         { background-color: #FFFFFF; font-family: Verdana, Helvetica, Arial; font-size: 9pt; color: #0000B2; }
textarea      { background-color: #FFFFFF; font-family: Verdana, Helvetica, Arial; font-size: 9pt; color: #0000B2; }
select        { background-color: #6699FF; font-family: Verdana, Helvetica, Arial; font-size: 7pt; color: #0000B2; }
.copyright    { font-family: Verdana, Helvetica, Arial; font-size: 10px; }
/* YaBB navigation links */
a.nav          { font-size: 10px; text-decoration: none; color: #0066FF; }
a.nav:link     { font-size: 10px; text-decoration: none; color: #000033; }
a.nav:visited  { font-size: 10px; text-decoration: none; color: #0066B2; }
a.nav:hover    { font-size: 10px; text-decoration: none; color: #FFFFFF; font-weight: bold; text-decoration: underline; }
/* YaBB alternating bgcolors */
.windowbg     { background-color: #3399FF; font-size: 11px; font-family: Verdana; color: #FFFFFF; }
.windowbg2    { background-color: #7FB2FF; font-size: 11px; font-family: Verdana; color: #0000CC; }
.windowbg3    { background-color: #3300B2; font-size: 11px; font-family: Verdana; color: #0066FF; }
/* Misc./title/category colors */
.hr           { color: #FFFFFF; }
.titlebg      { background-color: #0033CC; color: #FFFFFF; }
.text1        { font-style: normal; font-weight: bold; font-size: 12px; color: #FFFFFF; }
.catbg        { background-color: #0066FF; color: #FFFFFF; font-weight: bold; font-size: 13px; }
.bordercolor  { background-color: #FFFFFF; }
/* Image fonts */
.imgbg        { font-style: normal; font-size: 10px; color: #0000B2; }
.imgcatbg     { font-style: normal; font-size: 10px; color: #0000B2; font-weight: bold; }
.imgtitlebg   { font-style: normal; font-size: 10px; color: #000000;  font-weight: bold; }
.imgwindowbg  { font-style: normal; font-size: 9px; color: #0000B2; }
.imgmenu      { font-style: normal; font-size: 11px; color: #FFFFFF; font-weight: bold; letter-spacing: 0.1em; }
/* Post quote/code colors */
.quote        { font-size: 10px; font-family: Verdana, Helvetica, Arial; color: #FFFFFF; background-color: #0066CC; }
.code         { font-size: 10px; font-family: Courier New; color: #FFFFFF; background-color: #3366FF; }
-->
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--
if ((navigator.appVersion.substring(0,1) == "5" && navigator.userAgent.indexOf('Gecko') != -1) || navigator.userAgent.search(/Opera/) != -1) {
   document.write('<META HTTP-EQUIV="pragma" CONTENT="no-cache">');
}
// -->
</script>
</head>
<body text="#FFFFFF" bgcolor="#6699FF" link="#0033FF">
<br>
<table width="90%" cellspacing="1" cellpadding="0" border="0" align="CENTER" class="bordercolor">
  <tr> 
    <td class="bordercolor" width="100%"> 
      <table bgcolor="##0066FF" width="100%" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
              <tr> 
 
                <td bgcolor="#0066FF" width="1"> 
                <p><font size="2">
                 </font><BR></p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr><tr> 
    <td class="bordercolor" align="center"> 
      <table bgcolor="#0066FF" width="100%" cellspacing="0" cellpadding="0" align="center">
        <tr> 
          <td width="100%" align="center"> 
            <table border="0" width="100%" cellpadding="3" cellspacing="0" bgcolor="#0066FF" align="center">
              <tr> 
                <td valign="middle" bgcolor="#0033CC" align="center"><font size="1"><yabb menu></font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr><tr> 
    <td class="bordercolor" align="center"> 
      <table bgcolor="#0066FF" width="100%" cellspacing="0" cellpadding="0" align="center">
        <tr> 
          <td width="100%" align="center"> 
            <table border="0" width="100%" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" align="center">
              <tr> 
                <td valign="middle" bgcolor="#0066FF" align="center">
                <font size="2" color="#FFFFFF"><B><yabb boardname></B>  « <yabb position> »</font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<BR>
<center>
<!--#echo banner=""-->
<BR>
 
 
 
<table width="90%" border="3" align="center">
    <TD width="90%" COLSPAN="3"><td bgcolor="#0066FF"
                  <p align="center"><b><font color="#FFFFFF" size="3">Artgerechte Haltung ist ein schönes Wort, doch oftmals fehlt es an der Umsetzung.
Hier kann geholfen werden.</font></b></p>
                </td></TD>
  <TR> 
    <TD width="15%"><rechts><iframe src="[URL="http://www.smallbox.de/shoutbox/nr-48785.html"]SMALLBOX.DE - Shoutbox - Nr. 48785[/URL]" style="width:170;height:300;border:1px solid #FFFFFF;" frameborder="0"><a 
href="<A href="http://mark-medlock.us">Mark">http://mark-medlock.us">Mark Medlock Superstar</a>, <a href="<A href="http://hotel.tokio.cn">Gustav">http://hotel.tokio.cn">Gustav tokio hotel</a>, <a 
href="<A href="http://www.gehirnatlas.de/">Gehirn</a">http://www.gehirnatlas.de/">Gehirn</a>, <a href="<A href="http://www.wowkartenspiel.de">World">http://www.wowkartenspiel.de">World of Warcraft</a>, <a 
href="<A href="http://www.ngai-chun-cheung.de/images/">Lena">http://www.ngai-chun-cheung.de/images/">Lena Gercke</a>, <a href="<A href="http://www.zitat.cc">Zitat</a">http://www.zitat.cc">Zitat</a>, <a 
href="<A href="http://www.ichdoof.de/2007/06/20/berufsgenossenschaft-druck-und-papierverarbeitung/">Berufsgenossenschaft">http://www.ichdoof.de/2007/06/20/berufsgenossenschaft-druck-und-papierverarbeitung/">Berufsgenossenschaft Druck und 
Papierverarbeitung</a></iframe><br><a href="[URL="http://www.commentit.de/now/"]commentit.de | social commenting community[/URL]" target="_blank"><img src="[URL]http://www.commentit.de/Bilder/icon.gif[/URL]" alt="comment 
it!" border="0"></a> <a href="[url=http://ge.dis.st]ge.dis.st[/url]" target="_blank"><img src="[URL]http://ge.dis.st/Bilder/icon.gif[/URL]" alt="already dis.st?" border="0"></a> <a 
href="[URL="http://www.socialized.de/add/"]socialized.de bookmarking[/URL]" target="_blank"><img src="[URL]http://www.socialized.de/Bilder/icon.gif[/URL]" alt="add bookmark!" border="0"></a></rechts></TD>
    <TD width="70%"><yabb main></TD>
    <TD width="15%"><td><p align="center"><b><font color="#FFFFFF" size="2">Das Zwergkaninchenparadies-Forum ist in diesen Linklisten und Webrings 
Mitglied:</font></b></p>
                <center><a href="[URL="http://www.toplist24.de/ts/ts.cgi?klick=741&tl=bachblueten2000"]Tier & Natur Top 100[/URL]" target="_blank"><img 
src="[URL]http://www.bachblueten2000.de/tierundnaturtop100.png[/URL]" alt="Hier gehts zur Tier & Natur Top 100 Liste" border="0"></a><!-- Anfang des Topsites Codes der 
Listinus-Toppages -->
<a href="[URL="http://click.listinus.de/topsite.php?id=56177"]Top 50 Haustiere - [ide][/URL]" target="_blank"><img src="[URL]http://icon.listinus.de/topicon.php?id=56177[/URL]" alt="Listinus Toplisten" 
border="0"></a>
<!-- Ende des Topsites Codes der Listinus-Toppages -->
 
<TR>
    <TD width="90%" COLSPAN="3"><td bgcolor="#0066FF" height="70">
                  <p align="center"><b><font color="#FFFFFF" size="2">So viele haben dieses Forum schon besucht (der Counter läuft seit dem 
21.6.2007):</font></b></p>
<center><iframe src=http://www.onlyfree.de/scripte1/counter/counter.php?usr=finvara frameborder=0 marginwidth=0 marginheight=0 scrolling=no width=91 
height=20></iframe><center>
                </td></TD>
</TABLE>
<BR>
<center>
 <font class="copyright"><yabb copyright></font>
  </center>
 </body>
</html>

Schon ein ziehmliches Durcheinander *ups*, bloß mit der Größe der Spalten komm ich noch nicht klar, wenn ich im Forum in Unterforen klicke, ändert sich die Spaltengröße und wenn ich in ein Beitrag reinklicke, ändert sich wieder die Größe... :roll: ´

tja ich denke da wird wohl keiner Lust haben den Code durchzusuchen und nach Fehlern zu suchen (wie ich eben auch). Dann versuch ich weiterhin selbst ne Lösung zu finden. Werds schon irgendwie hin bekommen.

Gruß Miri

Poblemen mit Tabellen in HTML

Miri

Neues Mitglied

Maxi

Neues Mitglied

Miri

Neues Mitglied

JAGOGNUSSEL

Neues Mitglied

Corvulus

Aktives Mitglied

JAGOGNUSSEL

Neues Mitglied

Miri

Neues Mitglied

Neueste Beiträge