Tabellen mit Schatten - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Tabellen mit Schatten

Scripte > Text- & Tabellenobjekte

Tabellen erstellen, mit Text füllen und mit Schatten aufwerten

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:

 
 

shadow1.gif

 

 

 

shadow2.gif

   
 

shadow3.gif

   
 

shadow4.gif

shadow5.gif

shadow6.gif

 

Images mit Rechtsklick (Bild/Grafik speichern unter...) herunter laden.

 


Demo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Ausrichtung: Tabelle links, Text links
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.

Ausrichtung: Tabelle zentriert, Text als Block   Ausrichtung: Tabelle zentriert, Text zentriert
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
 
Ausrichtung: Tabelle rechts, Text links
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.


Code für das Objekt oben links:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

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

Code für das HTML-Objekt:

[Objekt HTML]

<table align="center" style="width:350px;">
<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>
</tr>
<tr>
<td><img src="images/shadow1.gif" style="height:13px; width:350px;"></td>
</tr>
</table>


Code für das Objekt oben rechts:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

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

Code für das HTML-Objekt:

[Objekt HTML]

<table align="center" style="width:459px;">
<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:459px;"></td>
</tr>
</table>


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>

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 18 Online
 » 136 Heute
 » 872 Woche
 » 5202 Monat
 » 24989 Jahr
 » 271567 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü