![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
現在FC2ブログを運営してるんですが
記事本文でセル用のタグを使用したいんで
その質問です
まず、今迄私はセル用のタグとしては
こいう反映を目的としてましたから
-----------------------------------
名前 名前
名前 名前
------------------------------------
このタグを使用して来ました
------------------------------------
<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>
この様に使用しました
ただ、上記のセルは等間隔だった場合に使用してたんですが
作ってる間にセルの感覚が
等間隔ではない状態が必要に、なりました
つまり、この様な感覚です
--------------------------------------
名前名前名前名前 名前名前名前名前
名前名前 名前名前 名前 名前
--------------------------------------
但し、上記では名前が横に連発してますが
実際には名前を続けて並べたい訳じゃなく
1つの短文と考えて下さい
それを表すのに、表現が見つからなかった為
今回は、名前の文字を並べた訳です
従って、上記の例えは
上の段が、左と右に、セルの枠を挟んで
8文字ずつ、短文が作られてる
そして、その下には
やはりセルの枠を挟んで左2つが4文字ずつの短文
右2つが2文字ずつの短文です
つまり、今迄と違い
セルの縦や横の枠の位置を自由に(?)変えられる…
そんなタグが知りたいと思いました
しかし、この反映を考えた場合
私の知識では、今迄触れたタグでは出来ません
それで、自分でも調べたんですが
このHP内の
http://www.tagindex.com/html_tag/table/th_scope. …
このタグしか無いのかも?とも思いました
尚下記タグの中で、太文字は必要ない為
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ベストアンサー
- 回答日時:
再び失礼します。
すみません、回答内容がずれていたようですね。つまり上部のタグをいじらずに、
[見出し][解説][見出し][解説](横並びに四列でいいんでしょうか?)
下部を、上部と横幅を揃えたい、という感じでしょうか。
[見出し][画像][画像][画像]
(1)
<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:◯◯;で設定したサイズに収まる程度で)
(2)
1つのテーブルに収める場合、やはり列数、<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
- 回答日時:
テーブルを作る時は、まず列数の最大値を決めて下さい。
この場合、「見出し」+「画像3」=4つのセルが、横に必要ですね。
1列目/ 2列目/3列目/4列目
[見出し1][解説]
[見出し2][画像1][画像2][画像3]
こうしてみると、一行目(2つ)と二行目(4つ)で、
列数が二つ違うのが分かりますね。
[画像1]は2列目なので、[解説]と同じ列です。
[画像2,3]は、3、4列目なので、[解説]とは違う列です。
その為、[解説]のセルより右になっているのです。
つまり、一行目にセルを増やせば良いんです。
といっても、新しく<td></td>を付け加える必要はありません。
既にある<td></td>の、セルの長さを二つ分追加します。
その為のタグがcolspanです。
セルが横に一つ分=colspan="1"
セルが縦に一つ分=rowspan="1"
通常のセルは、書かれてはいませんが、↑のようになっています。
なので、以下のように書きましょう。
<td colspan="3">
「セルの長さが、元の1つ+2つで、3つ分取りますよ」という意味です。
これで、見た目にはセルは一つですが、
そのセルは、他の行のセル三つ分と同じ扱いなのです。
或いは[画像]セル3つ分= colspan="3" という考え方でも構いません。
これで、一行目のセル数は[th(1)]+[td(3)]=「4つ」という扱いになり、
二行目とセル数が一致するようになりました。
<table border=5>
<tr>
<th>見出し1</th>
<td colspan="3">解説</td>
</tr>
<tr>
<th>見出し2</th>
<td>画像1</td>
<td>画像2</td>
<td>画像3</td>
</tr>
<table>
これでずれは無くなり、こうした表が作られます。
[見出し1][ 解説 ]
[見出し2][画像1][画像2][画像3]
さて、これらが縦に何段もあるんですよね?
[見出し1][ 解説 ]
[見出し1][ 解説 ]
[見出し1][ 解説 ]
[見出し1][ 解説 ]
[見出し2][画像1][画像2][画像3]
[見出し2][画像1][画像2][画像3]
[見出し2][画像1][画像2][画像3]
こうした表が作りたいならば、
単にそれぞれの<tr>~</tr>をコピペではり付けるだけで大丈夫です。
やはり、その方法しか無いでしょうか?
…と言うのが
申し訳ありません、その方法なら既に使用したんですが
上記でも書いた
「現在この上には既に、下記タグを何段も作ってる為
これを変更するのが大変です」
の意味なんですが
これが最初から
[見出し1][ 解説 ]
[見出し1][ 解説 ]
[見出し1][ 解説 ]
[見出し1][ 解説 ]
[見出し2][画像1][画像2][画像3]
[見出し2][画像1][画像2][画像3]
[見出し2][画像1][画像2][画像3]
の予定で作ってれば
見出し&解説の時に<td colspan="3">解説</td>
を入れて作ってたんですが
当初の予定は
[見出し1][ 解説 ]
これを上から下迄、続ける予定だったんです
それで、最初は
<table border=5>
<tr>
<th>名前</th><td>名前</td>
<th>名前</th><td>名前</td>
</tr></table>
で作ってました
しかし途中から画像入りを
急に入れる事に、なった為
このタグに合わせると、今迄作ったタグに対して
全て、これ<td colspan="3">解説</td>を
追加する事に、なる為
相当な時間が掛かる…それで他のタグ等を設定する方法で
何か無いかと思って質問した訳です
と、なると他の方法ではムリなんでしょうか?
No.3
- 回答日時:
回答に誤りがあったことをお詫びします。
<th>は<td>の変わりに使う、でした。
よって、書き方は間違っていませんね。
<th>を使う機会がなかったもので...失礼しました。
あと、ちょっと技巧的な方法ですが、横一列の書式を一気に設定するには、styleを使うといいですよ。
<tr style="font-weight:bold;">
<td>1</td>
<td>2</td>
</tr>
No.2
- 回答日時:
セルの結合に関しては、Excelを思い浮かべてみればわかりやすいでしょう。
どうテーブルを組めばいいのか判らなくなった場合は、Excelを起動して、複数のセルを選択して、「セルを結合して中央揃え」から、自分の作りたい表の概形を作ります。
すると、何行何列を確保すれば表がうまく作成できるかがわかります。
そして、それぞれのtdのcolspanやrowspanの合計値が一致するように作ればよいのです。(設定されていない場合はそれぞれ1です)
なお、複雑なテーブルを作るのがあまりにも大変な場合は、<td></td>の中に、新しくテーブルを作る方法があります。ただし、これをあまりやりすぎると、ブラウザに負担をかけてしまい、(極端な例ですが)10回ネスト(入れ子)にしたら、世代の古いマシンだと表示に一分以上かかることもあります。
ちなみに、<th>は<tr>の亜種で、
<table border=5><tr><th colspan="2">見出し</th></td><td>解説・・・
という使い方はしません。あくまで<tr>のかわりに使う、と覚えてください。
![「セルタグで分け方を変えたいです」の回答画像2](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/2/7199575_5497e30381a20/M.jpg)
回答有難う御座います
ただスイマセン…
私は普段、エクセルを使用する事が
全然と言って良い位ありません
従って、残念ながら今回御指摘の内容に関しては
ほとんど分からないんですが…
それで結論から言うと
私が希望してるタグはムリなんでしょうか?
No.1
- 回答日時:
セルの大きさを自由に変えたいのなら、中に何も書かれていない「幅を取るための<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 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>
の形で何段も出来ており、その下に1~3段位
見出し&画像のセルを入れたいんです
従って、上のセルを、あまり変更せずに
下の画像セルを反映させられないだろうか?
と思ったんです
回答有難う御座います
結論から言うと、一応反映しました
一応…と言うのは
まず、書いて頂いたセルの中で
<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.h …
このHPでは
<td colspan="3" rowspan="3">セルを結合します</td>
と書いており、結合するセルの数という印象を受けました
しかし、今回作って頂いたセルは
上下と左右に並んでる文字で、ある
AABBの前と後ろに、全く同じセルの
<td colspan="2">を入れてるだけ…しかし
結果としては、上記に書いた様に
上下の段で、上手く立てのセル枠がズレて入ってます
この理由が分からないんですが
どういう理由からですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- 工学 【制御工学】単位ステップ応答の遅れ時間の求め方(令和2年度の機械設計技術者試験(制御工学)の問題) 3 2022/11/02 10:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLのつくりにおいて
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
リンク先のURLを別の文字にする...
-
パワーポイント:テキストボッ...
-
Latexにおける下線のひき方のコト
-
HTMLのbody内に<style>~</styl...
-
Google Keepで数字に勝手に下線...
-
パワーポイントの見出しの線の...
-
seesaaブログのコメント欄を削...
-
AppleのNumbersというアプリで...
-
アンダースコア(下線)のあるメ...
-
Wordで作成した文章をコピーし...
-
PivotTableのデータソースを一...
-
outlook2003にて新規メッセージ...
-
EXCEL2003 Webページとして保存...
-
Googleアカウントの名前変更出...
-
画像ポップアップ(Lity)の使...
-
<input>タグについて
-
エクセルのセルの下線が消えない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ブログで画像を横に2つ並べる方法
-
画像の横に文章を入れたい
-
縦線
-
GOOブログで画像を二枚並べてお...
-
写真を横に並べる方法?CSSまた...
-
MovableType/画像のパス指定方法
-
楽天ブログ・日記の下に表示の...
-
2つ並べたランキングバナーの...
-
テーブルの横並び
-
画像を横に並べると隙間ができ...
-
画像に解説を入れて並べたいです
-
画像を二つ並べた時に左に余白...
-
【html】画像を横(縦)の長さ...
-
アフリエイト画像のすぐ横に文...
-
テーブルタグで画像を並べて画...
-
楽天ブログで画像を横並びにし...
-
ブログで画像の右(左)に文章...
-
ブログに貼り付けた画像の上に余白
-
FC2ブログへ罫線非表示の表を挿...
-
ブログ記事にリンクを貼る方法...
おすすめ情報