HTML -Tabelle Colgroup
Das <colgroup>
Element wird verwendet, um bestimmte Spalten einer Tabelle zu formatieren.
HTML-Tabelle Colgroup
Wenn Sie die beiden ersten Spalten einer Tabelle formatieren möchten, verwenden Sie die
Elemente
<colgroup>
und .<col>
MO | DI | HEIRATEN | SAMMELN | FR | SA | SONNE |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
fünfzehn | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
Das <colgroup>
Element soll als Container für die Spaltenspezifikationen verwendet werden.
Jede Gruppe wird mit einem <col>
Element angegeben.
Das span
Attribut gibt an, wie viele Spalten den Stil erhalten.
Das style
Attribut gibt den Stil an, der den Spalten gegeben werden soll.
Hinweis: Es gibt eine sehr begrenzte Auswahl an legalen CSS-Eigenschaften für colgroups .
Beispiel
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Hinweis: Das <colgroup>
Tag muss einem <table>
Element untergeordnet sein und sollte vor allen anderen Tabellenelementen wie <thead>
,
<tr>
, <td>
usw. platziert werden, aber nach dem <caption>
Element, falls vorhanden.
Rechtliche CSS-Eigenschaften
Es gibt nur eine sehr begrenzte Auswahl an CSS-Eigenschaften, die in der colgroup verwendet werden dürfen:
width
Eigenschaft
visibility
Eigenschaft
background
Eigenschaften
border
Eigenschaften
Alle anderen CSS-Eigenschaften haben keine Auswirkungen auf Ihre Tabellen.
Mehrere Col-Elemente
Wenn Sie mehr Spalten mit unterschiedlichen Stilen gestalten möchten, verwenden Sie mehr
<col>
Elemente innerhalb von
<colgroup>
:
Beispiel
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
<col span="3"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Leere Colgroups
Wenn Sie Spalten in der Mitte einer Tabelle formatieren möchten, fügen Sie ein "leeres"
<col>
Element (ohne Stile) für die Spalten davor ein:
Beispiel
<table>
<colgroup>
<col span="3">
<col
span="2"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Spalten ausblenden
Sie können Spalten mit der visibility: collapse
Eigenschaft ausblenden:
Beispiel
<table>
<colgroup>
<col span="2">
<col span="3"
style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...