Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 24

Thema: Tabelle vs CSS

  1. #1
    Großmeister(in) Avatar von R3WARD
    Registriert seit
    08.02.2008
    Ort
    localhost
    Beiträge
    597
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tabelle vs CSS

    Hallo,

    da hier einige CSS-Experten jede Verwendung einer Tabelle als Layout als "Totsünde" bezeichnen möchte ich nun mal sehen wer es schafft dieses Tabellenlayout mit CSS und DIVS umzusetzen.
    Wichtig dabei ist das die Höhe aller 3 Spalten immer gleich und abhängig vom Inhalt ist.

    Jetzt bin ich mal gespannt wer dies schafft.


    HTML-Code:
    <table style="text-align: left; width: 100%;" border="0"
     cellpadding="10" cellspacing="0">
      <tbody>
        <tr>
          <td style="background-color: rgb(51, 51, 51);" colspan="3" rowspan="1"><br>LOGO<br>
          </td>
        </tr>
        <tr>
          <td style="width: 100px; vertical-align: top; background-color: rgb(204, 204, 204);">
            Text1<br>
            Sonstiges<br>
            Überschallgeschwindigkeitsflugzeug</td>
          <td style="height: 400px; background-color: rgb(102, 255, 153); vertical-align: top;">
                 Dies ist ein TEST</td>
          <td style="width: 80px; background-color: rgb(204, 204, 204); vertical-align: top;">
          Text1<br>
          Text2<br>
          Text3</td>
        </tr>
      </tbody>
    </table>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Unregistriert
    Gast

    Standard AW: Tabelle vs CSS

    etwas XHTML und Css würde dir auch nicht schaden, das was du möchstet ist sooooo easy. Wenn du divs und css kannst dann kannst du nach dieser anleitung arbeiten

    http://ohne-css.gehts-gar.net/0005.php


    lg Shila

  3. #3
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    Moin,

    Tabellenlayout ist von vorvorgestern,
    die Diskussion darüber von vorgestern und
    die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern.

    Setz dich halt einfach auf den Hosenboden und lerne CSS.

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    Eine Website mit Divs zu machen ist genauso falsch wie mit Tabellen. Deshalb soll man Tabellen auch nicht mit Divs ersetzen.

    Vielmehr kommt es darauf an, eine Seite möglichst semantisch korrekt aufzubauen. Hierzu bietet HTML für fast jeden Zweck spezielle Elemente an, die man sinngerecht einsetzen sollte, siehe HTML-Elementreferenz.

    Eines dieser vielen Elemente sind Tabellen. Sie dienen der strukturierten Darstellung tabellarischen Inhalts, also z.B. eine Adressliste, ein Terminkalender o.ä.

    Ein weiteres Element ist der Div (division). Er dient dazu, größere Bereiche zu gruppieren und darzustellen.

    CSS wiederum dient der Formatierung und Positionierung aller Elemente.

    Wenn du dir dieser Logik bewusst wirst, dann wirst du auch verstehen, weshalb man eine Seite weder mit Tabellen, noch mit Divs macht.

    Und was dein Spaltenlängenproblem betrifft: Zugegeben, da gibt es keine Standardlösung. Man kann sich aber mit Faux Columns behelfen.

  5. #5
    Großmeister(in)
    Themenstarter
    Avatar von R3WARD
    Registriert seit
    08.02.2008
    Ort
    localhost
    Beiträge
    597
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    Zitat Zitat von Unregistriert Beitrag anzeigen
    etwas XHTML und Css würde dir auch nicht schaden, das was du möchstet ist sooooo easy. Wenn du divs und css kannst dann kannst du nach dieser anleitung arbeiten
    Also ich habe mich natürlich vorher informiert ab zu meinen Problem konnten auch Personen die komplett auf DIVS schwören mir keine Antwort liefern.

    Klar ist es einfach mit Faux Columns schön paar Spalten zu erstellen aber ich habe keine Lösung gefunden das die Spalten zwar fest aber auch dynamisch bleiben.
    D. h. ist in einer Spalte der Inhalt zu breit dann soll die Spalte verbreitert werden ohne das sich der Rest vom Design verhaut. (siehe HTML-Tabellen Layout oben, da funktioniert dies)


    Zitat Zitat von koslowski Beitrag anzeigen
    die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern.
    Tja bisher konnten mir auch Spezialisten keine richtige Lösung auf das Problem geben, deswegen bin ich einfach mal gespannt ob jemand eine Lösung hat.

    Zitat Zitat von sejuma Beitrag anzeigen
    Und was dein Spaltenlängenproblem betrifft: Zugegeben, da gibt es keine Standardlösung. Man kann sich aber mit Faux Columns behelfen.
    Faux Columns ist mir bekannt nur setze ich es eben nicht ein da mir keine eine Lösung auf das Problem nennen kann (siehe oben)

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    Du hast in deinem Tabellencode drei Zellen nebeneinander:
    Zei mit fixen Breiten von 100px und 80px und mittendrin eine ohne Breitenangabe.
    Genauso funktioniert das mit drei nebeneinander angeordneten Divs auch.

    Ich hab's nicht ausprobiert und habe momentan dazu leider auch keine Zeit. Aber generell sollte das was die gleiche Spaltenlänge betrifft ähnlich wie hier funktionieren:
    http://www.ohne-css.gehts-gar.net/0031.php

  7. #7
    Unregistriert
    Gast

    Standard AW: Tabelle vs CSS

    eben höre mal drauf was sejuma schreibt...... ansonsten lässt es aber wie sejuma schon sagte...

  8. #8
    Youngster Avatar von Texasmutscha
    Registriert seit
    14.02.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    Zitat Zitat von koslowski Beitrag anzeigen
    Moin,

    Tabellenlayout ist von vorvorgestern,
    die Diskussion darüber von vorgestern und
    die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern.

    Setz dich halt einfach auf den Hosenboden und lerne CSS.
    Ich habe letztes Jahr angefangen, würde es sicher hinbekommen

    Du bist in dem Bereich schon viel länger tätig laut deiner Mitgliedschaft hier. In dem Zeitraum hättest du es längst erlernen können
    Mein Pc:
    Intel Core i5 i5-750 / 4x2.66 GHz
    Socket 1156 4-Core
    4096 MB/ 1333Mhz RAM DDR3
    NVIDIA GeForce 275GTX 1792MB GDDR RAM
    1TB GB SATA 7,200 U/Min

  9. #9
    Youngster Avatar von Texasmutscha
    Registriert seit
    14.02.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    ich war gerade fast dabei dir das mal kurz zu bauen(dauern würde es 3-5 min), aber da du wahrscheinlich auch verstehen willst. Sieh mal hier:
    http://www.cssplay.co.uk/layouts/thr...n-layouts.html
    Ist mir gerade noch ins Auge gestochen als ich meine Favoriten duchsuchte

    Hoffe du beschäftigst dich trotzdem auch mit XHTML und Css(extern).

    Übernimm mal diesen Code hier 1:1 , dann kannst du sehen was wie geht.

    index.html
    -->
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>Willkommen | Divs statt Tabellen</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <link href="css.css" type="text/css" rel="stylesheet" />
        <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
    </head>
    <body>
      <div id="header">
       <div class="content">
        <h1>CSS play - SIMPLE Flexible Layout - 3 columns two fixed widths</h1>
        <p>Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration (except for the 'Donate' button).</p>
       </div>
      </div> <!-- end header -->
     
      <div id="wrapper">
       <div id="outer1">
         <h3>Left 200px</h3>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
       </div>
     
       <div id="outer3">
         <h3>Right 200px</h3>
         <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
         <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
         <p>All three columns will end at the footer.</p>
       </div> <!-- end outer3 -->
     
       <div id="outer2">
         <h3>Center percentage</h3>
         <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
         <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
         <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
       </div> <!-- end outer2 -->
     
     
      </div><!-- end #wrapper -->
     
      <div id="footer">
       <div class="content">
        <p>&copy; Autor der Seite </p>
       </div>
      </div> <!-- end footer -->
     
    </body>
    </html>

    Und die untere Css datei speicherst du unter css.css ab und lädst sie ins selbe verzeichnis wie die index.html

    HTML-Code:
    body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}
     
    #header {background:#a31e39;}
     
    #outer1 {float:left; width:180px; padding:10px; background:#e0d0d0;}
    #outer3 {float:right; width:180px; padding:10px; background:#b0b0b0;}
    #outer2 {background:#e0e0e0; margin:10px 210px;}
     
    #outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}
     
    #wrapper {overflow:hidden; background:#e0e0e0;}
     
     
    #footer {clear:both; background:#455c5a;}
     
    .content {padding:10px;}
    h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
    h3 {font-size:18px; margin:0; padding:8px 0;}
    p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
    #footer p,
    #header p {color:#fff;}
    #footer a {color:#fff;}
    #footer a:hover {text-decoration:none;}
    Auf obiger Seite gibt es verschiedene Modelle, allerdings sollte man den Doctype immer um einen aktuelleren ersetzten(wie ich in obigem Code)
    Ist zwar keine Pflicht aber es ist für zukünftigere Webseiten durchaus von Vorteil.

    Viel Glück

    Texasmutscha


    P.s Bitte den Beitrag noch zu vorigem hinzufügen, ist mir selber nicht möglich
    Mein Pc:
    Intel Core i5 i5-750 / 4x2.66 GHz
    Socket 1156 4-Core
    4096 MB/ 1333Mhz RAM DDR3
    NVIDIA GeForce 275GTX 1792MB GDDR RAM
    1TB GB SATA 7,200 U/Min

  10. #10
    Großmeister(in)
    Themenstarter
    Avatar von R3WARD
    Registriert seit
    08.02.2008
    Ort
    localhost
    Beiträge
    597
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle vs CSS

    Zitat Zitat von sejuma Beitrag anzeigen
    Du hast in deinem Tabellencode drei Zellen nebeneinander:
    Zei mit fixen Breiten von 100px und 80px und mittendrin eine ohne Breitenangabe.
    Genauso funktioniert das mit drei nebeneinander angeordneten Divs auch.
    Lese bitte erst mal meinen 2. Beitrag in diesem Thema.

    @Texasmutscha

    Funktioniert zwar erstmal grundsätzlich wenn man solche Einstellungen setzen muss dann kann man auch gleich bei Tabellen bleiben

    Code:
    #outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}
    So eine Angabe ist für mich in keinster Weise akzeptabel.

    Es kann doch nicht sein das es in CSS keine schöne Lösung gibt

Ähnliche Themen

  1. MySQL Werte von Tabelle a in Tabelle b eintragen.
    Von Barret im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 08.02.2007, 11:42
  2. Tabelle
    Von Alienuser im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 01.07.2006, 12:39
  3. Tabelle in Tabelle ausrichten
    Von Mad_Dog im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.04.2006, 15:54
  4. tabelle
    Von Nickel im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.07.2005, 01:03
  5. Wie bekomme ich eine tabelle in eine tabelle?
    Von SonicChriz im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 25.04.2005, 17:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •