セルタグで分け方を変えたいです

質問

現在ＦＣ２ブログを運営してるんですが
記事本文でセル用のタグを使用したいんで
その質問です

まず、今迄私はセル用のタグとしては
こいう反映を目的としてましたから

-----------------------------------
名前　名前

名前　名前
------------------------------------

このタグを使用して来ました

------------------------------------
<table border=0>
<tr>
<td>名前</td><td>名前</td>
<td>名前</td><td>名前</td>
</tr></table>
------------------------------------

要するにセル用でも、枠が付かない設定です
ただ、今回枠を付ける事情が出来た為

<table border=5>
<tr>
<td>名前</td><td>名前</td>
<td>名前</td><td>名前</td>
</tr></table>

この様に使用しました
ただ、上記のセルは等間隔だった場合に使用してたんですが
作ってる間にセルの感覚が
等間隔ではない状態が必要に、なりました

つまり、この様な感覚です

--------------------------------------
名前名前名前名前　名前名前名前名前

名前名前　名前名前　名前　名前　
--------------------------------------

但し、上記では名前が横に連発してますが
実際には名前を続けて並べたい訳じゃなく
１つの短文と考えて下さい
それを表すのに、表現が見つからなかった為
今回は、名前の文字を並べた訳です

従って、上記の例えは
上の段が、左と右に、セルの枠を挟んで
８文字ずつ、短文が作られてる

そして、その下には
やはりセルの枠を挟んで左２つが４文字ずつの短文
右２つが２文字ずつの短文です
つまり、今迄と違い
セルの縦や横の枠の位置を自由に(？)変えられる…
そんなタグが知りたいと思いました

しかし、この反映を考えた場合
私の知識では、今迄触れたタグでは出来ません
それで、自分でも調べたんですが
このＨＰ内の
http://www.tagindex.com/html_tag/table/th_scope.html
このタグしか無いのかも？とも思いました
尚下記タグの中で、太文字は必要ない為

thをtdに変えて

-----------------------------------
<table border="3">

<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td colspan="2" scope="colgroup">グループA</td>
<td colspan="2" scope="colgroup">グループB</td>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
<td>データセル4-1</td>
</tr>
</table>
-----------------------------------

です、但し問題なのは
現在この上には既に、下記タグを何段も作ってる為
これを変更するのが大変です
それで、他に良い方法は無いかと思い、質問しました

<table border=5>
<tr>
<td>名前</td><td>名前</td>
<td>名前</td><td>名前</td>
</tr></table>

回答No.5

syagain · ベストアンサー

再び失礼します。すみません、回答内容がずれていたようですね。
つまり上部のタグをいじらずに、
[見出し][解説][見出し][解説]（横並びに四列でいいんでしょうか？）

下部を、上部と横幅を揃えたい、という感じでしょうか。
[見出し][画像][画像][画像]

（１）
<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を設定しなければ、そのまま下記の表ができます。

[名前][名前　　　　　　]
[見出][画像／画像／画像]

こんな感じではいかがでしょうか？　また違ってたら済みません。

お礼

遅くなりましたが
どうも有難う御座います

回答No.4

syagain

テーブルを作る時は、まず列数の最大値を決めて下さい。
この場合、「見出し」+「画像３」＝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>を
追加する事に、なる為
相当な時間が掛かる…それで他のタグ等を設定する方法で
何か無いかと思って質問した訳です

と、なると他の方法ではムリなんでしょうか？

回答No.3

Erorin

回答に誤りがあったことをお詫びします。
<th>は<td>の変わりに使う、でした。
よって、書き方は間違っていませんね。

<th>を使う機会がなかったもので...失礼しました。
あと、ちょっと技巧的な方法ですが、横一列の書式を一気に設定するには、styleを使うといいですよ。

<tr style="font-weight:bold;">
<td>1</td>
<td>2</td>
</tr>

回答No.2

Erorin

セルの結合に関しては、Excelを思い浮かべてみればわかりやすいでしょう。
どうテーブルを組めばいいのか判らなくなった場合は、Excelを起動して、複数のセルを選択して、「セルを結合して中央揃え」から、自分の作りたい表の概形を作ります。
すると、何行何列を確保すれば表がうまく作成できるかがわかります。
そして、それぞれのtdのcolspanやrowspanの合計値が一致するように作ればよいのです。（設定されていない場合はそれぞれ１です）

なお、複雑なテーブルを作るのがあまりにも大変な場合は、<td></td>の中に、新しくテーブルを作る方法があります。ただし、これをあまりやりすぎると、ブラウザに負担をかけてしまい、（極端な例ですが）10回ネスト（入れ子）にしたら、世代の古いマシンだと表示に一分以上かかることもあります。

ちなみに、<th>は<tr>の亜種で、
<table border=5><tr><th colspan="2">見出し</th></td><td>解説・・・
という使い方はしません。あくまで<tr>のかわりに使う、と覚えてください。

お礼

回答有難う御座います

ただスイマセン…
私は普段、エクセルを使用する事が
全然と言って良い位ありません

従って、残念ながら今回御指摘の内容に関しては
ほとんど分からないんですが…
それで結論から言うと
私が希望してるタグはムリなんでしょうか？

回答No.1

Erorin

セルの大きさを自由に変えたいのなら、中に何も書かれていない「幅を取るための<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>
の形で何段も出来ており、その下に１～３段位
見出し＆画像のセルを入れたいんです

従って、上のセルを、あまり変更せずに
下の画像セルを反映させられないだろうか？
と思ったんです