12月14日(水)3コマ目
今日、やったこと
- 評価用課題作成
- 表
今日のホワイトボード
表をつくる
表をつくるには<table>タグ、<tr>タグ、<td>タグを使います。
- <table>タグは表の始まり、終わり(</table>)を表します。
- <tr>タグは行の始まり、終わり(</td>)を表します。
- <td>タグはセルの始まり、終わり(</td>)を表します。
- <table>タグのborder属性は枠線の幅の指定。省略すると枠線なしです。
|
| 図 <table>、<tr>、<td> |
表の構成要素には行と列があります。ごっちゃになりやすいので注意してください。
<th>タグ
<td>タグと同じようにセルを作るタグですが、以下のように使い分けます。
| タグ | 役割 | 文字の太さ | 文字寄せ |
|---|---|---|---|
| <td>タグ | データ表示用セル | 普通 | 左寄せ |
| <th>タグ | 見出し表示用セル | 太字 | 中央寄せ |
セルの結合
<td>タグ、<th>タグにcolspan属性、rowspan属性を使うとセルの結合ができます。
| colspan属性 | 右隣のセルを結合。指定セルから右側のセルを指定数結合。 |
|---|---|
| rowspan属性 | 下側のセルを結合。指定セルから下側のセルを指定数結合。 |
 |
| 図 セルの結合 |
セル結合の注意
結合すると、セルがはみ出します。
結合前
3x3の表です。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
4のセルと右隣のセルを結合
4のセルにcolspan="2"を指定して右隣のセル(5のセル)を結合。
6のセルがはみ出します。
| 1 | 2 | 3 | |
| 4 | 5 | 6 | |
| 7 | 8 | 9 | |
6のセルを削除
| 1 | 2 | 3 |
| 4 | 5 | |
| 7 | 8 | 9 |
3のセルと下側のセルを結合
3のセルにrowspan="3"を指定して下側のセル(5のセル、9のセル）を結合。
| 1 | 2 | 3 |
| 4 | 5 | |
| 7 | 8 | 9 |
5、9のセルがはみ出す。
5、9のセルを削除
| 1 | 2 | 3 |
| 4 | ||
| 7 | 8 | |
次回は
表の練習です。
