MrMurphy: Text wie in Word bei "TABS" darstellen

Beitrag lesen

SELF-Forum

Text wie in Word bei "TABS" darstellen

MrMurphy
– Informationen zu den Bewertungsregeln

Hallo,

eine direkte Tabulator-Funktion gibt es unter html / css nicht. Um Text trotzdem strukturiert und barriefrei (bzw. darauf vorbereitet) darzustellen sehe ich zur Zeit drei Möglichkeiten:

a) eine Tabelle

b) der PRE-Tag (<pre>)
Innerhalb des PRE-Tags werden alle Buchstaben und Leerzeichen mit dem gleichen Abstand dargestellt und mehrfache Leerzeichen auch als solche übernommen. Infos dazu auf:

http://de.selfhtml.org/html/text/praeformatiert.htm@title=http://de.selfhtml.org/html/text/praeformatiert.htm

c) mittels formatierter Span-Tags, beschrieben z.B. auf

http://www.existenznachweis.de/css/257/tabulator

Um das deutlicher darzustellen habe den Text mal auf drei Zeilen mit vier Spalten erweitert:

<span style="width:50px;display:block;float:left;">  
Herr</span><span style="width:80px;display:block;float:left;">  
Meier</span><span style="width:50px;display:block;float:left;">  
Tel.</span>0123/45678<br />  
  
<span style="width:50px;display:block;float:left;">  
Frau</span><span style="width:80px;display:block;float:left;">  
Welke</span><span style="width:50px;display:block;float:left;">  
Tel.</span>0123/45677<br />  
  
<span style="width:50px;display:block;float:left;">  
Herr</span><span style="width:80px;display:block;float:left;">  
Schmidt</span><span style="width:50px;display:block;float:left;">  
Tel.</span>0123/45678<br />

Deutlich übersichtlicher wird es natürlich, wenn die Formatierung mittels CSS ausgelagert wird, außerdem kann die Spaltenbreite dann zentraler definiert werden. Damit das Beispiel einfach kopiert werden kann habe ich den Quelltext für eine komplette Seite erstellt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
span{  
	display: block;  
	float: left;  
}  
#anrede{  
	width: 60px;  
}  
#name{  
	width: 150px;  
}  
#telefon{  
	width: 50px;  
}  
</style>  
</head>  
<body>  
<span id="anrede">Herr</span>  
<span id="name">Meier</span>  
<span id="telefon">Tel.</span>  
0123789/333-67<br />  
  
<span id="anrede">Frau</span>  
<span id="name">Welke</span>  
<span id="telefon">Tel.</span>  
0123789/333-68<br />  
  
<span id="anrede">Herr</span>  
<span id="name">Schmidt</span>  
<span id="telefon">Tel.</span>  
0123789/333-69<br />  
</body>  
</html>

Die Spalten können natürlich noch weiter formatiert werden, z. B. durch Hintergrundfarben.

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln