WinFuture-Forum.de: Benötige kleine hilfe mit HTML (Phase 5) - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Benötige kleine hilfe mit HTML (Phase 5)


#1 Mitglied ist offline   Levitron 

  • Gruppe: Mitglieder
  • Beiträge: 6
  • Beigetreten: 22. Februar 08
  • Reputation: 0

geschrieben 08. Dezember 2018 - 13:23

Hallo HTML Kenner

Ich benötige etwas nachhilfe in HTML, weil ich langsam am verzwifeln bin.

Was ich habe ist die Grundstruktur (alles mit Phase 5 gemacht). Soweit so gut. Jetzt benötige ich noch 2 sachen die ich nicht so hinbekomme wie ich das haben will.

Ich hab soweit alles in einer Tabelle gepackt, klappt soweit auch. jetzt möchte ich noch bestimmte teile der Tabelle Farbig machen. Also den Hintergrund, nicht die Schriftfarbe.
Zum einfachen Verständnis: ich habe die Tabelle Raster 4*6. In der ersten bis vierten Spalte hab ich eine weitere tabelle 3*1 eingefügt um diese in 3 teile zu haben. Jetzt möchte ich jeder zelle eine farbe zuweisen, weiss aber nicht wie das geht.

 <tr>
  <td><b><table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                                <tr>
                                 <td>1. Zelle</td>
                                 <td>2. Zelle</td>
                                 <td>3. Zelle</td>

                                </tr>
                               </table></b></td</b></td>
  <td><b><table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                                <tr>
                                 <td>1. Zelle</td>
                                 <td>2. Zelle</td>
                                 <td>3. Zelle</td>

                                </tr>
                               </table></b></td</b></td>
  <td><b><table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                                <tr>
                                 <td>1. Zelle</td>
                                 <td>2. Zelle</td>
                                 <td>3. Zelle</td>

                                </tr>
                               </table></b></td</b></td>
  <td><b><table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                                <tr>
                                 <td>1. Zelle</td>
                                 <td>2. Zelle</td>
                                 <td>3. Zelle</td>

                                </tr>
                               </table></b></td</b></td>
 </tr>

Momentan hab ich das so gelöst, was aber nicht so ist wie ich es haben möchte. Es sollte am ende so sein das die Farben für die erste Zelle #FF8000 ist, die zweite #FF8080 und die dritte #808000 ist. also im meine fall
( bgcolor= ) . Nur wie kann ich das einfügen ??

Hoffe das ich einigermaßen verständlich rüberkomme.

Ach so jetzt nicht anfangen mit css oder so, es soll nur die eine html bleiben !

Levitron
0

Anzeige



#2 Mitglied ist offline   RalphS 

  • Gruppe: VIP Mitglieder
  • Beiträge: 8.895
  • Beigetreten: 20. Juli 07
  • Reputation: 1.126
  • Geschlecht:Männlich
  • Wohnort:Zuhause
  • Interessen:Ja

geschrieben 08. Dezember 2018 - 13:45

Per bgcolor= auf dem TD-Tag.

Allerding ist das, wie Du selber sehr richtig erkannt hast, eine sehr schlechte Wahl, und auch wenn Du's nicht hören möchtest, CSS ist die einzig richtige Option.

Nicht mal zum Lernen. Schlechter Stil, veraltetes Format, kurz, so ziemlich exakt wie man es NICHT machen sollte und sich's auch nicht aneignen sollte.


Per CSS hast Du einfach einen STYLE-Block im HEAD, wo sowas wie .red {background-color: red; } drinsteht, und im Code selber dann nur noch TD CLASS="RED" .


Müßig zu erwähnen, daß alles was nicht Tabellendaten sind auch nicht in Tabellen gehört - schon seit 30 Jahren nicht -- und daß inline-Elemente keine Blockinhalte beinhalten dürfen (entsprechend kannst Du nicht einfach "<b><table>...</table></b>") sagen, sondern mußt tatsächlich jedes B dorthin tun, wo es hingehört (<td><b>TEXT</b></td>). Naja, oder eben mit CSS (font-weight: bold;) .
"If you give a man a fish he is hungry again in an hour. If you teach him to catch a fish you do him a good turn."-- Anne Isabella Thackeray Ritchie

Eingefügtes Bild
Eingefügtes Bild
0

