Movie

テーブルの使い方を動画で解説

Table

テーブルをカスタマイズする

STEP.1

商品を変更する

下記コードの赤い文字の部分を変更し製品名・イメージ画像・リンク先を設定します。


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									<th>タイトル5</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									<td>1行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									<td>2行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									<td>3行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									<td>4行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									5行目製品名
									</a>

									</td>

									<td>5行目タイトル1の内容</td>

									<td>5行目タイトル2の内容</td>

									<td>5行目タイトル3の内容</td>

									<td>5行目タイトル4の内容</td>

									<td>5行目タイトル5の内容</td>

									</tr>

									</tbody>

									</table>

画像をアップロードして画像URLを取得する方法はこちら。

STEP.2

各タイトルを設定する

下記コードの赤い文字の部分を変更し、各タイトルを設定してください。


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									<th>タイトル5</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									<td>1行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									<td>2行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									<td>3行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									<td>4行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									5行目製品名
									</a>

									</td>

									<td>5行目タイトル1の内容</td>

									<td>5行目タイトル2の内容</td>

									<td>5行目タイトル3の内容</td>

									<td>5行目タイトル4の内容</td>

									<td>5行目タイトル5の内容</td>

									</tr>

									</tbody>

									</table>

STEP.3

内容を設定する

下記コードの赤い文字の部分を変更し、商品に合わせて各タイトルの内容を設定してください。


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									<th>タイトル5</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									<td>1行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									<td>2行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									<td>3行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									<td>4行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									5行目製品名
									</a>

									</td>

									<td>5行目タイトル1の内容</td>

									<td>5行目タイトル2の内容</td>

									<td>5行目タイトル3の内容</td>

									<td>5行目タイトル4の内容</td>

									<td>5行目タイトル5の内容</td>

									</tr>

									</tbody>

									</table>

STEP.4

製品数の追加・削減の方法

製品数を増やしたい場合は、trタグ 内をすべてコピーして、最後尾のtrタグ の最後にペーストし、追加します。

逆に製品数を減らしたい場合は、最後尾のtrタグ 内をすべてを削除します。

製品が6つの例


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									<th>タイトル5</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									<td>1行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									<td>2行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									<td>3行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									<td>4行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									5行目製品名
									</a>

									</td>

									<td>5行目タイトル1の内容</td>

									<td>5行目タイトル2の内容</td>

									<td>5行目タイトル3の内容</td>

									<td>5行目タイトル4の内容</td>

									<td>5行目タイトル5の内容</td>

									</tr>

									
										<tr>

										<td>

										<a href="リンク先" target="_blank">

										<img src="画像のURL" class="table_img">

										6行目製品名
										</a>

										</td>

										<td>6行目タイトル1の内容</td>

										<td>6行目タイトル2の内容</td>

										<td>6行目タイトル3の内容</td>

										<td>6行目タイトル4の内容</td>

										<td>6行目タイトル5の内容</td>

										</tr>

									</tbody>

									</table>

製品が4つの例


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									<td>1行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									<td>2行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									<td>3行目タイトル5の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									<td>4行目タイトル5の内容</td>

									</tr>

									</tbody>

									</table>

STEP.5

タイトル数の追加・削減の方法

タイトル数を増やしたい場合は、thタグ を追加し、tdタグ を各１列づつ追加していきます。

逆にタイトル数を減らしたい場合は、thタグ を削除し、
減らした thタグ の数だけ各１列づつの tdタグ も削除してください。

タイトルが6つの例


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									<th>タイトル5</th>

									<th>追加タイトル6</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									<td>1行目タイトル5の内容</td>

									<td>1行目追加タイトル6の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									<td>2行目タイトル5の内容</td>

									<td>2行目追加タイトル6の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									<td>3行目タイトル5の内容</td>

									<td>3行目追加タイトル6の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									<td>4行目タイトル5の内容</td>

									<td>4行目追加タイトル6の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									5行目製品名
									</a>

									</td>

									<td>5行目タイトル1の内容</td>

									<td>5行目タイトル2の内容</td>

									<td>5行目タイトル3の内容</td>

									<td>5行目タイトル4の内容</td>

									<td>5行目タイトル5の内容</td>

									<td>5行目追加タイトル6の内容</td>

									</tr>

									</tbody>

									</table>

タイトルが4つの例


									<table class="nomad_table">

									<tbody>

									<tr>

									<th>製品名</th>

									<th>タイトル1</th>

									<th>タイトル2</th>

									<th>タイトル3</th>

									<th>タイトル4</th>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									1行目製品名
									</a>

									</td>

									<td>1行目タイトル1の内容</td>

									<td>1行目タイトル2の内容</td>

									<td>1行目タイトル3の内容</td>

									<td>1行目タイトル4の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									2行目製品名
									</a>

									<td>2行目タイトル1の内容</td>

									<td>2行目タイトル2の内容</td>

									<td>2行目タイトル3の内容</td>

									<td>2行目タイトル4の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									3行目製品名
									</a>

									</td>

									<td>3行目タイトル1の内容</td>

									<td>3行目タイトル2の内容</td>

									<td>3行目タイトル3の内容</td>

									<td>3行目タイトル4の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									4行目製品名
									</a>

									</td>

									<td>4行目タイトル1の内容</td>

									<td>4行目タイトル2の内容</td>

									<td>4行目タイトル3の内容</td>

									<td>4行目タイトル4の内容</td>

									</tr>

									<tr>

									<td>

									<a href="リンク先" target="_blank">

									<img src="画像のURL" class="table_img">

									5行目製品名
									</a>

									</td>

									<td>5行目タイトル1の内容</td>

									<td>5行目タイトル2の内容</td>

									<td>5行目タイトル3の内容</td>

									<td>5行目タイトル4の内容</td>

									</tr>

									</tbody>

									</table>