Tabelle in HTML

Zitronex · 07.07.2009

Hallo ihr lieben
Ok, mein Lehrer zwingt mich das mit tabellen zu machen und ehrlich gesagt erscheint es mir auch das einfachste bei dem seitenaufbau den ich habe.. (im Klartext - ich bin verzweifelt und tabellen sind wohl meine letzte chance:hmpf

Ich versuche seit ein paar geschlagenen stunden meine in PSD gebaute internet seite (aus übungsgründen) in dreamweaver zu bauen:'((ich bin am ende mit den nerven) - ich hab mich schon durch diverse seiten wie HTML-seminar gewälzt und komm einfach nicht weiter

erst wollte ich es nämlich mit div machen - hab ich aber nicht hinbekommen, jetzt will ichs mit tabellen probieren.

Mein problem ist das ich die tabelle schon angelegt habe - aber ich bekomm die Bilder einfach nicht eingefügt...muss doch eigentlich ganz einfach sein, oder?

Abgesehen davon soll später nach einfügen der bilder die navi mit einem rollover blegt sein (text der navi muss auf ein bild in einer tabellen zeile - geht das überhaupt?)

Leute - wenn ja dann helft mir, ich bin verzweifelt :motz:

LG

Eragon · 07.07.2009

AW: Tabelle in HTML

Bei selfhtml steht jede Menge über Tabellen, siehe hier: SELFHTML: HTML/XHTML / Tabellen / Aufbau einer Tabelle

HTML:

<table border="1">
  <tr>
    <th>HEADER1</th>
    <th>HEADER2</th>
    <th>HEADER3</th>
  </tr>
  <tr>
    <td>Spalte1</td>
    <td>Spalte2</td>
    <td>Spalte3</td>
  </tr>

<th> </th> für Kopf
<tr> </tr> für Zeile
<td> </td> für Spalte

Wenn du ein Bild einfügen willst:
<td><img src="url.jpg"></td>

Zitronex schrieb:
Abgesehen davon soll später nach einfügen der bilder die navi mit einem rollover blegt sein (text der navi muss auf ein bild in einer tabellen zeile - geht das überhaupt?)

Du willst also in deinem Bild einen Text haben der als Navigation dient?
Dafür brauchst du ein einfaches Bildbearbeitungsprogramm, wo du den Text auf das Bild schreibst.
Oder du hast die Möglichkeit dein Bild als Hintergrundbild in die Tabelle einzufügen und dann einen Text drauf zu schreiben.

Bitte korrigiere mich, wenn ich dich falsch verstanden habe.

Edith möchte wissen, ob du ein Stück Code als Beispiel hast, dann können wir besser helfen.

Lifeseason1 · 07.07.2009

AW: Tabelle in HTML

ich weiß net so recht tabellen find ich persönlich net so der bringer

wenn mann mit css und div containern arbeitet ist es für mich persönlich sogar einfacher als eine riesige tabelle zu erstellen.

nur leider möchte der lehrer es ja mit den tabellen haben komisch da tabellen gar nicht mehr beutzt werden

kann man das überhaupt noch lesen wen der text auf dass bild soll und wie soll man da nen rollover effekt erzielen können?
Die frage verwirrt mich'!

Zitronex · 07.07.2009

AW: Tabelle in HTML

ok, ich hab das einfügen schon hinbekommen hab aber nen rand obwohl ich boder "0" eingegeben hab...

pagino · 07.07.2009

AW: Tabelle in HTML

Ich schließe mich da an, ein Layout mit DIVs ist für mich einfacher zu handhaben und auch viel leichter zu ändern, als eines mit Tabelle(n).

Ist es explizit eure Aufgabe, ein Tabellen-Layout zu erstellen, oder soll am Schluß einfach eine gute Webseite herauskommen? Wenn der Leher sagt, Tabelle, dann kommst du wohl nicht drum herum - selbst wenn Tabellen hautzutage nicht mehr für das Gerüst von Webseiten hergenommen werden. Für die Darstellung von tabellarischen Daten ja, aber eben nicht für die ganze Webseite.

selfhtml.org ist eine der besten Quellen, mit dem Webdesign anzufangen, weil auch viele Beispiele enthalten sind.

Du baust zunächste das Grundlayout auf und legst die Links an, die nachher beim Drüberfahren mit der Maus ihr Aussehen (wie auch immer) ändern sollen. Diese Änderung ist als "Rollover" mit JavaScript, oder als "Hover" mit CSS realisierbar. Das erste ist Scriptsprache, die zweite Lösung etwas eleganter, da barrierefrei mit reinem CSS.
Diese Dinge sind aber erst der zweite Schritt, denn erst mal mußt du dein Grundlayout anlegen.

sokie · 07.07.2009

AW: Tabelle in HTML

Zitronex schrieb:
ok, ich hab das einfügen schon hinbekommen hab aber nen rand obwohl ich boder "0" eingegeben hab...

richtig wäre

Code:

border[COLOR=Red][B]=[/B][/COLOR]"0"

obwohl das nur den RAHMEN betrifft.
Sonstige unerwüschte Abstände setzt du per

Code:

<table cellpadding="0" cellspacing="0" ... >

auf 0.

d0xId · 07.07.2009

AW: Tabelle in HTML

Hover effekte kannst du mit css machen... hier ein Beispiel

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
Hier werden dann die Links wenn du drüber gehst unterstrichen.
Du kanns natürlich auch ein Hintergrundbild einfuegen mit.

background:url("blabla.jpg") no-repeat;

Zitronex · 07.07.2009

AW: Tabelle in HTML

Also irgendwie klappt das nicht...:hmpf:
hier mal ein bild wie die seite aussehen soll:

Und hier ein bild wie sie aktuell im browser angezeigt wird....

und hier mein code aus der HTML datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SIS GRAPHICS</title>
</head>

<body id="body">

<table cellpadding="0" cellspacing="0" border="0">
<div id="Header">
<tr cellpadding="0" cellspacing="0" border="0">
<td colspan="2" height="107px",> <img src="images/Head.jpg" /> </td>
</tr>
</div>
<tr cellpadding="0" cellspacing="0" border="0">
<td height="160px", width="160"> <img src="images/Start.jpg" /> </td>

<td rowspan="5" height="663px", width="800">
<div id="scrollbereich">
<div id="inhalt">

<h1>Herzlich Willkommen</h1>

<p> Sie befinden sich auf der Website von SIS GRAPHICS. Wir designen inovativ und vorrauschauend. Kundenwünsche werden zur vollen Zufriedenheit <br />
erfüllt. Wir stehen Ihnen gerne mit Planung, Konzeption und Beratung zur Seite und unterstützen Sie bei der Umsetzung Ihrer Wünsche und Ideen. <br />
In dieser Branche sind drei Bausteine von unschätzbarer Bedeutung:
</p>

<p><em>Vertrauen · Verstehen · Verbindlichkeit </em>
</P>

<p> Vertrauen <br />
Unsere Kunden schenken uns Vertrauen was wir gerne täglich neu rechtfertigen wollen.
</p>

<p> Verstehen
Uns ist wichtig das wir uns am Anfang der Arbeit mit den Anforderungen, Vorstellungen und Erwartungen unserer Kunden auseinandersetzen. Der Kunde <br />
soll ein Verständnis für den Umfang der Arbeit entwickeln, das ergibt sich durch ein ausführliches Briefing. Dann erst beginnen die Phasen der Planung, <br />
Konzeptionierung und Realisierung.
</p>

<p> Verbindlichkeit
Konzepte müssen zu den Zielen unserer Kunden und zu der Entwicklung des Marktes passen. Qualitätsstreben verlangt einen gewissen Mut zu Wieder- <br />
sprechen wenn es darum geht nicht einfach dem Kunden zu sagen was er hören will, sondern im Interesse der besseren Lösung auch einmal anderer <br />
Meinung zu sein.
</p>

<p> Leistungen <br />
Logoentwicklung · Flyer · Broschüren · Geschäftsdrucksachen (Visitenkarten, Briefpapier) · Postkarten · Corporate Design · Fotoshootings
<a href="http://www.html-seminar.de">HTML-Seminar</a>
</p>

</div>
</div>

</td> </tr>
<tr> <td height="160px", width="160" > <img src="images/Refer.jpg" /> </td>
</tr>
<tr> <td height="159px", width="160" > <img src="images/Arbeiten.jpg" /> </td>
</tr>
<tr> <td height="159px", width="160"> <img src="images/Kontakt.jpg" /> </td>
</tr>

</table>

</body>

</html>

und hier der Inhalt meiner css datei:

/* CSS Document */

#body {
font-family:Helvetica Neue, Arial, sans-serif;
}

