<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>

<thead>

<tr>

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

</tr>

<tr>

<th>Energie (エネルギー) </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 を使って “写真をスライドショー” する方法 ✏️ 覚書 📝

2024.02