Tabellen mit Grafikschatten - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Tabellen mit Grafikschatten

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 Tabellen, indem man einen Schatten hinzufügt.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.../head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.
Eine demo.html ist jeweils beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Im ZIP-Paket sind die bereits hier aufgeführten "Grafikschatten" enthalten:
Download Button
x runter geladen

shadow1_links.gif:


shadow1_rechts.gif:


shadow2_links-unten.gif:


shadow2_rechts-unten.gif:


shadow3_links-oben.gif:


shadow3_rechts-oben.gif:


shadow4_oben.gif:


shadow4_unten.gif:


shadow5_oben-links.gif:


shadow5_oben-links.gif:


shadow6_unten-links.gif:


shadow6_unten-rechts.gif:


Ausrichtung:
Tabelle zentriert, Kopftext Block, Haupttext Block
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, Kopftext Block, Haupttext 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 den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj67_0/style.css">
Code für den <BODY> Bereich (Objekt links)
<div align="center">
<table class="Obj67_w300">
<tr>
<td class="Obj67_block">
<b>Ausrichtung:<br>
Tabelle zentriert, Kopftext Block, Haupttext Block</b>
</td>
</tr>
<tr>
<td class="Obj67_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="wsX5Obj/Obj67_0/shadows/shadow6_unten-rechts.gif" class="Obj67_w300 Obj67_height">
</td>
</tr>
</table>
</div>
Code für den <BODY> Bereich (Objekt rechts)
<div align="left">
<table class="Obj67_w400">
<tr>
<td class="Obj67_center">
<b>Ausrichtung:<br>
Tabelle zentriert, Kopftext Block, Haupttext Links</b>
</td>
</tr>
<tr>
<td class="Obj67_left Obj67_red">
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="wsX5Obj/Obj67_0/shadows/shadow6_unten-links.gif" class="Obj67_w400 Obj67_height">
</td>
</tr>
</table>
</div>

Ausrichtung:
Tabelle links, Kopftext links, Haupttext 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, Kopftext Block, Haupttext Block
  Ausrichtung:
Tabelle, Kopftext und Haupttext 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, Kopftext links, Haupttext 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 den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj67_0/style.css">
Code für den <BODY> Bereich
<div align="center" >
<table align="left" style="width:560px;">
<tr>
<td class="Obj67_left">
<b>Ausrichtung:<br>
Tabelle links, Kopftext links, Haupttext links</b>
</td>
</tr>  
<tr>
<td class="Obj67_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="wsX5Obj/Obj67_0/shadows/shadow6_unten-links.gif" style="width:560px; height:15px;"
</td>
</tr>
</table>
<table>
<tr><br></tr>
</table>
<table style="width:300px;">
<tr>
<td class="Obj67_block">
<b>Ausrichtung:<br>
Tabelle zentriert, Kopftext Block, Haupttext Block</b>  
<td>
&nbsp;
</td>
<td class="Obj67_center">
<b>Ausrichtung:<br>
Tabelle, Kopftext und Haupttext zentriert</b>
</td>
</tr>
<tr>   
<td class="Obj67_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="Obj67_center Obj67_red">  
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="wsX5Obj/Obj67_0/shadows/shadow6_unten-rechts.gif" style="width:300px; height:15px;">
</td>
<td>
&nbsp;
</td>
<td>
<img src="wsX5Obj/Obj67_0/shadows/shadow4_unten.gif" style="width:300px; height:15px;">
</td>
</tr>
</table>
<table align="right" style="width:560px;">
<tr>
<td colspan="2">
<img src="wsX5Obj/Obj67_0/shadows/shadow5_oben-rechts.gif" style="width:560px; height:15px;">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="wsX5Obj/Obj67_0/shadows/shadow1_links.gif" style="width:15px; height:150px;">
</td>
<td class="Obj67_left">
<b>Ausrichtung:<br>
Tabelle rechts, Kopftext links, Haupttext links</b>
</td>
</tr>
<tr>
<td class="Obj67_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>
Code Datei "style.css" (alle Objekte)
.Obj67_left {
font-family: tahoma;
font-size: 12px;
color: #000;
text-align: left;
padding: 10px;
border: 2px solid #8F8F8F;
}
.Obj67_block {
font-family: tahoma;
font-size: 12px;
color: #000;
text-align: justify;
padding: 10px;
border: 2px solid #8F8F8F;
}
.Obj67_center {
font-family: tahoma;
font-size: 12px;
color: #000;
text-align: center;
padding: 10px;
border: 2px solid #8F8F8F;
}
.Obj67_red { color: #f00!important; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt