|
テーブルの内側罫線の表示方法を変えてみましょう。
<table rules="○"> で セルの間に引かれている罫線の表示方法を指定できます。
まずは 通常のテーブルと見比べで どのように違うのか 確認してみましょう。
これは 通常のテーブルです border は 3 bordercolor は #006600 です。
| mamoho |
おとうさん |
| だいすけ |
おにいちゃん |
| なみ |
いもうと |
指定できる値は つぎのとおりです。
| none |
罫線は表示されません。（デフォルト） |
| groups |
thead tfoot tbody を指定したときの
境界線が消えます。 |
| rows |
横の列の境界のみ表示します。 |
| cols |
縦の行の境界のみ表示します。 |
| all |
すべての境界を表示します。 |
では 実際にどのように表示されるのか見てみましょう。
| mamoho |
おとうさん |
| だいすけ |
おにいちゃん |
| なみ |
いもうと |
|
| mamoho |
おとうさん |
| だいすけ |
おにいちゃん |
| なみ |
いもうと |
|
| mamoho |
おとうさん |
| だいすけ |
おにいちゃん |
| なみ |
いもうと |
|
| <table rules="none"> |
<table rules="rows"> |
<table rules="cols"> |
| mamoho |
おとうさん |
| だいすけ |
おにいちゃん |
| なみ |
いもうと |
|
| mamoho |
おとうさん |
| だいすけ |
おにいちゃん |
| なみ |
いもうと |
|
|
| <table rules="all"> |
<table rules="groups"> |
|
HTMLソースは こんな感じです。
<table rules="none" width="210" border="3" bordercolor="#006600">
<tr>
<td width="80">mamoho</td>
<td>おとうさん</td>
</tr>
<tr>
<td>だいすけ</td>
<td>おにいちゃん</td>
</tr>
<tr>
<td>なみ</td>
<td>いもうと</td>
</tr>
</table> |
<table rules="groups"> では テーブルを ヘッダ フッタ ボディ のように
グループ分けしたときにのみ有効になります。 グループ分けについては後日お話
するとして HTMLソースの様子だけ確認しておいてください。
<table rules="groups" width="210" border="3" bordercolor="#006600">
<thead>
<tr>
<td width="80">mamoho</td>
<td>おとうさん</td>
</tr>
</thead>
<tr>
<td>だいすけ</td>
<td>おにいちゃん</td>
</tr>
<tr>
<td>なみ</td>
<td>いもうと</td>
</tr>
</table> |
|
