ホームページのテーブルの素人感をなくしてをきれいに見せる方法とは？
2021/3/31
CMS等にあるリッチテキストエディターで通常のテーブルを作成するとだとこんな感じになってしまいます。どことなく素人っぽい感じがしますよね。
（通常テーブル）
| とまと | みかん |
| ああああああああああああああああああああ | いいいいいいいいいいいいいいいいいいいいい |
| ２００ｇ | ３００ｇ |
これをCSSを使うことでこんなきれいなテーブルになります。
（CSSを使ったテーブル）
| とまと | みかん |
| あああああああああああああああああああああ | いいいいいいいいいいいいいいいいいいいいい |
| ２００ｇ | ３００ｇ |
CSSに以下を追加するだけです。
table {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width:100%;
}
table tr {
border: 1px solid #bbb;
}
table th,
table td {
padding: 5px 10px 5px 5px;
border-right: 1px solid #bbb;
text-align: center;
}
これだけで素人っぽさが無くなりますよね。
テーブルすべてに適用されるCSSになっているのでよろしければお使いください。
CSS3を使ったらもっときれいになるのでまた別の機会にご紹介しますね。 最後までお読みいただきありがとうございました。
この記事を書いたのは
株式会社AMS 取締役副社長 古倉 功一
2005年からSEOに本格的に取り組み、SEO歴は15年以上。現在はリスティング広告、SEOをメインにしたWebコンサルを提供中。好きな番組：ポケットモンスター。
- 石川県産業創出支援機構(ISICO)「お店ばたけ」ホームページドクター
- セミナー講師（Webマーケティング、SEO、PPC広告等）
- ミラサポ専門家登録(派遣先からの総合評価平均 5点中4.9)
ホームページでお困りならAMSにお任せください。
- 制作会社の選び方がわからない。
- どの制作会社も費用が高額で手が付けられない。
- 今のホームページが簡単に更新できなくて困っている。
などホームページでお困りではありませんか？ 弊社AMSでは効果のある高品質なホームページを格安で制作いたします。 まずは料金やプラン内容、制作実績などを下記の画像をクリックして ご覧ください。