#3 Mitglied ist offline   Levitron 

  • Gruppe: Mitglieder
  • Beiträge: 6
  • Beigetreten: 22. Februar 08
  • Reputation: 0

geschrieben 08. Dezember 2018 - 16:33

Naja erstmal danke.

Solange es mit in der html steht und nicht eine extra Datei wird, wär es warscheinlich nicht schhlecht, aber es ging nun auch so.
jetzt ist es zumindest so wie ich es haben will.

Ich muss noch dazu sagen das ich eigentlich Blutiger Anfänger bin, Ich versteh halbwegs den Aufbau.
Hab vor ca 33 Jahren mal Basic gelernt, und bemerkt das diese Sprache so nicht mehr genutzt wird (zumindest wie ich sie gelernt hatte) Aber eine ähnlichkein mit HTML ist ja vorhanden, was den Aufbau angeht.

Aber dennoch Danke für die Hilfe

Levitron
0

#4 Mitglied ist offline   RalphS 

  • Gruppe: VIP Mitglieder
  • Beiträge: 8.895
  • Beigetreten: 20. Juli 07
  • Reputation: 1.126
  • Geschlecht:Männlich
  • Wohnort:Zuhause
  • Interessen:Ja

geschrieben 08. Dezember 2018 - 18:47

Jeder fängt mal an. :) Und ich find's toll, daß Du Dir den Code anschaust und nicht nur wie allgemein üblich alles nur durchmaust und -klickst.

