CSS -Tabellen
Das Aussehen einer HTML-Tabelle kann mit CSS stark verbessert werden:
| Begleitung | Kontakt | Land |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Deutschland |
| Berglunds Supermarkt | Christina Berglund | Schweden |
| Einkaufszentrum Montezuma | Francisco Chang | Mexiko |
| Ernst Handel | Roland Mendel | Österreich |
| Inselhandel | Helen Bennett | Vereinigtes Königreich |
| Königlich Essen | Philipp Kramer | Deutschland |
| Weinkeller des lachenden Bacchus | Yoshi Tannamuri | Kanada |
| Gesammelte Lebensmittellager | Giovanni Rovelli | Italien |
Tischränder
Um Tabellenrahmen in CSS anzugeben, verwenden Sie die borderEigenschaft.
Das folgende Beispiel gibt einen schwarzen Rahmen für die Elemente <table>, <th> und <td> an:
Beispiel
table, th, td {
border: 1px solid black;
}
Tisch in voller Breite
Die obige Tabelle mag in einigen Fällen klein erscheinen. Wenn Sie eine Tabelle benötigen, die sich über den gesamten Bildschirm (volle Breite) erstrecken soll, fügen Sie width: 100%dem Element <table> hinzu:
Beispiel
table {
width: 100%;
}
Doppelte Grenzen
Beachten Sie, dass die Tabelle in den obigen Beispielen doppelte Rahmen hat. Dies liegt daran, dass sowohl die Tabelle als auch die Elemente <th> und <td> separate Rahmen haben.
Sehen Sie sich das folgende Beispiel an, um doppelte Rahmen zu entfernen.
Tabellenrahmen reduzieren
Die border-collapseEigenschaft legt fest, ob die Tabellenrahmen zu einem einzigen Rahmen reduziert werden sollen:
Beispiel
table
{
border-collapse: collapse;
}
Wenn Sie nur einen Rahmen um die Tabelle wünschen, geben Sie die borderEigenschaft nur für <table> an:
Beispiel
table
{
border: 1px solid black;
}