Tabellen mit Bootstrap

Tabellen können mit Bootstrap erstellt werden, einem beliebten CSS-Framework.

Beispiel einer einfachen Tabelle mit Bootstrap:

Erklärung:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Stadt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Max Mustermann</td>
            <td>30</td>
            <td>Musterstadt</td>
        </tr>
        <tr>
            <td>Anna Schmidt</td>
            <td>25</td>
            <td>Beispielstadt</td>
        </tr>
    </tbody>
</table>

        

Erläuterung:

<table class="table table-bordered table-striped"> - Das <table>-Tag mit Bootstrap-Klassen erstellt die Tabelle.

    <thead> - Das <thead>-Tag definiert den Tabellenkopf.

    <tr> - Das <tr>-Tag definiert eine Tabellenzeile.

    <th> - Das <th>-Tag definiert eine Tabellenüberschrift (Kopfzeile).

<tbody> - Das <tbody>-Tag definiert den Tabellenkörper (Inhalt).

    <td> - Das <td>-Tag definiert eine Zelle in der Tabelle.

        

Responsive Tabelle

Mit Bootstrap kann eine Tabelle so gestaltet werden, dass sie auf verschiedenen Geräten gut aussieht und sich automatisch an die Bildschirmgröße anpasst. Dazu wird der Container

			
                <div class="table-responsive"> 
                    <table class="table"> 
                        <thead> 
                            <tr> 
                                <th>Name</th> 
                                <th>Alter</th> 
                                <th>Stadt</th> 
                            </tr> 
                        </thead> 
                        <tbody> 
                            <tr> 
                                <td>Max Mustermann</td> 
                                <td>30</td> 
                                <td>Berlin</td> 
                            </tr> 
                            <tr> 
                                <td>Lisa Müller</td> 
                                <td>25</td> 
                                <td>München</td> 
                            </tr> 
                            <tr> 
                                <td>John Smith</td> 
                                <td>35</td> 
                                <td>New York</td> 
                            </tr> 
                        </tbody> 
                    </table> 
                </div>
            
			

Vorschau der Tabelle: