- ベストアンサー
セルタグで分け方を変えたいです
syagainの回答
- 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>をコピペではり付けるだけで大丈夫です。
関連するQ&A
- JSFタグ<h:dataTable>でヘッダのcolspan
お世話になります。 JSFの<h:dataTable>で、ヘッダをcolspanで結合する方法、さらにヘッダを2行にしたいのですが、可能でしょうか？ 以下のようなhtmlを生成したいのです。 <table border="1"> <thead> <tr> <th colspan="2" scope="colgroup">May</th> <th colspan="2" scope="colgroup">June</th> </tr> <tr> <th>name</th> <th>flag</th> <th>name</th> <th>flag</th> </tr> </thead> <tbody> <tr> <td>5A</td> <td>B</td> <td>6A</td> <td>D</td> </tr> <tr> <td>7B</td> <td>B</td> </tr> </tbody> </table> テーブル要素をカラム単位<h:column>で管理するので、このようなことはできないような気がしていますが、なにか方法ありませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- Java
- テーブルでセルの枠線を消す(CSS)
表をつくり、下記の方法でセルの枠線を消しています。 <html> <head> <style type="text/css"> <!-- td{border-color:black;} --> </style> </head> <table border> <colgroup span=2 width=50></colgroup> <tr> <td>a</td> <td style={border-style:none;}>aa</td> </tr> <tr> <td>b</td> <td>bb</td> </tr> </table> </html> セルのタグ<td>内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、 先頭で設定するスタイルシートで<td>のボーダー設定をすると何故か消す事が出来ました。 なぜ<td>内の設定だけで消えないのか理由が分かる方、説明お願いします。
- ベストアンサー
- HTML
- colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML
- スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか？ <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }
- ベストアンサー
- HTML
- テーブルタグ表示が上手くいかない（html・CSS
下のタグを使うと、ブログに下記画像上部のように表示されているのですが 理想としては画像の下部分のように綺麗に表示したいです。 自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい ムキー！っとなってます。 大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。 何卒お願いします。 画像内のピンクの部分は実際には<img src="で指定された画像になります。 使ったタグ <table border="1"> <td><table id="table-03"> <colgroup> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV>
- ベストアンサー
- ブログ
- htmlを使って表を作っています
自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか？わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか？ 練習問題と自分が作ったソース載せます。 <html> <h4><b>１問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">～</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 ＜第一問：幅400、高さ400、上のセルの数が２つ、下のセルの数が２つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。＞ どうですか？うまく表示されましたか？ レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">～</table> ・<tr bgcolor="★">～</tr> ・<td bgcolor="★">～</td> ★には色指定値(例：#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列（一行）に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 ＜第二問：幅50、高さ50、１つのセルのテーブル全体の背景を赤くしてみましょう。 赤→#ff0000＞ ＜第三問：幅150、高さ100、上のセルを３つ、下のセルを３つのテーブルを作り、 上３つのセルの背景を青くしてみましょう。 青→#0000ff＞ ＜第四問：幅100、高さ100、上のセルを２つ、下のセルを２つのテーブルを作り、 左上のセルの背景を緑にしてみましょう。 緑→自分で見つけて下さい＞
- 締切済み
- ホームページ作成ソフト
- <table>の colspanについて
<table border=1> <tr><td colspan=2>aaaaaaaaaaaaaaaaa</td></tr> <tr><td colspan=2>aaaaaaaaaaaaaaaaaa</td></tr> <tr><td>aa</td><td>bb</td></tr> <tr><td colspan=2>aaaaaaaaaaaaaaaaaaaaaaaa</td></tr> </table> の３行目の（分割している）２つのセルの幅を自由に設定したいのですが、width=10%などといれてもうんともすんともしません。なにかいい方法ありますか？
- ベストアンサー
- HTML
- ホームページビルダーで右端のセルが狭くなります。
ホームページビルダーで右端のセルが狭くなります。 現在ホームページビルダーの教科書を見ながら勉強しているのですが、教科書が用意しているファイルをビルダーで開くと右端のセルだけが狭くなります。 ちなみにブラウザ（IE）で開くと問題ありません。 これは何が原因でしょうか？編集しにくいので教えてください。 ちなみにソースは以下の感じです。（BODY以下） 念のため画像も添付します。 <BODY text=#000000 vLink=#808080 aLink=#ff8040 link=#ff3535 bgColor=#333333> <CENTER> <TABLE cellPadding=3 width=650 bgColor=#ffffff> <COLGROUP> <COL> <COL width=220> <TBODY> <TR> <TD vAlign=top rowSpan=11><IMG height="400" alt="代替テキスト１" src="xxx.gif" width="120" border="0"></TD> <TD colSpan=2><IMG height="150" alt="代替テキスト２" src="xxx.jpg" width="520" border="0"></TD></TR> <TR> <TD colSpan=2> <UL> <LI></LI> </UL> </TD></TR> <TR> <TD colSpan=2><IMG alt="代替テキスト" src="iｘｘｘ.gif" border="0"></TD></TR> <TR> <TD><IMG height="180" alt="代替テキスト" src="ｘｘｘｘ.jpg" width="140" border="0"></TD> <TD vAlign=top><FONT size=-1>長いテキスト文<BR><BR>このページの先頭へ</FONT></TD></TR> <TR> <TD colSpan=2></TD></TR> <TR> <TD></TD> <TD vAlign=top></TD></TR> <TR> <TD colSpan=2></TD></TR> <TR> <TD></TD> <TD vAlign=top></TD></TR> <TR> <TD colSpan=2></TD></TR> <TR> <TD></TD> <TD vAlign=top></TD></TR> <TR> <TD align="center" colSpan=2></TD></TR></TBODY></TABLE></CENTER></BODY></HTML> ちなみにCOLGROUPとCOLの使い方もよくわかりません。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 次のテーブルのセル内文字を小さく
したいのですがセル内文字ごとに<h7></h7>を付けると文字は小さくなるもののセルの高さがむしろ高くなり文字が上に貼りついてしまいます セルの高さも同じように文字にあわせて小さくできるような設定はあるでしょうか? <table border=1 cellspacing=0 cellpadding=0> <caption align=left> <nobr>あいうえおかきくけこ<nobr/> </caption> <tr><td colspan=3>abc</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td colspan=3 height=15></td></tr> </table>
- ベストアンサー
- HTML
- 【IE6】テーブルにcolspanが入ると幅指定がずれる？
閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列：（各列100pxの5等分） 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目：100px ├2-3列目：100+100＝200px (colspan=2) ├4-5列目：100+100＝200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか？ 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- １行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- ２行目 --> <tr> <!-- １列目 --> <td> </td> <!-- ２-３列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">２列にしたい</option> </select> </td> <!-- ４-５列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>
- 締切済み
- HTML
お礼
やはり、その方法しか無いでしょうか？ …と言うのが 申し訳ありません、その方法なら既に使用したんですが 上記でも書いた 「現在この上には既に、下記タグを何段も作ってる為 これを変更するのが大変です」 の意味なんですが これが最初から [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し１][ 解説 ] [見出し２][画像１][画像２][画像３] [見出し２][画像１][画像２][画像３] [見出し２][画像１][画像２][画像３] の予定で作ってれば 見出し＆解説の時に<td colspan="3">解説</td> を入れて作ってたんですが 当初の予定は [見出し１][ 解説 ] これを上から下迄、続ける予定だったんです それで、最初は <table border=5> <tr> <th>名前</th><td>名前</td> <th>名前</th><td>名前</td> </tr></table> で作ってました しかし途中から画像入りを 急に入れる事に、なった為 このタグに合わせると、今迄作ったタグに対して 全て、これ<td colspan="3">解説</td>を 追加する事に、なる為 相当な時間が掛かる…それで他のタグ等を設定する方法で 何か無いかと思って質問した訳です と、なると他の方法ではムリなんでしょうか？