とりあえず 😅 ホームページ Ameba Ownd で HTML を使って “表 (テーブル)” を書く方法覚書 📝

基本的なHTMLを使ってコードを貼り付けています 👉🏻 こんな感じの表 になります。

table 要素

表全体

tr : Table Row 要素 

tr は「Table Row (行)」

表の行を１つ作成します。

th : Table Header  要素

th は「Table Header (見出し)」

表の見出しとなるセルを１つ作成します。

td : Table Data 要素

td は「Table Data (データ)」

表のデータとなるセルを１つ作成します。

caption 要素

caption 要素は、テーブルの見出しを作成できます。table 要素の直後に一回だけ記述できます。つまり table タグのすぐ下にを書く必要があります。テーブルの見出しを下側に表示したいときには CSS の caption-side を使う。文字列はデフォルトで中央寄せになります。

thead要素、tbody要素、tfoot要素を使うメリット

・プラウザに表の構造をより明確にできる。

・後で修正しようとする時に構造が把握しやすい。

・CSSでスタイルを適用できる。

thead要素、tbody要素、tfoot要素はそれぞれ省略が可能。無くても問題はなし。

<style> 

table { width: 100%; /* テーブルの横幅を指定する */  

border-collapse: collapse; /* 隣接するセルのボーダーを、間を空けずに重ねて表示*/ } 

th { border: solid 1px #666666; /* セルの境界線を実線で指定する */ color: #000000;
background-color: #d0d6d1; } 

td { border: solid 1px #666666; /* セルの境界線を実線で指定する */ color: #000000;
background-color: #ffffff; } 

</style>

例えば、以下の 👇🏻 <style> ~ </style> <table> ~ </table> を、使っているホームベージ (Ameba Ownd) の "HTML" ボックに貼り付けてみる。"CSSカスタマイズ" ボックスはデフォルトのままです。

<style>

table {width: 100%; border-collapse: collapse; } 

th { border: solid 1px #666666; color: #000000; background-color: #d0d6d1; } 

td { border: solid 1px #666666; color: #000000; background-color: #ffffff; }

</style>

<table border="1" cellpadding="5">

<thead>

 <tr>

<th colspan ="2">チーズのカロリーってどれぐらいなの？</th>

</tr>

<tr>

<th>Energie (エネルギー) </th>

<th>100g あたり</th>

</tr>  

</thead>

<tbody>

<tr><td><font color="#FF00FF">ROQUEFORT (ロックフォール)</font> </td><td>368 kcal</td></tr>

<tr><td>Morbier (モルビエ)</td><td>345 kcal</td></tr>

</tbody>

</table>

そうすると、こんな感じの表になります.

覚書：

✅ colspan：横方向のセル結合

✅ font color：文字に色をつける

<font color="#FF00FF">Associés</font>

⚠️ cellpadding：テーブルのセル内の余白を指定

セル内の余白とは、セルの枠から文字までの距離。cellpadding 属性は、HTML5で廃止、非推奨。 代わりに CSS の使用が推奨されています。

なので、cellpadding 属性を使わずに“表” を書くとすると、

<style>

table {width: 100%; border-collapse: collapse; } 

th { border: solid 1px #666666; color: #000000; background-color: #d0d6d1; padding: 8px; /*上下左右8pxずつ*/}

td { border: solid 1px #666666; color: #000000; background-color: #ffffff; padding: 5px 8px; /*上下5pxで左右8px*/} 

</style>

<table border="1">

<thead>

 <tr>

<th colspan ="2">チーズのカロリーってどれぐらいなの？</th>

</tr>

<tr>

<th>Energie (エネルギー) </th>

<th>100g あたり</th>

</tr>  

</thead>

<tbody>

<tr><td><font color="#FF00FF">ROQUEFORT (ロックフォール)</font> </td><td>368 kcal</td></tr>

<tr><td>Morbier (モルビエ)</td><td>345 kcal</td></tr>

</tbody>

</table>

になります。

cellpadding 属性を使った場合と使ってない場合で、セルの余白が違うことに気づかれると思います。これは、

cellpadding 属性を使った場合：cellpadding="5 と指定している

cellpadding 属性を使わなかった場合：th {padding: 8px; /*上下左右8pxずつ*/} td { padding: 5px 8px; /*上下5pxで左右8px*/} 

にしているからです。

どちらが見やすいかなぁ🤔

要するに、Ameba Ownd で HTML を使って “表” を書く場合、 "HTML" ボック内に "HTML/CSS" 両方のコードを書けばいいと言うことですね。もちろんこれは "表" だけに限りません。

✍🏻 アフィリエイトを始めるならA8.net (エーハチネット) がオススメ。このホームページでも使っています 👉🏻 まずは無料会員登録だけでもしてみてはいかがでしょうか？

✍🏻  Ameba Ownd で HTML/CSS を使って “写真をスライドショー” する方法 ✏️ 覚書 📝