Let's Web標準!テーブル作成あれこれ(オマケ:私がホームページを初めて作った時のこと)
前回はページ文書の中央揃えを覚えました。今回は、テーブルの中央揃えとその他装飾などについて覚えてみたいと思います昨日の時点で、疑問には思っていたんだけど疑問に思っていると、アンテナができてテキストを読んでいても、見え方が違ってくるものよん^^いっぱい疑問を持ってくださいませ。【テーブル作成とCSSで装飾する例】---------- 表示例----------幅:80%/表の位置:中央揃えボーダー(線幅):1px/線種:実線/セル内の余白:3pxセル内のテキストの行揃え:中央(センター)項目の色の背景:orangeセルの幅:50%(半分ずつになるように設定^^)商品名価格Web標準の教科書2,520円楽天広場での記述<table style="width: 80%; border-collapse: collapse; margin-right: auto; margin-left: auto;"><tbody><tr><th style="width: 50%; padding: 3px; border: 1px solid black; background-color: orange; text-align: center;">商品名</th><th style="width: 50%; padding: 3px; border: 1px solid black; background-color: orange; text-align: center;">価格</th></tr><tr><td style="width: 50%; padding: 3px; border: 1px solid black; text-align: center;">Web標準の教科書</td><td style="width: 50%; padding: 3px; border: 1px solid black; text-align: center;">2,520円</td></tr></tbody></table>広場で使う時は、改行を削除して使ってね^^通常はこちらで^^---------- CSS----------.table_style { width: 80%; border-collapse: collapse; margin-right: auto; margin-left: auto;}.th_style{ width: 50%; padding: 3px; border: 1px solid black; background-color: orange; text-align: center;}.td_style{ width: 50%; padding: 3px; border: 1px solid black; text-align: center;}---------- HTML----------<table class="table_style"><tbody><tr><th class="th_style">商品名</th><th class="th_style">価格</th></tr><tr><td class="td_style">Web標準の教科書</td><td class="td_style">2,520円</td></tr></tbody></table>THタグは、本来、中央揃えの設定をしなくても、中央にくるんだけど広場では、カクカクシカジカ・・・でして、えぇぃっ!ってことで設定してます(例の赤字部分)。ついでに、THタグの特性をもうひとつ覚えよう!勝手に太字です!何が何だか?って思ったら、1行ずつ追ってみること。テーブルについて触っていたら、思い出したことがあります。初めてホームページを作ることになったときのこと。---------------------------------------------------それは、専門学校時代のことでこれからはホームページくらいはわからないとって・・・簡単なタグの解説とサンプルを渡されました。ちっともわかりません。<html><body>ここにコンテンツを書く</body></html>B、TABLE、TD、A、FONT、TITLE、BR、IMG ・・・こんなもんだったな。教えてもらったタグ。実践も何もあったもんじゃない。こんだけの知識でホームページ作るんだ!課題だよ。課題がすべての学校だったからな~テキストもない・・・((( ̄へ ̄井) フンッ こんなんでわかるか!?わかるわけがない!右も左もわからんのに。世の中の雑誌にはホームページ作成が特集されていてそれのうちのひとつと睨めっこ。マーカー引きまくりにしてタグを全部書き出して総計1時間ほど睨めっこ。この塊がこれで、このタグで色を変えて、配置して・・・当時の私は、何にも知らなかった。でも1時間くらい睨めっこしたらテーブル組みされたホームページがわかるようになった。知ってたタグは、上に書いたいくつかだけ。しかも初めて見たタグばっかり。テーブルで挫折する人って多いと思うんだ。わけわからんってね。Web標準を視野に入れると、少し複雑なHTMLソースになるけどどうぞ2時間トライしてみてください。そんでもって、若葉マークさんにアドバイスなど^^;最初にタグ本(リファレンス)買っちゃいけません!わけわかんないから。薄いレッスン本を買うことをオススメします。1日あれば、十分終わる程度のものね^^---------------------------------------------------トップページに新しい目次を追加しました。NEWマークがついているので、おさらいしてみてね ・・・・・最後まで読んでくれた方、ありがとう^^ ・・・つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *久しぶりに遠くのお山が見えます。私の気分転換です♪