Tabelle für ein Layout HTML
Mit der folgenden Tabelle erstellen wir ein HTML-Grundgerüst mit 3 Zeilen und 2 Spalten. Im Kopf-und Fußzeile Bereich fügen wir das colspan-Attribut hinzu um die ganze Weite nutzen zu können(2 Spalten).
Nachteile eines Layout mit einer Tabelle
Layouts mit einer Tabelle ist "old school" und wird heute nicht mehr verwendet. Tabellengestützte Layouts haben sehr viele Nachteile, welche in der nachfolgenden Liste aufgeliste sind:
| 1. | Aufgeblähter Quellcode ... |
| 2. | Längere Ladezeiten und Traffic ... |
| 3. | Tabellen: Barrieren für behinderte Menschen ... |
| 4. | Nicht zukunftssicher ... |
| 5. | Zweckentfremdung ... |
Aufbau eines Layout mit einer Tabelle
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| </head> |
| <body> |
| <h3 style="color: orange; margin-bottom: 2rem; text-align: center;">Ein Layout mit einer Tabelle</h3> |
| <table width = "100%" border = "0"> |
| <tr> |
| <td colspan = "2" bgcolor = "black"; style="color: white"> |
| <h3>Das ist der Header</h3> |
| </td> |
| </tr> |
| <tr valign = "top"> |
| <td bgcolor = "dodgerblue" width = "30"> |
| <b>Navi</b><br> |
| HTML<br> |
| CSS<br> |
| </td> |
| <td bgcolor = "grey" width = "100" height = "200"> |
| Hier steht der Inhalt |
| </td> |
| </tr> |
| <tr> |
| <td colspan = "2" bgcolor = "black" style="color: white"> |
| Copyright © strassencoder.ch |
| </td> |
| </tr> |
| </table> |
| </body> |
| </html> |
Ein Layout mit einer Tabelle
