Tableコーディングが苦手な自分のメモ用に作ってみました。(2021/12/09更新)
■要点メモ1
・th：Table Header…テーブルのヘッダーの事
・tr：Table Row…thやtdを格納する要素。
・td：Table Data…行部分（横方向）を入れる要素
・table＞ｔｒ＞tdの順番に入れる
■要点メモ2
●横(行)を作りたければ
<table>
<tr> <td></td> <td></td> <td></td> </tr>
●縦(列)を作りたければ
<table>
<tr> <td></td> </tr>
<tr> <td></td> </tr>
<tr> <td></td> </tr>
</table>
■要点メモ3
・行をまとめたい場合：colspan=”X”でtrをまとめる。tr3つあるところを2つにするならcolspan=”2″
・列をまとめたい場合：rowspan=”Y”をまとめたい列（縦方向）のtrに書く。
3列目をまとめたい場合には<tr>1</tr><tr>2</tr><tr rowspan=”2″>と書く。
・枠線はCSSで制御する。table自体にborder=”1″と入れると二重線になってしまう。
■補足メモ
・行は横並びの事
「1行目」といえば横書きに書かれた文章の一番目の事
「改行」は横書きの文字の次の行の事
英語ではrow（ロゥ）という
・列は縦並びの事
「1列目」といえば縦並びの一番左(横書きで書かれている場合)
htmlは横書きに書かれているので一番左が「1列目」
日本語のように縦並びで書かれたものなら「1列目」は一番右の事なのだろう。たぶん。
英語ではcolumn（カラム）。コルムンではない。かわいいけど。
【実際作ったサンプル】
| 【th1】 | 【th2】 | 【th3】 |
|---|---|---|
| 【th colspan3】 | ||
| 【td1】 | 【td2】 | 【td3】 |
| 【td1】 | 【td2 colspan2】 | |
| 【td1 rowspan2】 | 【td2】 | 【td3】 |
| 【td2】 | 【td3】 | |
| 【td1】 | 【td2】 | 【td3 rowspan2】 |
| 【td1】 | 【td2】 | |
| 【td1】 | 【td2 colspan2 rowspan2】 | |
| 【td1】 | ||
【html】
<table class=”tableset”>
<thead>
<tr>
<th>【th1】</th>
<th>【th2】</th>
<th>【th3】</th>
</tr>
</thead>
<thead>
<tr>
<th colspan=”3″>【th colspan3】</th>
</tr>
</thead>
<tbody>
<tr>
<td>【td1】</td>
<td>【td2】</td>
<td>【td3】</td>
</tr>
<tr>
<td>【td1】</td>
<td colspan=”2″>【td2 colspan2】</td>
</tr>
<tr>
<td rowspan=”2″>【td1 rowspan2】</td>
<td>【td2】</td>
<td>【td3】</td>
</tr>
<tr>
<td>【td2】</td>
<td>【td3】</td>
</tr>
<tr>
<td>【td1】</td>
<td>【td2】</td>
<td rowspan=”2″>【td3 rowspan2】</td>
</tr>
<tr>
<td>【td1】</td>
<td>【td2】</td>
</tr>
<tr>
<td>【td1】</td>
<td colspan=”2″ rowspan=”2″>【td2 colspan2<br>rowspan2】</td>
</tr>
<tr>
<td>【td1】</td>
</tr>
</tbody>
</table>
【CSS】
.tableset {
width: 100%;
}
table, th, td {
border-collapse: collapse;
border: 1px solid #ccc;
line-height: 1.5;
}
.tableset th {
background: #3f3f3f;
color: #ffffff;
font-weight: bold;
padding: 10px;
vertical-align: top;
}
.tableset td {
padding: 10px;
vertical-align: top;
}
※上記CSS中の「table, th, td { border-collapse: collapse; border: 1px solid #ccc; line-height: 1.5; }」を入れないと
セルに隙間が入る