#inhalt {
font-size: 12 px;

}

hoffe einer kann mir helfen und danke für die berits gegebenen tipps!!

betalif · 07.07.2009

AW: Tabelle in HTML

Kannst du die eingebundenen Grafiken bitte mit posten? Dann schau ich mal, was ich machen kann.

cebito · 07.07.2009

AW: Tabelle in HTML

Zitronex schrieb:
hier mal ein bild wie die seite aussehen soll:

Und was soll da an einer div-Umsetzung so schwierig sein? Erspar dir das Tabellengefummel.

leohh · 07.07.2009

AW: Tabelle in HTML

Was spricht denn eigentlich gegen, die moderne Missbrauchung von Tabellendarstellung?
Hier ein beispiel, wobei ich bitte den CC mit dem Overflow hidden nicht allzu ernst zu nehmen, war bequemer als einen Zusatztag zu setzten:

Code:

[HTML]<!DOCTYPE html>
<html lang="de"
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>Site title</title>
      <style>
         #page-wrap { display: table; }
         #aside, main { display: table-cell;}
         #header, #content { display: table-row; }
         
         <!--[if gte IE 6]>
            #page-wrap { overflow: hidden; }
            #adside, #main { float: left; }
         <![endif]-->
      
      </style>
      
   <body>
      <div id="page-wrap">
         <div id="aside">
            <ul id="nav">
               <li><a href="#" title="">Link</a>
               <li><a href="#" title="">Link</a>
               <li><a href="#" title="">Link</a>
               <li><a href="#" title="">Link</a>

            </ul>
         </div>
         <!-- endAside -->

         <div id="main">
            <div id="header">
               <h1>Site title</h1>
               <img src="" alt="logo" />
            </div>
            <!-- endHead -->
            
            <div id="content">
               <h3>Herzlich Willkommen</h3>
               <p>
                  Sie befinden sich auf der Website von SIS GRAPHICS. Wir designen inovativ und vorrauschauend. 
                  Kundenwünsche werden zur vollen Zufriedenheit erfüllt. Wir stehen Ihnen gerne mit Planung, Konzeption 
                  und Beratung zur Seite und unterstützen Sie bei der Umsetzung Ihrer Wünsche und Ideen.
                  In dieser Branche sind drei Bausteine von unschätzbarer Bedeutung:
               
               <h3 id="slogan">Vertrauen · Verstehen · Verbindlichkeit </h3> 
               <dl> 
                  <dt>Vertrauen 
                     <dd>
                        <p>
                           Unsere Kunden schenken uns Vertrauen was wir gerne täglich neu rechtfertigen wollen.
                  <dt>Verstehen
                     <dd>
                        <p>
                           Uns ist wichtig das wir uns am Anfang der Arbeit mit den Anforderungen, Vorstellungen und Erwartungen 
                           unserer Kunden auseinandersetzen. Der Kunde soll ein Verständnis für den Umfang der Arbeit entwickeln, 
                           das ergibt sich durch ein ausführliches Briefing. Dann erst beginnen die Phasen der Planung, 
                           Konzeptionierung und Realisierung. 
                  <dt>Verbindlichkeit
                     <dd>
                        <p>
                           Konzepte müssen zu den Zielen unserer Kunden und zu der Entwicklung des Marktes passen. 
                           Qualitätsstreben verlangt einen gewissen Mut zu Wieder- sprechen wenn es darum geht nicht einfach dem Kunden 
                           zu sagen was er hören will, sondern im Interesse der besseren Lösung auch einmal anderer Meinung zu sein.

               </dl>   
               <h3>Leistungen</h3>
                  <ul>
                     <li>Logoentwicklung · 
                     <li>Flyer · 
                     <li>Broschüren · 
                     <li>Geschäftsdrucksachen (Visitenkarten, Briefpapier) · 
                     <li>Postkarten · 
                     <li>Corporate Design · 
                     <li>Fotoshootings
                     <li><a href="http://www.html-seminar.de">HTML-Seminar</a>
                  </ul>
            </div>
            <!-- endContent -->
            
         </div>
         <!-- endMain -->
         
      </div>
      <!-- endPage-Wrap -->[/HTML]

leibsch · 14.07.2009

AW: Tabelle in HTML

hey leute...
wie wäre es denn wenn du in der spalte die zellen verbindest?!

HIER

SierraLeon · 16.07.2009

AW: Tabelle in HTML

Also so grundsätzlich versteh ich nicht ganz, warum du die DIVs noch mit bei der Tabelle dazu reinpackst.
Würde das in dem Fall nicht vermischen, sondern wenn es ein Tabellendesign sein soll, dann eben nur Tabellen. Du kannst den einzelnen TDs ja auch das ID Attribut hinzufügen.

Also würde ich dann deine Seite ungefähr so aufbauen:

HTML:

<table>
  <tr>
    <td id="header" colspan="2">
     Hier dann den Header mit rein
    </td>
  </tr>
  <tr>
    <td id="navigation">
     Navigation dann hier - am besten mit einer unsortierten Liste (UL)
    </td>
    <td id="inhalt">
     Der Inhalt kommt dann da rein
    </td>
  </tr>
</table>

Grüße
SierraLeon