- ベストアンサー
テーブルタグで表を作成する方法
- テーブルタグを使用して表を作成する方法を教えてください。
- 上記の２つの様な表をテーブルタグで作る方法を教えてください。
- テーブルタグを利用して、様々な形式の表を作成する方法を教えてください。
- mitsuemon
- お礼率60% (1485/2450)
- その他（インターネット・Webサービス）
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 今回私が提案したテーブルに適用したCSSのプロパティ（と、それぞれの値）の意味は、 padding ←枠（今回はセル）の内側と内容物（今回はテキスト）との余白。 例：padding:5px; ←セルの内側とテキスト間の余白が上下左右5px分空いている。 border ←（枠）線。 例1：border:1px solid #ff0000; ←（今回はセル）の枠線の太さが1pxで色が#ff0000で線種が単線。 例2：border-style:none; ←セルの枠線を非表示。 border-collapse ←（隣接する）セルの枠線の表示指定。 例1：border-collapse:collapse; ←（隣接する）セルの枠線同士を結合して1本に見せる。 例2：border-collapse:separate; ←（隣接する）セルの枠線同士を分離し2本に見せる。 ただし、部分的なスタイルが分かってもスキルにならないし、応用も利きません。 CSSに関しては一から勉強することをお勧めします。
その他の回答 (3)
- Safe_Mode
- ベストアンサー率48% (1329/2725)
>まずスタイルシートの知識は、あまり無く >また、今回御指摘のタグもスタイルシートも >何が、どう意味するのかも分かりませんでした ブログでも基本的なHTMLとスタイルシートの知識は あったほうがいいですよ。 >それと、スタイルシートが設定してないからだと思いますが >上記回答のタグを、そのまま設定したら >画像と解説の文字の配列は反映してますが >枠等は全く出てませんでした >しかも書いて下さってる「表」の文字も入ってませんでした HTMLソースのヘッダーにある、 <meta http-equiv="Content-Style-Type" content="text/css"> は、このページでスタイルシートを使いますよという宣言のようなものです。 <title>表</title> はそのページのタイトルとなりブラウザのタイトルバーに表示されます。 <link REL="stylesheet" href="style.css" type="text/css"> は、style.cssというスタイルシートを呼び出しています。 >ちなみに、これはタグだけでは出来ないんでしょうか？ 下記の部分をメモ帳に貼り付け、style.cssというファイル名で保存してスタイルシートファイルとし、HTMLファイルと同じ場所に置くようにしないと表示されません。 table{ border-collapse:collapse; border-spacing:0; empty-cells:hidden; } td{ border:2px #ff0000 solid; } >それと、これも書いてませんでしたが >今回反映させたいのはブログ本文です それを最初に書くべきでしたね。 私が提示したのは、あくまでも普通のWebページ作成として回答したものですので、ブログの場合はANo.2さんのような回答になります。 ANo.2さんの方法でも出来なければ別にWordでもExcelでも使って作成した表を画像として保存してから貼り付けてもいいんじゃないでしょうか？
お礼
回答有難う御座います レスが遅れてスイマセン… “スタイルシートの知識はあったほうがいいですよ。” この事なんですが、スタイルシートに関しては 今迄でも、あまり勉強は、してませんでした その理由は、実は以前にも特殊な設定の時に ここで教えて頂いたんですが 現時点では勉強しても滅多に使用しない為 その時のスタイルシートも 今では意味すら忘れてしまってますし ここでスタイルシートの事に触れられる迄 設定した事も忘れてました “それを最初に書くべきでしたね。” 申し訳ありません、ちなみにブログはＦＣ２ブログです
- torayoshi
- ベストアンサー率62% (910/1449)
そのブログはヘッダー（<head>～</head>）を直接編集出来ますか？ 出来ない仕様のブログだとすると、bodyタグに直接スタイルシートを実装するしかないと思います。 #1さんとは別のやり方で2タイプのサンプル。 <!--タイプ１--> <table> <tr> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> </tr> <tr> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="border-style:none;"></td> <td style="border-style:none;"></td> </tr> </table> <!--タイプ１ここまで--> <!--タイプ２--> <table style="border-collapse:collapse;"> <tr> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> </tr> <tr> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="padding:5px;border:1px solid #ff0000;">文字</td> <td style="border-style:none;"></td> <td style="border-style:none;"></td> </tr> </table> <!--タイプ２ここまで-->
お礼
回答有難う御座います レスが遅れてスイマセン… まず、スタイルシートに関してなんですが 今迄でも、あまり勉強は、してませんでした その理由は、実は以前にも特殊な設定の時に ここで教えて頂いたんですが 現時点では勉強しても滅多に使用しない為 その時のスタイルシートも 今では意味すら忘れてしまってますし ここでスタイルシートの事に触れられる迄 設定した事も忘れてました “そのブログはヘッダー（<head>～</head>）を直接編集出来ますか？” 多分出来ると思いますが、詳しくは分かりません ちなみにブログはＦＣ２ブログです それとタグの件は有難う御座います ただ、申し訳無いんですが No.1さんへのレスでも触れたんですが 今回、御紹介のタグに関しては 何が、どれを、どう意味するんでしょうか？ ちなみに自分でも調べて勉強しようとしても その辺が分からないと、今後の応用も出来ないんで…
- Safe_Mode
- ベストアンサー率48% (1329/2725)
HTMLとスタイルシートを分けて作成するほうがいいです。 枠の太さや色、実線や破線といった使い分けはスタイルシート側で指定します。 下記は一例です。 ■HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>表</title> <link REL="stylesheet" href="style.css" type="text/css"> </head> <body> <table id="sample"> <tr> <td>画像</td> <td>解説</td> <td>画像</td> <td>解説</td> <td>解説</td> </tr> <tr> <td>画像</td> <td>解説</td> <td>画像</td> <td>解説</td> <td>解説</td> </tr> <tr> <td>解説</td> <td>解説</td> </tr> </table> </body> </html> ■スタイルシート（style.css） table{ border-collapse:collapse; border-spacing:0; empty-cells:hidden; } td{ border:2px #ff0000 solid; }
お礼
回答有難う御座います ただスイマセン…私が書き忘れたんですが まずスタイルシートの知識は、あまり無く また、今回御指摘のタグもスタイルシートも 何が、どう意味するのかも分かりませんでした それと、スタイルシートが設定してないからだと思いますが 上記回答のタグを、そのまま設定したら 画像と解説の文字の配列は反映してますが 枠等は全く出てませんでした しかも書いて下さってる「表」の文字も入ってませんでした ちなみに、これはタグだけでは出来ないんでしょうか？ それと、これも書いてませんでしたが 今回反映させたいのはブログ本文です
お礼
どうも有難う御座いました