Jetzt weiß ich nicht obs das noch gibt und falls ja, ob es noch was taugt, aber seinerzeit, wo ich damit angefangen hab (Mitte 90er) gab es noch SelfHTML. Das war eine vollständige Referenz für HTML in deutscher Sprache (Referenzen für HTML gibt's genug, aber hauptsächlich englisch).

Wenn Du nicht schon hast, schau dort mal vorbei.
"If you give a man a fish he is hungry again in an hour. If you teach him to catch a fish you do him a good turn."-- Anne Isabella Thackeray Ritchie

Eingefügtes Bild
Eingefügtes Bild
0

#5 Mitglied ist offline   Levitron 

  • Gruppe: Mitglieder
  • Beiträge: 6
  • Beigetreten: 22. Februar 08
  • Reputation: 0

geschrieben 09. Dezember 2018 - 21:16

SelfHTML gibt es noch, werd da mal vorbeischauen. danke für den tip.
Wie sacht man so schön " man lernt nie aus! "
Es gibt immer was neues was man lernen kann und interesse daran besteht, auch wenn ich mit 48 jahren das noch anfangen will.
Anderen meine ja immer man sei zu alt für sowas, aber ich nicht. ich will ja auch noch Englisch lernen.

naja danke nochmal

Levitron
0

#6 Mitglied ist offline   Gispelmob 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.591
  • Beigetreten: 14. August 15
  • Reputation: 392

geschrieben 09. Dezember 2018 - 21:19

selfhtml oder w3schools, kannste beides nutzen, damit müssten dir alle Fragen beantwortet werden.
AMD Ryzen 9 5950X, Asus ROG Strix X570-F Gaming, 32GB Corsair DDR4-3200, Asus Geforce GTX 3060 12GB, Creative Sound Blaster AE-7, 240GB SSD, 500GB SSD, 3x 1TB SSD, Win11 Home, 4x Acer G246HL Bbid, Logitech MX518 Gaming Mouse, Logitech G440 Mousepad, Logitech K120 Keyboard, Razer Tiamat 7.1 V2 Headset, Creative Inspire 5.1 5300 Soundsystem
0

#7 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.111
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

geschrieben 10. Dezember 2018 - 14:28

Da sind irgendwie auch ein paar </td zuviel, die aber nicht wirken, weil das > fehlt. Ich habe das mal weitestgehend korrigiert, um ein <table>…</table> ergänzt und dazu eine DIV-Version gemacht.

Dazu whabe ich einfach nur Folgendes ersetzt

<table>…</table> durch <div class="table">…</div>
<tr>…</tr> durch <div class="tr">…</div>
<td>…</td> durch <div class="td">…</div>

Dazu ist per CSS definiert:

.table { display:table; }
.tr { display:table-row; }
.td { display:table-cell; }

Weil es ja kein CSS per Extra-Datei sein soll, steht das ganze im head-Bereich der eigentlichen html-Datei. Wie RalphS das oben ja schon erwähnte.

Auf die gleiche Weise sind die Eigenschaften den DIVs zugeordnet, also in der Hauptsache ja die Hintergrundfarben. Die müssen dann einfach nur im Teil class="…" eingereiht werden. Ich habe zum besseren Erkennen die Eigenschaften soweit einzeln definiert. Kommen immer dieselben Eigenschaften in mehreren DIVs mehrfach vor, kann man die auch zusammenfassen, so wie ich das border-spacing schon bei .table in den CSS-Teil geschrieben habe und wenn man es ganz richtig machen will, sollte man sich auch nochmal angucken, wie die Eigenschaften weiter vererbt werden.

Das kann man sicherlich auch noch schöner schreiben, aber ich habe versucht, dass möglichst vergleichbar darzustellen und die 1 Pixel-Spalte (.spalt) habe ich nur eingefügt, damit die Tabellen gleich aussehen.

Edit: Und die weiße Schrift habe ich auch nur so gemacht, weil das Feld so duster war.

<!DOCTYPE html>
<html>
<head>

<style>
.table { display:table; border-spacing:2px;}
.tr { display:table-row; }
.td { display:table-cell; }
.rand  {border: 1px solid #000000; }
.bg-orange { background-color: #ff8000; }
.bg-rosa { background-color: #ff8080; }
.bg-oliv { background-color: #808000 ; }
.schrift-weiss { color: #ffffff; }
.fett { font-weight:bold; }
.spalt { margin:1px;}
</style>

</head>

<body>

<p>Tabelle mit DIVs</p>

<div class="table">
    <div class="tr">
        <div class="td">
        
            <div class="table spalt rand bg-orange">
                <div class="tr">
                    <div class="td rand fett">1. Zelle</div>
                    <div class="td rand fett">2. Zelle</div>
                    <div class="td rand fett">3. Zelle</div>
                </div>
            </div>
            
        </div>
        
        <div class="td">
        
            <div class="table spalt rand bg-rosa">
                <div class="tr">
                    <div class="td rand fett">1. Zelle</div>
                    <div class="td rand fett">2. Zelle</div>
                    <div class="td rand fett">3. Zelle</div>
                </div>
            </div>
            
        </div>

        <div class="td">
        
            <div class="table spalt rand bg-oliv">
                <div class="tr">
                    <div class="td rand schrift-weiss fett">1. Zelle</div>
                    <div class="td rand schrift-weiss fett">2. Zelle</div>
                    <div class="td rand schrift-weiss fett">3. Zelle</div>
                </div>
            </div>
            
        </div>

        <div class="td">
        
            <div class="table spalt rand">
                <div class="tr">
                    <div class="td bg-orange rand fett">1. Zelle</div>
                    <div class="td bg-rosa rand fett">2. Zelle</div>
                    <div class="td bg-oliv rand schrift-weiss fett">3. Zelle</div>
                </div>
            </div>
            
        </div>        
    </div>
</div>





<!-- Alte Tabelle -->

<p>Alte Tabelle mit table</p>

<table>
    <tr>
        <td>
        
            <table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                <tr>
                    <td><b>1. Zelle</b></td>
                    <td><b>2. Zelle</b></td>
                    <td><b>3. Zelle</b></td>
                </tr>
            </table>
            
        </td>
        
        <td>
        
            <table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                <tr>
                    <td><b>1. Zelle</b></td>
                    <td><b>2. Zelle</b></td>
                    <td><b>3. Zelle</b></td>
                </tr>
            </table>
            
        </td>
        
        <td>
        
            <table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                <tr>
                    <td><b>1. Zelle</b></td>
                    <td><b>2. Zelle</b></td>
                    <td><b>3. Zelle</b></td>
                </tr>
            </table>
            
        </td>
    
        <td>
        
            <table width="100%" border="1" bgcolor="#FF8000" cellpadding="0" cellspacing="2">
                <tr>
                    <td><b>1. Zelle</b></td>
                    <td><b>2. Zelle</b></td>
                    <td><b>3. Zelle</b></td>
                </tr>
            </table>
            
        </td>        
    </tr>
</table>


</body>
</html>



Dieser Beitrag wurde von Holger_N bearbeitet: 10. Dezember 2018 - 14:32

Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0