HTML-Tabellen sind ein wichtiger Bestandteil jeder Website, da sie es ermöglichen, Daten in einer übersichtlichen und strukturierten Form darzustellen. In diesem Blogpost möchten wir dir zeigen, wie du selbst eine HTML-Tabelle erstellen, formatieren, sortieren, exportieren und bearbeiten kannst.
Inhaltsverzeichnis
Erstellen einer HTML-Tabelle
Erstellen einer HTML-Tabelle ist ganz einfach. Du benötigst lediglich die HTML-Tabellenelemente <table>, <tr>, <th> und <td>. Das <table>-Element definiert die Tabelle, <tr> definiert eine Tabellenzeile, <th> definiert eine Tabellenüberschrift und <td> definiert eine Tabellenzelle.
Hier ist ein Beispiel für eine einfache HTML-Tabelle:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Formatieren einer HTML-Tabelle
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
Sortieren einer HTML-Tabelle
Um deine HTML-Tabelle sortieren zu können, kannst du JavaScript verwenden. Es gibt viele kostenlose Bibliotheken wie z.B. sorttable.js, die dir das Sortieren deiner Tabelle erleichtern. Du kannst damit die Spaltenköpfe anklicken, um die Tabelle nach dieser Spalte zu sortieren. Hier ist ein Beispiel, wie du sorttable.js in deine Website einbinden kannst:
<script src="sorttable.js"></script>
<table class="sortable">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Exportieren einer HTML-Tabelle
Es kann manchmal nützlich sein, deine HTML-Tabelle in ein anderes Format wie z.B. Excel, PDF oder CSV exportieren zu können. Hierfür gibt es verschiedene Tools und Bibliotheken, die du verwenden kannst. Ein Beispiel ist die JavaScript-Bibliothek js-xlsx. Mit dieser kannst du deine Tabelle in ein Excel-Arbeitsblatt exportieren.
Hier ist ein Beispiel für den Export deiner Tabelle in eine Excel-Datei:
var table = document.getElementById("myTable");
var wb = XLSX.utils.table_to_book(table);
var wbout = XLSX.write(wb, {bookType:'xlsx', bookSST:true, type: 'binary'});
var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
saveAs(blob, "table.xlsx");
Responsive HTML-Tabellen
Es ist wichtig, dass deine HTML-Tabelle auf allen Geräten gut aussieht. Eine Möglichkeit hierfür ist das Verwenden von CSS-Medienabfragen. Mit diesen kannst du bestimmte Regeln nur dann anwenden, wenn die Bildschirmbreite einen bestimmten Wert hat.
Hier ist ein Beispiel für eine Regel, die die Schriftgröße der Tabellenzellen auf kleineren Geräten verkleinert:
@media (max-width: 600px) {
td {
font-size: 12px;
}
}
Bearbeiten einer HTML-Tabelle mit JavaScript
Du kannst JavaScript verwenden, um deine HTML-Tabelle zu bearbeiten und zusätzliche Funktionen hinzuzufügen. Du kannst unter anderem Daten hinzufügen, löschen und aktualisieren.
Hier ist ein Beispiel für eine Funktion, die eine neue Zeile in deine Tabelle hinzufügt:
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "New Row, Cell 1";
cell2.innerHTML = "New Row, Cell 2";
}
Erstellen einer HTML-Tabelle mit Bootstrap
Bootstrap ist ein populäres Framework für die Erstellung von responsiven Websites und es bietet auch eine Reihe von Komponenten für die Erstellung von Tabellen. Mit Bootstrap kannst du deine Tabelle schnell und einfach formatieren und responsiv machen, indem du bestimmte Klassen verwendest.
Hier ist ein Beispiel für eine Tabelle, die mit Bootstrap erstellt wurde:
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
</table>
Fazit
In diesem Blogpost haben wir dir gezeigt, wie du eine HTML-Tabelle erstellen, formatieren, sortieren, exportieren und bearbeiten kannst. Wir haben dir auch gezeigt, wie du deine Tabelle responsiv machen kannst und wie du Bootstrap verwenden kannst, um sie schnell und einfach zu formatieren. Wenn du noch weitere Fragen hast, zögere bitte nicht, uns zu kontaktieren
1 Gedanke zu „So erstellt man professionelle HTML-Tabellen (inkl. Code)“