Creating and styling a HTML table: how it works

In HMTL, tables are created using several commands. The basic framework consists of the commands that open and close the table. In between, the table rows and table cells are inserted using their own commands. The table can then be styled using CSS.

How to add a table to your website

To create a table in HTML, you first need three commands to create the table, table rows, and table cells. These elements are nested inside each other and will be output as a plain table afterwards. To change the appearance of the table, use CSS commands.

The basic framework

1. Open the table with the command <table>.
2. Insert the first table row with the command <tr>.
3. Insert a table cell and write the content between the opening and closing tag: <td>content</td>.
4. Fügen Sie beliebig viele Tabellenzellen ein.
5. Schließen Sie die Tabellenzeile mit </tr>.
6. Fügen Sie weitere Reihen und Zellen hinzu.
7. Schließen Sie die Tabelle mit </table>.

CSS-Befehle zum Stylen der Tabelle

1. Größe der Tabelle: Über die Befehle „width“ und „heigh“” bestimmen Sie, wie viel Platz die Tabelle auf Ihrer Website einnimmt. Geben Sie die Maße in Pixel oder Prozent an.
2. Position des Textes: Mit „text-align“ bestimmen Sie, wo der Text in den Tabellenzellen steht. Die Attribute lauten „center“, „left“ und „right“.
3. Tabellen-Linien: Über „border“ können Sie der Tabelle Linien geben. Schreiben Sie zum Beispiel „border: 1px solid black“ für eine Tabelle mit schlichten schwarzen Linien.