Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@m_hamada

昔の人はtableでカドマルを作ってた、ってよ!

More than 1 year has passed since last update.

cssの普及と発達により、すっかり廃れた手法ですが、今回はそのうちの一つを記録に残すとしましょう。

【古の技術】テーブルコーディング!!!!!!!

↓よくあるこういうデザイン。
名称未設定-1.png

今ならcssで簡単にできますよね。

css
border-radius: 10px;

これをtableで表現したいと思います。

準備するもの

まず、四隅の角丸画像を4枚を用意します。角画像は背景付で作成します。
↓こういうヤツ
img04.png img01.png img02.png img03.png

手順:exclamation:

まず、tableを作り、四隅に画像を配置します。

イメージ

2.png

そして、

  • tableの余白、間隔、ボーダーを全て「0」にする。
  • 角丸画像と同じ色でテーブルの背景をつける。
  • 四隅のテーブルセル(td)に、align(left,right)、valign(top,bottom)を指定する。
  • tdにそれぞれの横幅(width)と高さ(height)を指定する。
  • 何も入力のないtdは表示されません。spacer.gifを入れるか、 などを入れましょう。

これだけ。。。だが、意外と面倒くさい :disappointed_relieved:
tableの横幅を300pxとしたら、真ん中のtdは、横の幅20pxを引いて280pxを指定。画像のサイズを中途半端にしないのがおすすめです。
きっちり計算が合わないと、思わぬ形にズレたりしてしまう場合があるのでちまちま指定しましょう。(※現在は四隅以外の横幅は指定せずともうまくいく場合があります。適宜ブラウザでご確認ください。)

HTMLコード

html
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ccc">
    <tbody>
        <tr>
            <td align="left" width="10" height="10" valign="top"><img src="images/img01.png" width="10" height="10" alt=""></td>
            <td width="280" height="10">&nbsp;</td>
            <td align="right" width="10" height="10" valign="top"><img src="images/img02.png" width="10" height="10" alt=""></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td width="280" height="150"><p>&nbsp;</p></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td align="left" width="10" height="10" valign="bottom"><img src="images/img04.png" width="10" height="10" alt=""></td>
            <td width="280" height="10">&nbsp;</td>
            <td align="right" width="10" height="10" valign="bottom"><img src="images/img03.png" width="10" height="10" alt=""></td>
        </tr>
    </tbody>
</table>

※font-sizeが利いてしまう場合、うまくいかないのでfont-size:0 を指定する必要があります。
※table本来の使い方としては、非推奨ですが、デザインを表現する為の手法として使うしかなかった、という例になります。

もうこんなことしなくてええやろぉ~

そう思ってたけど、HTMLメールという強敵が :tired_face::tired_face::tired_face:
こいつはイマドキのcssを理解しようとしないやっかいな存在です。
どうしてもガチtableコーディングしないといけない場合があり、そんな中で意外と役に立ったよ、って話。

tableの中にtableを入れてレイアウトしたり、tableを駆使してhtmlを作成するのもなかなかマニアックですよね。

もうデザインの為にtableを駆使しなくても良くなった時代にバンザイ!:open_hands:

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
m_hamada
ディップのフロントエンド課(FeET)でうぇぶでざいなーとか呼ばれてたものに近い仕事をしています。 投稿内容については、会社の意思とは別に一部主観を含みます。
dip-net
ディップ株式会社は「バイトル」「はたらこねっと」などの求人情報サービスをはじめ、人工知能専門メディア「AINOW」、スタートアップ専門メディア「スタートアップタイムズ」、アニメなどの舞台を紹介するサイト「聖地巡礼マップ」といった新しい分野のサービスを自社で開発・運営しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?