HTML テーブル コルグループ
の<colgroup>要素は、テーブルの特定の列のスタイルを設定するために使用されます。
HTML テーブル コルグループ
表の最初の 2 列のスタイルを設定する場合は、<colgroup>と<col>要素。
| 月 | 火 | 結婚した | 木曜日 | 金 | 土 | 太陽 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
の<colgroup>要素は、列指定のコンテナーとして使用する必要があります。
各グループは<col>エレメント。
のspan属性は、スタイルを取得する列の数を指定します。
のstyle属性は、列に与えるスタイルを指定します。
例
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
ノート：の<colgroup>タグは の子でなければなりません<table>要素であり、他のテーブル要素の前に配置する必要があります。<thead>、<tr>、<td>などですが、その後<caption>要素 (存在する場合)。
[正当な CSS プロパティ]()
colgroup で使用できる CSS プロパティは非常に限られています。
width財産visibility財産backgroundプロパティborderプロパティ
他のすべての CSS プロパティは、テーブルには影響しません。
複数の列要素
異なるスタイルでより多くの列をスタイルしたい場合は、 more を使用してください<col>内部の要素<colgroup>:
例
<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>
...
空のコルグループ
表の途中で列のスタイルを設定する場合は、「空」を挿入します<col>前の列の要素 (スタイルなし):
例
<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>
...
列を非表示
で列を非表示にできますvisibility: collapse財産：
例
<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>
...
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。