Tabellenlayout
envoy
Tabellenlayout
envoy
Matthias Scharwies
Rolf B
Gunnar BittersmannHallo, ich würde gerne dieses Tabellenlayout umsetzen, siehe table_layout.jpg. Ich habe den Tabellenbereichen über Klassen unterschiedliche Größen zugewiesen. Leider funktioniert es nicht, wenn die Spaltenbreiten unterschiedlich sind. Wie kann ich den Spalten unterschiedliche Breiten zuweisen?
Vielen Dank und viele Grüße
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>New page</title> <link href="css/style.css" rel="stylesheet"> <style> table, th, td {border: 1px solid black;border-collapse: collapse;} .number {width: 100px;} .headline {width: 400px;} .info {width: 100px;} .date {width: 250px;} .text {width: 250px;} </style> </head> <body> <table> <tr> <td rowspan="3"> <img src="images/01.jpg"/> </td> <td> <p class="number">01</p> </td> <td> <p class="headline">Headline</p> </td> </tr> <tr> <td> <p class="info">Info</p> </td> <td> <p class="date">Date</p> </td> </tr> <tr> <td colspan="2" class="text"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </td> </tr> </table> </body> </html>-
-
Herzlich willkommen,
ich hoffe fast, dass du ein Troll bist.
Tabellenlayout ist wirklich Stand der 90er.
Information: Tabellenlayout Das Verwenden von Tabellen zu Layoutzwecken birgt viele Nachteile:
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.
-
-
-
Hallo envoy,
Deine Idee mit unterschiedlich breiten Spalten in Zeile 1 und 2 verlangt zur Umsetzung eine weitere Spalte. Das Bild ist in Spalte 1, Number ist Spalte 2, Headline ist Spalte 3+4. Info ist Spalte 2+3 und Date Spalte 4. Text ist Spalte 2+3+4.
Um einer Tabellenspalte eine Breite zu geben, verwendet man entweder das col-Element und weist per CSS Breiten zu (verwende dafür den nth-of-type Selektor) oder gibt den td-Elementen der ersten Zeile passende width-Angaben. Für dein Ansinnen mit jeder Menge Spaltenüberlappungen ist die col-Lösung besser.
Aber bitte: verwende nicht <table>. Wie Matthias schrieb: Das ist das Gestaltungsmodell der Urzeit. Beschäftige Dich mit dem Grid-Layoutmodell, es ist für die Seitengestaltung deutlich besser geeignet. Es sei denn, du musst Uralt-Browser oder HTML Mail unterstützen. Da kommt man manchmal am Table-Layout nicht vorbei.
Das Problem von <table> beginnt, wenn deine Seite nicht auf einem Desktop landet, sondern auf einem Handy. Oder jemand das Browserfenster klein macht. Dann muss sich das Layout anpassen, es muss responsiv sein. Mit <table> geht das ganz schlecht. Mit Grid hingegen ist das durch geschicktes CSS einfach lösbar: Verwende @media-Abfragen für die Fensterbreite und platziere deine Anzeigebereiche mittels benannter Grid-Bereiche passend neu. Steht alles im verlinkten Grid-Bereich unseres Wikis.
Rolf
--
sumpsi - posui - obstruxi-
Hallo,
danke für die Hilfe bei der Tabelle.
Die Frage war tatsächlich erst gemeint. Ich hätte aber noch etwas dazu schreiben sollen. Ist eine Änderung an einem bestehenden html-file, was schnell gehen muss und eine table beinhaltet, die ich erstmal anpassen möchte.
Ich habe mir das Grid-Layoutmodell schon einmal angeschaut, das würde ich gern im 2. Schritt verwenden und das ganze darauf umbauen.
Viele Grüße Jens
-
IMHO:
Ein einfach erscheinendes(!) Kriterium: ist es eine Tabelle mit entsrpechend angeordneten, zusammen gehörenden, Daten, die dargestellt werden sollen? Oder geht es eigentlich nur darum diese rechteckigen Bereiche anzuordnen. Und die Daten darin gehören nicht mehr zusammen als daß sie eben auf dieser Seite erscheinen sollen.
Wenn’s nur um das Aussehen geht: weg mit <table>. Wenn das Aussehen sich aber daraus ergibt, daß die Inhalte in den Zellen „mathematisch“ zusammen gehörenden Daten sind, welche „karthesisch angeordnet“ leichter den Weg in die Köpfe finden: behalten! (Wobei: Dinge wie
display: table-cell;bereiten mir durchaus ergebnislose Gedankenläufe;displayist immerhin ja – auch – für ein „ist nicht drin, sieht aber so aus“ gut …)Und: die Frage scheint einfach zu sein, kann sich im Detail aber schnell als irgend einer der Köpfe dieser Hydra herausstellen.
-
Ich habe noch ein Detail oldschool-Frage zu meiner tabelle. Wie kann ich dem Text in der untersten Zeile zu weisen, dass er bündig mit der Unterkante des Fotos positioniert ist? Wenn ich im <tr valign="bottom"> angebe, bleibt trotzdem noch ein kleiner Abstand
Viele Grüße
-
Hallo envoy,
Text wird auf eine Grundlinie (Baseline) gesetzt. Diese ist von der Unterkante des Rahmens, in dem sich der Text befindet, etwas entfernt, damit Platz für Unterlängen und Akzentzeichen unter dem Text ist (z.B. das cedille im Französischen). Wieviel das ist, hängt vom Font ab. Hier ist eine Illustration im Wiki.
Bilder sind standardmäßig Inline-Elemente und werden auf die Baseline gesetzt, deswegen ist unter einem Bild auch immer etwas Platz. Es sei denn, du gibst ihm per CSS display:block.
Um konkreter zu werden, müsste man deine Seite online sehen. Denn so richtig habe ich das Problem noch nicht verstanden, glaube ich.
Rolf
--
sumpsi - posui - obstruxi
-
-
@@envoy
Ist eine Änderung an einem bestehenden html-file, was schnell gehen muss und eine table beinhaltet, die ich erstmal anpassen möchte.
Ich habe mir das Grid-Layoutmodell schon einmal angeschaut, das würde ich gern im 2. Schritt verwenden und das ganze darauf umbauen.
Dann setze bitte im 1. Schritt das
role-Attribut für dastable-Element, das keine Tabelle repräsentiert:<table role="presentation">damit bspw. Screenreader den Inhalt nicht als tabellarische Daten vorlesen.
Kwakoni Yiquan
--
Ad astra per aspera
-
-
