Hauptmenü:
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 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 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:
<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> </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> </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> </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>
es gibt insgesamt 0 Kommentar(e)