- ベストアンサー
セルタグで分け方を変えたいです
- FC2ブログを運営している私はセル用のタグを使用したいです。現在のタグは枠が付かない設定ですが、今回枠を付ける必要が出てきました。セルの感覚が等間隔ではない状態が必要です。
- 表現が見つからず、名前の文字を並べたタグを使用しました。上の段は左右にセルの枠を挟んで８文字ずつの短文が作られており、その下には左２つが４文字ずつの短文、右２つが２文字ずつの短文があります。セルの縦や横の枠の位置を自由に変えられるタグが知りたいです。
- 現在使用しているタグを変更するのは大変であり、他に良い方法があるか質問しています。詳細なタグ情報はtagindex.comのページを参考にしています。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
再び失礼します。すみません、回答内容がずれていたようですね。 つまり上部のタグをいじらずに、 [見出し][解説][見出し][解説]（横並びに四列でいいんでしょうか？） 下部を、上部と横幅を揃えたい、という感じでしょうか。 [見出し][画像][画像][画像] （１） <table>自体を分ける、という手段があると思います。 その上でテーブル幅を固定すれば、どんなに横のセル数（列数）が違っても、テーブルの横幅自体はぴったり一致します。 まずスタイルシートでテーブルの横幅を固定します。 例1）スタイルシート.cssを用意する table{table-layout:fixed;width:80%;} 例2）ページのヘッダーに書き込む。 <style TYPE="text/css"> <!-- table{table-layout:fixed;width:80%;} --> </style> そして既にあるテーブルの下に、見出し+画像のテーブルを置きます。 テーブルの横幅は上記のスタイルシートによって、揃えられます。 [名前th ][名前 ][名前th ][名前 ]（元のテーブル） [見出し ][画像 ][画像 ][画像 ]（下に作るテーブル） 或いはこんな風にもできる筈です。 [名前th][名前 ][名前th][名前 ]（元のテーブル） [見出し][画像][画像][画像][見出し][画像][画像][画像]（下に作るテーブル） <table border=5> <tr> <th>名前</th><td>名前</td> <th>名前</th><td>名前</td> </tr> </table> <table border=5> <tr> <th>見出</th> <td>画像</td> <td>画像</td> <td>画像</td> </tr> </table> 画像の列数を付け加えても、<table>の横幅は同じになる筈です。 （ただしwidth:◯◯;で設定したサイズに収まる程度で） （２） １つのテーブルに収める場合、やはり列数、<td>の数を上と揃えるのが一番だと思います。 下の[画像セル]を一つだけ用意して、下のセルにcolspanを設定してはいかがでしょうか。画像自体は一つのセルに横並びさせることができると思います。 <table border=5> <tr> <th>名前</th><td>名前</td> <th>名前</th><td>名前</td> </tr> <tr> <th>見出</th> <td colspan="3"><img><img><img></td> </tr> </table> [名前][名前][名前][名前] [見出][画像／画像／画像] こんな表になると思います。 或いは上部が[見出し][解説]の二列であれば、 colspanを設定しなければ、そのまま下記の表ができます。 [名前][名前 ] [見出][画像／画像／画像] こんな感じではいかがでしょうか？ また違ってたら済みません。
その他の回答 (4)
- syagain
- ベストアンサー率54% (42/77)
テーブルを作る時は、まず列数の最大値を決めて下さい。 この場合、「見出し」+「画像３」＝4つのセルが、横に必要ですね。 １列目／ ２列目／３列目／４列目 [見出し１][解説] [見出し２][画像１][画像２][画像３] こうしてみると、一行目（２つ）と二行目（４つ）で、 列数が二つ違うのが分かりますね。 [画像1]は２列目なので、[解説]と同じ列です。 [画像2,3]は、３、４列目なので、[解説]とは違う列です。 その為、[解説]のセルより右になっているのです。 つまり、一行目にセルを増やせば良いんです。 といっても、新しく<td></td>を付け加える必要はありません。 既にある<td></td>の、セルの長さを二つ分追加します。 その為のタグがcolspanです。 セルが横に一つ分＝colspan="1" セルが縦に一つ分＝rowspan="1" 通常のセルは、書かれてはいませんが、↑のようになっています。 なので、以下のように書きましょう。 <td colspan="3"> 「セルの長さが、元の１つ+２つで、3つ分取りますよ」という意味です。 これで、見た目にはセルは一つですが、 そのセルは、他の行のセル三つ分と同じ扱いなのです。 或いは[画像]セル３つ分＝ colspan="3" という考え方でも構いません。 これで、一行目のセル数は[th(1)]+[td(3)]=「4つ」という扱いになり、 二行目とセル数が一致するようになりました。 <table border=5> <tr> <th>見出し１</th> <td colspan="3">解説</td> </tr> <tr> <th>見出し２</th> <td>画像１</td> <td>画像２</td> <td>画像３</td> </tr> <table> これでずれは無くなり、こうした表が作られます。 [見出し１][ 解説 ] [見出し２][画像１][画像２][画像３] さて、これらが縦に何段もあるんですよね？ [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し２][画像１][画像２][画像３] [見出し２][画像１][画像２][画像３] [見出し２][画像１][画像２][画像３] こうした表が作りたいならば、 単にそれぞれの<tr>~</tr>をコピペではり付けるだけで大丈夫です。
お礼
やはり、その方法しか無いでしょうか？ …と言うのが 申し訳ありません、その方法なら既に使用したんですが 上記でも書いた 「現在この上には既に、下記タグを何段も作ってる為 これを変更するのが大変です」 の意味なんですが これが最初から [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し２][画像１][画像２][画像３] [見出し２][画像１][画像２][画像３] [見出し２][画像１][画像２][画像３] の予定で作ってれば 見出し＆解説の時に<td colspan="3">解説</td> を入れて作ってたんですが 当初の予定は [見出し１][ 解説 ] これを上から下迄、続ける予定だったんです それで、最初は <table border=5> <tr> <th>名前</th><td>名前</td> <th>名前</th><td>名前</td> </tr></table> で作ってました しかし途中から画像入りを 急に入れる事に、なった為 このタグに合わせると、今迄作ったタグに対して 全て、これ<td colspan="3">解説</td>を 追加する事に、なる為 相当な時間が掛かる…それで他のタグ等を設定する方法で 何か無いかと思って質問した訳です と、なると他の方法ではムリなんでしょうか？
- Erorin
- ベストアンサー率42% (45/105)
回答に誤りがあったことをお詫びします。 <th>は<td>の変わりに使う、でした。 よって、書き方は間違っていませんね。 <th>を使う機会がなかったもので...失礼しました。 あと、ちょっと技巧的な方法ですが、横一列の書式を一気に設定するには、styleを使うといいですよ。 <tr style="font-weight:bold;"> <td>1</td> <td>2</td> </tr>
- Erorin
- ベストアンサー率42% (45/105)
セルの結合に関しては、Excelを思い浮かべてみればわかりやすいでしょう。 どうテーブルを組めばいいのか判らなくなった場合は、Excelを起動して、複数のセルを選択して、「セルを結合して中央揃え」から、自分の作りたい表の概形を作ります。 すると、何行何列を確保すれば表がうまく作成できるかがわかります。 そして、それぞれのtdのcolspanやrowspanの合計値が一致するように作ればよいのです。（設定されていない場合はそれぞれ１です） なお、複雑なテーブルを作るのがあまりにも大変な場合は、<td></td>の中に、新しくテーブルを作る方法があります。ただし、これをあまりやりすぎると、ブラウザに負担をかけてしまい、（極端な例ですが）10回ネスト（入れ子）にしたら、世代の古いマシンだと表示に一分以上かかることもあります。 ちなみに、<th>は<tr>の亜種で、 <table border=5><tr><th colspan="2">見出し</th></td><td>解説・・・ という使い方はしません。あくまで<tr>のかわりに使う、と覚えてください。
お礼
回答有難う御座います ただスイマセン… 私は普段、エクセルを使用する事が 全然と言って良い位ありません 従って、残念ながら今回御指摘の内容に関しては ほとんど分からないんですが… それで結論から言うと 私が希望してるタグはムリなんでしょうか？
- Erorin
- ベストアンサー率42% (45/105)
セルの大きさを自由に変えたいのなら、中に何も書かれていない「幅を取るための<td>」「高さを調整するための<tr>」を作ればいいのです。 ただし、その際にはcolspanやrowspanをかなり巧みに使用しないといけないので、楽な方法とは言えませんね。 |td|td|td| ←何も書かれていない | td |td| |td| td | <table> <tr> <td></td><td></td><td></td> </tr> <tr> <td colspan="2">AA</td> <td>BB</td> </tr> <tr> <td>BB</td> <td colspan="2">AA</td> </tr> </table> データが肥大化する可能性もあります。文字列にこだわる必要がないのなら、画像にすることをおすすめします。
お礼
回答有難う御座います 結論から言うと、一応反映しました 一応…と言うのは まず、書いて頂いたセルの中で <table><tr><table><tr><td></td><td></td><td></td></tr><td></td><td></td></tr> の中の空欄を入れる<td>～</td>は必要なかったんで 入れませんでした 従って、試験的に<table border=5><tr><td colspan="2">AA</td><td>BB</td></tr><tr><td>BB</td><td colspan="2">AA</td></tr></table> こういうタグを作った所 ---------- | ---------- | ---------- こういう反映に、なり 上の段と下の段で、縦のセル枠の位置がズレた為 結果としては成功してます ただ、分からないのが、自分でも調べたんですが http://www.tagindex.com/html_tag/table/td_span.html このＨＰでは <td colspan="3" rowspan="3">セルを結合します</td> と書いており、結合するセルの数という印象を受けました しかし、今回作って頂いたセルは 上下と左右に並んでる文字で、ある ＡＡＢＢの前と後ろに、全く同じセルの <td colspan="2">を入れてるだけ…しかし 結果としては、上記に書いた様に 上下の段で、上手く立てのセル枠がズレて入ってます この理由が分からないんですが どういう理由からですか？
補足
スイマセン…下記で成功と書きましたが 私の勘違いだったんで修正します 投稿時の私の書き方も悪かったんですが -------------------------------- |見出し|解説解説解説解説解説解説 -------------------------------- |見出し|画像|画像|画像 -------------------------------- こういう設定を考えてました そして見出しが太い文字です それで今回の応用で<table border=5><tr><th colspan="2">見出し</th></td><td>解説解説解説解説解説</td></tr><tr><th colspan="2">見出し</th><td>画像</td><td>画像</td><td>画像</td></tr></table> こう作ってみたんですが -------------------------------- |見出し|解説解説解説解説解説解説 -------------------------------- |見出し|画像 |画像|画像 -------------------------------- この様に、一番左の画像は問題無いんですが 次の画像からが、セルの一番右の 縦セル枠の外に来てしまうんです そして、見出し＆画像の上には 上記では、見出し＆解説が一段ですが 実際には現在、見出し＆解説の段が <table border=5><tr><td></td></tr>←この<td>の繰り返し(中略)</tr></table> の形で何段も出来ており、その下に１～３段位 見出し＆画像のセルを入れたいんです 従って、上のセルを、あまり変更せずに 下の画像セルを反映させられないだろうか？ と思ったんです
お礼
遅くなりましたが どうも有難う御座います