| (Kommentare: 0)

Webdesign Lohmann | modern webdesign - Mehr Übersicht in HTML-Tabellen

TABLECLOTH ist leicht, einfach zu bedienen und eine unaufdringliche Art HTML-Tabellen mit etwas CSS und Javascript übersichtlicher zu gestalten. Durch einfaches Hinzufügen von zwei Zeilen Code in Ihre HTML-Seite werden Tabellen aktiv gestaltet. Ihre Besucher werden Ihnen bei großen Tabellenübersichten dankbar sein.

Übersicht

Tabellen werden oft missbraucht als Nicht-Standardgemäße Webseiten-Layouts und haben sich zu einem Gegenstand der Auseinandersetzungen zwischen Tabellenlayout-Codierer und CSS-Layouter entwickelt. Tabellen haben in HTML eine große Bedeutung in ihrer primären Rolle als Darstellung tabellarischer Daten. TABLECLOTH ist für die ordnungsgemäße Verwendung von Tabellen gedacht.

Funktionen

TABLECLOTH durchsucht Ihren HTML-Quellcode auf Tabelle Elementen. Es besteht keine Notwendigkeit Klassen-Namen oder ID's zu verwenden. TABLECLOTH fügt diese automatisch hinzu. Es können aber auch eigenen Klassennamen ohne Probleme verwendet werden.

TABLECLOTH verfügt über:

  • Hinzufügen von even/odd Klassennamen zu alternativen Reihen.
  • Hinzufügen over and out-Klassen-Namen für mouseover und mouseout Verhalten.
  • Markieren von Zeilen oder Spalten oder beides.
  • Markieren des ausgewählten Bereiches durch Mausklick. Basierend auf Präferenzen wählt TABLECLOTH die Zeilen oder Spalten oder beides aus und markiert diese. Aufheben der markierten Elemente durch Mausklick irgendwo auf der Seite.
  • Upgrade möglich durch einfache editierbare Funktionen.

Einbinden von CSS und JavaScript im <head>

<link href="css/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/tablecloth.js"></script>

Einbinden der CSS-Klasse in die Tabelle

<table class="tablecloth">
   <tr>      
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
   </tr>
   <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
   </tr>			
   <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
   </tr>			
   <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
   </tr>			
   <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
   </tr>			
</table>

Das wars, TABLECLOTH ist voll einsatzbereit.


Einen Kommentar schreiben

Bitte rechnen Sie 1 plus 5.

Zurück