Beispiel:Display-table.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>Tabellenlayout mit display: table</title> <style> .table { display: table; border: thin solid steelblue; padding: 5px; } .tr { display: table-row; } .td,.th { display: table-cell; border: thin solid #c82f04; padding: 5px; } .th { font-weight: bold; }
</style> </head> <body>
Tabellenlayout mit display: table
Name
Ort
Beruf
Anna
Nürnberg
Lehrerin
Benjamin mit einem längeren Namen
Augsburg
Fachinformatiker für Anwendungsentwicklung
(Sehr langer Beruf
mit Zeilenumbruch)
Die table-Werte verwenden den Layoutalgorithmus von HTML-Tabellen. Spaltenbreiten und Zeilenhöhen werden deshalb ähnlich wie bei einer echten Tabelle berechnet.
Heute erreicht man das mit Flexbox oder Grid.
</body> </html>
