テーブルについて教えてください

2023/08/08 05:29

このQ&Aのポイント

HTMLのテーブルについての質問です。テーブルの作成方法や特徴などについて教えてください。
テーブルに縦割りの枠を追加する方法について教えてください。
別のテーブルを作らずに、既存のテーブルに縦割りの枠を追加する方法について教えてください。

ベストアンサー

テーブルについて教えてください

2008/08/17 15:24

テーブルについて教えてください <table border="1"> <tr> <th colspan="3">見出し</th> </tr> <tr> <th>1</th> <td rowspan="3">A</td> <td rowspan="3">B</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> </table> |---------------------| |------|---------------| |------|　　　　　　　　　　　　| |------|　　　　　　　　　　　　| |------|--------------| 絵が少しおかしいかも知れませんが・・・上の絵のような感じのテーブル枠になると思います下の絵のように上の物の一番下にもう一列、縦割していない物を追加したいのですが、どうすればいいでしょうか？別に新たにテーブルを作ると切れ目が出来てしまうのでできればそれは避けたいです |---------------------| |------|---------------| |------|　　　　　　　　　　　　| |------|　　　　　　　　　　　　| |------|--------------| |---------------------| よろしくお願いします

motikingyo
お礼率46% (106/226)

HTML
回答数1
ありがとう数4

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

pasocom
ベストアンサー率41% (3584/8637)

2008/08/17 15:29 回答No.1

<table border="1"> <tr> <th colspan="3">見出し</th> </tr> <tr> <th>1</th> <td rowspan="3">A</td> <td rowspan="3">B</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> <tr> <th colspan="3">おまけ</th> </tr> </table> でいいとおもいます。

質問者

お礼 2008/08/17 15:38

早急な回答ありがとうございました pasocomさんのおかげで解決いたしました

関連するQ&A

こういう構造のtableはできるでしょうか
HTML で、テーブルをこういう構造にすることは可能でしょうか。 ┏━━━━┳━━━━━━┳━━━━┳━━━┓ ┃見出し１┃○○○○○○┃見出し２┃○○○┃ ┣━━━━╋━━┳━━━┻━━━━╋━━━┫ ┃見出し３┃○○┃少し長い見出し４┃○○○┃ ┗━━━━┻━━┻━━━━━━━━┻━━━┛ ↓こんな感じでできないかなと思ったのですが、できませんでした。(win7/IE10) <table border="1"> 　<tr> 　　<th>見出し１</th><td colspan="2">○○○○○○</td> 　　<th>見出し２</th><td>○○○</td> 　</tr> 　<tr> 　　<th>見出し３</th><td>○○</td> 　　<th colspan="2">少し長い見出し４</th><td>○○○</td> 　</tr> </table> ※インデントは全角スペースになっています ---------- １）対象ブラウザは IE8～IE10 できればchrome等でも対応できたほうが良いのですが、最低限IEで表示できれば良いです。２) カラムの width 等を指定することなく左端や右端を揃えたいです。２の条件がなければ float とかも考えたのですが… どなたか良い方法をご存知の方がいらっしゃいましたら教えて下さい。よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
ＨＴＭＬ　複雑なテーブルの作成
今、ＨＴＭＬでテーブルを作成しています。よろしくお願いします。下記のHTMLでテーブルを作成し番号「１８」までは、うまくいきました。つぎに「１９」を作成しようとすると「９」のセル（rowspan="5"）が下に伸びて、「１９」に重なります。何か、解決の方法はありますでしょうか？ＣＳＳでborderやclassを使用していますが省略しています。また、widthも使用していますが省略しています。 <table cellspacing="7"> <tr> <th colspan="2">１</th> <th>２</th> <th>３</th> <th>４</th> <th>５</th> <th>６</th> 　　　　　　</tr> <tr> <td>７</td> <td>８</td> <td rowpan="5">９</td> <td>１０</td> <td>１１</td> <td>１２</td> <td>１３</td> </tr> <tr> <td colspan="2">１４</td> <td>１５</td> <td>１６</td> <td>１７</td> <td>１８</td> </tr> <tr> <td colspan="7">１９</td> </tr> </table>
- ベストアンサー
- CSS
スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、内側のテーブルとテーブルの間に破線をいれたいです。しかし、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
テーブルのレイアウトがおかしくなる
畏れ入ります。テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18"> </th> <th width="100"> </th> <th> </th> <th width="100"> </th> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3">   </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、ここにたくさんの文字列（半角30文字程度でおかしくなります）を投入すると、レイアウトが異常に崩れてしまいます。文字列は改行してもかまわないのですがテーブル1行目2行目のセルサイズ（width）がこのように変化してしまうと困るのです。どのようにしたら良いか（width=100の部分を守らせたい）教えてください。
- ベストアンサー
- HTML
[table] colspanについて
画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 4列目にセルが４つあるので、3列目のcolspanの指定をどのように記述すればいいのか不明で困っています。 ---------------------------------------------------- <table> <tr> <th></th> <th colspan="3"></th> </tr> <tr> <td></td> <td colspan="3"></td> </tr> ▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼ <tr> <td></td> <td></td> <td></td> </tr> ▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲ <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> ---------------------------------------------------- どなたか解決案をご存知の方、お教えいただけないでしょうか？ colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。よろしくお願い致します。
- ベストアンサー
- HTML
cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですがスタイルシートで行いたいです。そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、どのようにしたら良いのでしょうか？よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
4カラムのテーブルに絶対幅と相対幅の混在指定の可否
以下のHTMLで、１列目は20ピクセル（？）、２列目は100ピクセルに幅が固定されているとして、３～４列目、黄色と青のカラムの幅を均等に揃える方法はありませんか。３～４列目の幅を<col=50%>ととると、１～２列目の幅が侵食されて崩れます。ごらんのとおり、テーブル自体の幅は100%なので、モニタやブラウザの表示幅によってテーブル自体の幅も異なってくるため、 4カラムのテーブルのうち、１～２列目は絶対幅、３～４列目と相対幅と混在指定できればよいのですけど。 <html> <body> <table border=1 cellpadding=3 cellspacing=0 width=100%> <col width=20> <col width=100> <col> <col> <tr> <th rowspan=2 style="writing-mode: tb-rl;">基本情報</th> <th>プロジェクト</th> <td colspan=2>あいうえおあいうえおあいうえおあいうえお </tr> <tr> <th>概要</th> <td colspan=2>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <th colspan=2>コメント</th> <th bgcolor=yellow>当方から</th> <th bgcolor=blue>先方から</th> </tr> <tr> <th colspan=2>第1回会合</th> <td>◆ いいいいいいいいいいい<br>◆ うううううう</td> <td>◆ ええええええええええええええ<br>◆ おおおおおおおおおおおおおおおおおおおおおおおおおおおおお</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
HTMLのテーブルについて
HTMLのテーブルについて今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？教えてください☆
- ベストアンサー
- HTML