Spalten einer Tabelle dynamisch ändern

Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können. Wie das geht wird hier an einem Beispiel demonstriert, die Daten der Tabelle kommen hierbei aus einer MySQL-Datenbank.

Demo:

Die Spalten der Tabelle haben immer die gleiche Breite, außer ein Wort ist breiter als eine Spalte dann wird die Spalte entsprechend verbreitert.

Wie immer an dieser Stelle folgt der Quelltext:

Quelltext  Kopieren ❘ Ausblenden ❘ Zeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Dynamische Spalten in einer Tabelle</title>

  <style>
  body, table {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: 0.85rem;
  }

  td {
   vertical-align: top;
  }
  </style>

 </head>
<body>

<?php
// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

// Datensätze auslesen
$select = $db->query("SELECT `name`, `text` FROM `tabelle`");
$datensaetze = $select->fetchAll(PDO::FETCH_OBJ);
$anzahlDatensaetze = count($datensaetze);

// Anzahl der Spalten
$maxSpalten = 8;
$spalten = isset($_POST["spalten"]) ? $_POST["spalten"] : 1; // 1 = Vorauswahl
$spalten = $spalten > $maxSpalten || $spalten < 1 ? 1 : $spalten;

// Breite der Spalten
$spaltenBreite = floor(100 / $spalten);

// Formular
echo '<form method="post">
<p><label>Spalten: ' . $spalten . ' 
 <select name="spalten" size="1" onChange="this.form.submit()">
  <option></option>';

for ($i = 1; $i <= $maxSpalten; $i++) {
 echo '<option>' . $i . '</option>';
}

echo ' </select>
 </label></p>
</form>

<table border><tr>
';

// Ausgabe der Datensätze
foreach ($datensaetze as $nr => $datensatz) {
 echo '<td style="width:' . $spaltenBreite . '%">' .
  '<b>' . $datensatz->name . ':</b><br>' . $datensatz->text . '</td>';

 // Berechnen wann eine neue Tabellenzeile beginnt
 if (in_array($nr, range($spalten - 1, $anzahlDatensaetze, $spalten))) 
  echo '</tr><tr>';
}

echo '</tr></table>';
?>

</body>
</html>

Tipps

.htaccess - Passwortschutz für Webseiten
Mit einer .htaccess Datei und einer .htpasswd Passwort-Datei lassen sich bestimmte Verzeichnisse und die darin enthaltenen Dateien vor unerlaubtem Zugriff schützen.
Mit JSON Daten zwischen JavaScript und PHP austauschen
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
Zeichenkodierung - Schriftzeichen richtig darstellen
Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.
Diese Schlagwörter könnten Sie interessieren:
Quelltext Mimetypen Zeichenkodierung Suchmaschine Marquee Sicherheit Lokaler Webserver SQLite Datenschutz-Hinweis Sprachumschaltung Zoom-Funktion Textgestaltung Rahmen Floodsperre Responsiv Berechnungen Key Codes Zeitfunktionen Zeitansage Seitenformatierung