<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Vertikale Ausrichtung in Tabellenzellen - Cascading Style Sheets - Workshop Internet-Präsenz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="DE" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Übung Cascading Style Sheets. Vertikale Ausrichtung in Tabellenzellen." /> <meta name="keywords" content="HTML, Cascading Style Sheets" /> <meta name="author" content="Roland Unger" /> <style type="text/css"> <!-- .oben { vertical-align: top; } .mitte { vertical-align: middle; } .unten { vertical-align: bottom; } .grundlinie { vertical-align: baseline; } table { border-collapse: collapse; } td { border: 1px solid #000; padding: 0.5em; height: 5em; } .gross { font-size: 2em; } .klein { font-size: 0.75em; } --> </style> </head> <body> <h1>Vertikale Ausrichtung in Tabellenzellen</h1> <p>Die vertikale Ausrichtung lässt sich in Tabellenzellen besonders gut verdeutlichen.</p> <table summary="Beispiele Textausrichtung"> <tbody> <tr> <td class="unten">Text unten</td> <td class="mitte">Text mittig</td> <td class="oben">Text oben</td> </tr> </tbody> </table> <p>Der Wert baseline sorgt dafür, dass der Text zellübergreifend auf einer gemeinsamen Grundlinie angeordnet wird.</p> <table summary="Beispiele Textausrichtung"> <tbody> <tr> <td class="grundlinie klein">Text klein</td> <td class="grundlinie">Text</td> <td class="grundlinie gross">Text groß</td> </tr> </tbody> </table> </body> </html>