表を作るHTMLタグ
<TABLE>タグ …… テーブル（表）を作成する
<TR>タグ …… テーブル（表）の横方向の一行を定義する
<TH>タグ …… テーブル（表）の見出しセルを作成する
<TD>タグ …… テーブル（表）のデータセルを作成する
https://gyazo.com/d6e9bf375ed06db062db1a9763f964c2
<table>タブ内に<tr>タグで横の行を追加する。
さらにその中に<th>タグ(見出しセル)または<td>タグ(データセル)でセルを作り、表を作成していく。
見出しが要らない場合は<th>タグを省略してもよい。
簡単な例
code:表を作る(simple)
<table border="1">
<tr>
<th>プラン名</th>
<th>料金</th>
</tr>
<tr>
<td>わくわくプラン</td>
<td>月額2900円</td>
</tr>
<tr>
<td>にこにこプラン</td>
<td>月額1900円</td>
</tr>
</table>
(※<table>タグに［border＝“1”］を入れることで、区切りが入る)→これはHTMLではなくCSSによるものなのだと。 結果
https://gyazo.com/97ebbab463a7ba271e39edf59049a06a
横方向につなげる
セルを横方向につなげたいときは、つなげたいセルの<th>タグまたは<td>タグにcolspan属性を追加する。
「colspan」には繋げたいセルの数を書く。
最初の見出しの2つのセルをつなげたいとすると、<th>タグに「colspan="2"」と加え、2つある<th>タグを結合させる。
code:表を作る(横方向につなげる)
<table border="1">
<tr>
<th colspan="2">セル1+2</th>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
<tr>
<td>セル5</td>
<td>セル6</td>
</tr>
</table>
結果
https://gyazo.com/7930feaa446b9cfa147ded5d252326cd
縦方向につなげる
セルを縦につなげる場合はrowspam属性を加える。
こちらも横方向と同様に、繋げたいセル数を書く。
3つ目と5つ目の縦に並んだセルを結合させたいとすると、3つ目にあたる<td>タグに「rowspan="2"」を加え、3つ目の<td>タグを減らす。
code:表を作る(縦方向につなげる)
<table border="1">
<tr>
<th>セル1</th>
<th>セル2</th>
</tr>
<td rowspan="2">セル3＋5</td>
<td>セル4</td>
<tr>
<td>セル6</td>
</tr>
</table>
結果
https://gyazo.com/3a131f7c7da7ccabfeebc2917ae5de65