Tabellen mit Schatten - Website X5 Hilfe - Die Helpsite

Tabellen sind eine spezielle, strukturierte Form von Listen die mit Daten gefüllt sind. Im Gegensatz zu normalen Listen ermöglichen sie eine differenziertere, mehrdimensionale und übersichtlichere Darstellung mit vielen Informationen pro Eintrag und, falls gewünscht, auch eine Sortierbarkeit der einzelnen Spalten.
Tabellen können mit Bilder, Texten und Grafiken gefüllt werden.
Eine optische Aufwertung erhalten Texte, indem man einen Schatten hinzufügt.

Das benötigte Image laden und auf den Webserver in das Verzeichnis "images" kopieren.

Example:

Demo:

Code für das Objekt oben links:

Code für das Objekt oben rechts:

Code für das Objekt unten:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
table {color: #7c6031; font-size: 12px; font-family: tahoma; background-color: #F9F9F9;}
.txt_left {text-align: left; padding: 10px; border: 1px solid #000000;}
.txt_block {text-align: justify; padding: 10px; border: 1px solid #000000;}
.txt_center {text-align: center; padding: 10px; border: 1px solid #000000;}
</style>

Code für das HTML-Objekt:

[Objekt HTML]

<div align="center" >
<table align="left" style="width:560px;">
<td class="txt_left">
<b>Ausrichtung: Tabelle links, Text links</b></td>
</tr>  
<tr>
<td class="txt_left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et        
dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo    
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</td>
</tr>
<tr>
<td><img src="images/shadow3.gif" style="height:13px; width:560px;"></td>
</tr>
</table>

<table><tr><td><br></td></tr></table>

<table align="center" style="width:350px;">
<tr>
<td class="txt_block">
<b>Ausrichtung: Tabelle zentriert, Text als Block</b></td>  
<td>&nbsp;</td>
<td class="txt_center">
<b>Ausrichtung: Tabelle zentriert, Text zentriert</b></td>
</tr>
<tr>   
<td class="txt_block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</td>
<td>&nbsp;</td>
<td class="txt_center">  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
</tr>
<tr>
<td><img src="images/shadow1.gif" style="height:13px; width:350px;"></td>
<td>&nbsp;</td>
<td><img src="images/shadow2.gif" style="height:13px; width:350px;"></td>
</tr>
</table>
  
<table align="right" style="width:560px;">
<tr>
<td rowspan=2">
<img src="images/shadow6.gif" style="height:130px; width:13px;"></td>
<td class="txt_left">
<b>Ausrichtung: Tabelle rechts, Text links</b></td>
</tr>
<tr>
<td class="txt_left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</td>
</tr>
</table>
</div>