CSS-Tabelle (Tabelle)
Verwenden Sie CSS kann stark das Aussehen von HTML-Tabellen zu verbessern.
| Unternehmen | Kontakt | Land |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Deutschland |
| Berglunds snabbkop | Christina Berglund | Schweden |
| Centro Comercial Moctezuma | Francisco cisco~~POS=HEADCOMP Chang | Mexiko |
| Ernst Handel | Roland Mendel | Österreich |
| Insel Handels | Helen Bennett | Vereinigtes Königreich |
| Koniglich Essen | Philip Cramer | Deutschland |
| Lachen Bacchus Winecellars | Yoshi Tannamuri | Kanada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italien |
| Nord / Süd | Simon Crowther | Vereinigtes Königreich |
| Paris specialites | Marie Bertrand | Frankreich |
| Der große Käse | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Dänemark |
Tabellenrahmen
Gibt die CSS-Tabellenrahmen, die Grenze Eigenschaft verwenden.
Im folgenden Beispiel wird eine Tabelle von Th und TD-Elemente schwarz Grenze:
Beachten Sie, dass im obigen Beispiel, die Tabelle einen doppelten Rahmen hat. Dies liegt daran, die Tabelle und die th / td Elemente getrennte Grenzen haben.
Um einen einzelnen Frame einer Tabelle anzuzeigen, verwenden Sie die border-collapse Eigenschaft.
Klapprahmen
border-collapse-Attribut festgelegt, ob die Tabellenrahmen in einer einzigen Grenze brach zusammen oder getrennt:
Beispiele
{
border-collapse: collapse;
}
Tisch, th, td
{
border: 1px solid black;
}
Versuchen »
Tischbreite und -höhe
Breite und Höhe Attribute definieren die Breite und Höhe des Tisches.
Das folgende Beispiel wird auf 100% Höhe Tischbreite von 50 Pixel-ten Element gesetzt:
Formulartextausrichtung
Tabelle Textausrichtung und vertikale Ausrichtung Eigenschaften.
text-align Eigenschaft ist die horizontale Ausrichtung festgelegt, wie links, rechts oder in der Mitte:
Vertical-align Eigenschaft vertikale Ausrichtung Einstellungen, wie zB oben, unten oder in der Mitte:
Formular ausfüllen
Wenn der Raum zwischen der Grenzkontrolle in dem Inhaltsverzeichnis, sollten Sie die Fill-Attribut td und th-Elemente verwenden:
Farbtabelle
Das folgende Beispiel gibt die Farbe der Grenze, und th Elemente des Text- und Hintergrundfarbe:
Beispiele
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Versuchen »
Weitere Beispiele
Machen Sie eine personalisierte Form
Dieses Beispiel zeigt, wie eine personalisierte Formular zu erstellen.
Stellen Sie die Tabellenbeschriftung Position
Dieses Beispiel zeigt, wie Sie den Tabellenkopf zu positionieren.