表のテンプレ変更についての提案
今までの「テーブル(表)」ボタン使用
テーブル内見出し的な奴 |
AAAAA |
aaaaa |
BBBBB |
bbbbb |
DDDDD |
ddddd |
<table class="article_table">
<thead>
<tr>
<th colspan="2">テーブル内見出し的な奴</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAAAA</th>
<td>aaaaa</td>
</tr>
<tr>
<th>BBBBB</th>
<td>bbbbb</td>
</tr>
<tr>
<th>DDDDD</th>
<td><a href="xxxx" class="underline">ddddd</a></td>
</tr>
</tbody>
</table>
表のタイトル(『テーブル内見出し的な奴』)が、「表の列の見出し」として表内に組み込まれてしまい、googleに「表のタイトル」として認識されづらい?
タイトルをキャプション(表のタイトル)として入力
テーブルのタイトル
AAAAA |
aaaaa |
BBBBB |
bbbbb |
DDDDD |
ddddd |
<table class="article_table">
<caption><strong>テーブルのタイトル</strong></caption>
<tbody>
<tr>
<th>AAAAA</th>
<td>aaaaa</td>
</tr>
<tr>
<th>BBBBB</th>
<td>bbbbb</td>
</tr>
<tr>
<th>DDDDD</th>
<td><a href="xxxx" class="underline">ddddd</a></td>
</tr>
</tbody>
</table>
参照URL
札幌の冬を満喫!おすすめのアクティビティ・観光スポット
表内での「・」は、文字列利用OK!→先に「表」として認識されるので
城南宮
住所 |
京都府京都市伏見区中島鳥羽離宮町7 |
2024(令和6)年
2月のイベント |
・城南宮七草粥:2月11日(日・祝)
・しだれ梅と椿まつり:2月18日(日)〜3月22日(金)
|
<table class="article_table">
<caption><strong>城南宮</strong></caption>
<tbody>
<tr>
<th>住所</th>
<td>京都府京都市伏見区中島鳥羽離宮町7</td>
</tr>
<tr>
<th>2024(令和6)年<br>
2月のイベント</th>
<td>
・城南宮七草粥:2月11日(日・祝)<br>
・しだれ梅と椿まつり:2月18日(日)〜3月22日(金)
</td>
</tr>
</tbody>
</table>
列見出しあり →
幅指定含めコード確認の必要あり!
列幅や改行は未指定
|
列見出し1 |
列見出し2 |
AAAAA |
aaaaa |
11111 |
BBBBB |
bbbbb |
22222 |
DDDDD |
ddddd |
33333 |
<table class="article_table">
<thead>
<tr>
<th> </th>
<th>列見出し1</th>
<th>列見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAAAA</th>
<td>aaaaa</td>
<td>11111</td>
</tr>
<tr>
<th>BBBBB</th>
<td>bbbbb</td>
<td>22222</td>
</tr>
<tr>
<th>DDDDD</th>
<td><a href="xxxx" class="underline">ddddd</a></td>
<td>33333</td>
</tr>
</tbody>
</table>
列幅や非改行を指定
地域 |
平均気温 |
平均最高気温 |
平均最低気温 |
京都 |
5.4℃ |
10.0℃ |
1.6℃ |
園部 |
2.1℃ |
7.0℃ |
-1.5℃ |
<table class="article_table">
<thead>
<tr>
<th>地域</th>
<th>平均気温</th>
<th>平均最高気温</th>
<th>平均最低気温</th>
</tr>
</thead>
<tbody>
<tr>
<th nowrap="nowrap">京都</th>
<td width="300">5.4℃</td>
<td width="30">10.0℃</td>
<td width="500">1.6℃</td>
</tr>
<tr>
<th>園部</th>
<td>2.1℃</td>
<td>7.0℃</td>
<td>-1.5℃</td>
</tr>
</tbody>
</table>
KKday商品
●テキスト●
●リンク先プラン名など●
※KKdayのサイトへ遷移します
<div class="article_panel__color--●色●">
<!-- 画像回り込み 右・左 article_float--right / article_float--left -->
<div class="article_float--right">
<div class="article_float__img">
<a href="●リンク先URL●">
</a>
</div>
<p class="article_float__text">
●テキスト●<br>
<div class="margin-b-20"></div>
<strong><a href="●リンク先URL●">●リンク先プラン名など●</a></strong><br>
<small>※KKdayのサイトへ遷移します</small></p>
</div></div>