dポイントプレゼントキャンペーン実施中！

HTMLのテーブルでそれぞれの大きさが違う場合

解決済

  • 質問者：syuwaruz
  • 質問日時：
  • 回答数：6件

HTMLで色々テーブルなど作ってみているのですが
どのように記述したらいいのか分からなくなってしまったのでご存知でしたら教えてください。

画像を貼りその右側に一文を添えています
それが何段もあります。
画像の幅が同じ場合は分かったのですが、
画像の幅が変わった時に文章の始点を変える方法が（2）のような感じにする方法分かりません。
教えてください。


(1)画像が同じ大きさの場合（できました）
画像　文章
画像　文章
画像　文章

(2)画像の大きさは違い文章の始点も変わる
画像画像　文章
画像　文章
画像画像画像　文章

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

No.2です。


＞テーブルタグを使ったらイメージしていた方法に近づけるのではないかと思ってテーブルで表という表現を使いました。

　初学者でしたら、HTMLの基本、「HTMLは文書構造をマークアップするもの、スタイルシートはプレゼンテーションを指定するもの」を、徹底的に叩き込んでおいてください。
★2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★2.3.5 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★11.1 表の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　デザインするために、HTMLがあるのじゃない!!
　　私も１０年前はデザインのために使ってました。

　本題ですが、色々なサイズの写真を並べると実際のところ、とても見難いものになるので、通常は極力画像サイズを統一します(特に横幅は)から、「画像の幅が変わった時に文章の始点を変える方法が・・・」が起きないようにします。ですから、この様な難題に遭遇することは通常はありません。

　しかし、出来ないわけではありません。IEなら、IE8以降および他のウェブ標準のブラウザでしたら、下記のようなシンプルなHTMLでできます。古いブラウザは対応していませんが、文書構造さえしっかりしていれば、できると言うことの見本として示しておきます。
　いきなり、ここまでは難しいと思いますが、文書構造でHTMLをマークアップする意味はよくわかると思います。何年もして振り返ってみても、あるいは人が書いたものでも、そして検索エンジンも、このHTMLならなにを書いたか理解できるでしょう。

<div class="album">
　<h2>汎用ブロックでマークアップ</h2>
　<div>
　　<h3><img src="./images/sample1.jpg" width="240" height="169" alt="萩"></h3>
　　<div class="explanation"><!-- 説明(explanation) -->
　　　<p>画像の説明が入ります。</p>
　　</div>
　</div>
　<div>
　　<h3><img src="./images/sample1_s.jpg" width="48" height="33" alt="尾花"></h3>
　　<div class="explanation">
　　　<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
　　　<p>ここに画像の説明が入ります。その説明は、このように画像に比べてとても長い場合もあります。</p>
　　　<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
　　</div>
　</div>
　<div>
　　<h3><img src="./images/topBis.png" width="200" height="150" alt="葛花"></h3>
　　<div class="explanation">
　　　<p>ときには、この文章のように、画像のとってもとっても長い説明が続く場合があります。</p>
　　　<p>IE5.5以前は、センターによらない。</p>
　　　<p>IE7以前は、floatとして処理されるので長い文章が画像の下に回りこむ</p>
　　　<p>IE8以降などウェブ標準ブラウザだと、一つ一つのテーブルとして表示される。</p>
　　</div>
　</div>
</div>

[実物]HTML4.01strictです。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で、検証済みです。

※なお、タブは＿に置換してあります。戻してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
div.album{width:60%;margin:0 auto;background-color:silver;}
div.album p{margin:0 1em;line-height:1.6em;text-indent:1em;}
div.album div,div.album hr{clear:left;}/* IE6以前 */
div.album hr{visibility:hidden;}/* IE6以前 */
div.album div div{clear:none;}/* IE6以前 */
div.album div h3 img{float:left;margin:5px 10px}
div.album div{display:table;}
div.album div h2,div.album div div{display:table-cell;background-color:rgb(200,200,200);vertical-align:top;}
div.album div div{padding-top:1em;}
-->
＿</style>
</head>
<body>
＿<h1>サンプル</h1>
＿<div class="album">
＿＿<h2>汎用ブロックでマークアップ</h2>
＿＿<div>
＿＿＿<h3><img src="./images/sample1.jpg" width="240" height="169" alt="萩"></h3>
＿＿＿<div class="explanation"><!-- 説明(explanation) -->
＿＿＿＿<p>秋の七草の筆頭に・・</p>
＿＿＿</div>
＿＿</div>
＿＿<div>
＿＿＿<h3><img src="./images/sample1_s.jpg" width="48" height="33" alt="尾花"></h3>
＿＿＿<div class="explanation">
＿＿＿＿<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
＿＿＿＿<p>ここに画像の説明が入ります。その説明は、このように画像に比べてとても長い場合もあります。</p>
＿＿＿＿<p>ここに画像の説明が入ります。画像に比べてとても長い場合もあります。</p>
＿＿＿</div>
＿＿</div>
＿＿<div>
＿＿＿<h3><img src="./images/topBis.png" width="200" height="150" alt="葛花"></h3>
＿＿＿<div class="explanation">
＿＿＿＿<p>ときには、この文章のように、画像のとってもとっても長い説明が続く場合があります。</p>
＿＿＿＿<p>IE5.5以前は、センターによらない。</p>
＿＿＿＿<p>IE7以前は、floatとして処理されるので長い文章が画像の下に回りこむ</p>
＿＿＿＿<p>IE8以降などウェブ標準ブラウザだと、一つ一つのテーブルとして表示される。</p>
＿＿＿</div>
＿＿</div>
＿＿<hr>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： taloo
  • 回答日時：

HTMLを変えていいならこれでもできますが。



<table>
<tbody>
<tr><td><img src="" align="left">あいうえお</td></tr>
<tr><td><img src="" align="left">かきくけこ</td></tr>
<tr><td><img src="" align="left">さしすせそ</td></tr>
</tbody>
</table>

なぜ同じデザインになるものに、たくさんの書き方があるのかというと、
HTMLタグにそれぞれ意味があるからです。
HTMLを勉強すれば、その意味は必ず勉強の範疇に入るはずですので、わざわざ言う必要はないと思うのですが、、、
タグ辞典を読んでください。全部、意味が書いてあります。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： DrFell
  • 回答日時：

おっしゃっているのは、表ではない気もしますが、表現したいことはsyuwaruz さんにしかわからないので、表でも表現してみました。



●まずは表で
左右のn個をくっつけるにはcolspanを使います。
上下のn個をくっつけるにはrowspanを使います。例ではcolspan="2"、rowspan="2"としていますが、3でも4でも好きなだけ結合させてください。


<table>
<tr>
<th>時間</th>
<th>5時00分～12時00分</th>
<th>12時00分～18時00分</th>
<th>18時00分～25時00分</th>
<th>01時00分～5時00分</th>
</tr>
<tr>
<th>赤いステッカーの車両</th>
<td colspan="2">女性専用車</td>
<td>男女共ご利用いただけます</td>
<td rowspan="2">どなたもご利用になれません</td>
</tr>
<tr>
<th>黄色いステッカーの車両</th>
<td>小学生のみご利用いただけます</td>
<td colspan="2">制服着用の方のみご利用いただけます</td>
</tr>
<tr>
<th>青いステッカーの車両</th>
<td colspan="2">どなたでもご乗車いただけます</td>
<td>男性専用車</td>
<td>どなたでもお泊りになります</td>
</tr>
</table>

見にくい場合は</head>を

<style type="text/css">
table{border-collapse:collapse;border:solid #000 2px;}
td,th{border:solid #000 2px;text-align:center;}
th{background:#aaaaaa;}
</style>
</head>
としてみてください。表にスタイルシートを使ってデザインをつけました。

●表ではなくデザインとして画像横に文章をつける方法
【1】
<p>画像画像文章</p>
ではだめなの？表にしなければ、そのまま成り行き、画像はおおきな文字のように扱われると思います。そのまま並びませんか？

【2】
<div><p>画像画像</p><p>文章</p><div>
<div><p>画像</p><p>文章</p><div>
<div><p>画像画像画像</p><p>文章</p><div>
画像の役割がわからなかったので、段落である<p>としています。画像の段落と文章の段落を意味を持たないdivでまとめます。1まとまりとセットにすることで、他とわけます。

画像は、お好きな<img ～>にしてください。
そしてスタイルシートです。先ほどと同じ場所に入れてください。
<style type="text/css">
p{display:inline;padding:10px;}
</style>
</head>

【2’】
htmlは2と同じ。</head>を

<style type="text/css">
div{clear:left;}
p{float:left;padding:10px;}
</style>
</head>

以上4つの方法のソースでした。スタイルシートを学べば表現力がアップします。今回はわざと、現実の使用には耐えないかもしれないデザインにしています。今、出されている場所にはよくなっても、他の場所がおかしくなることが予想されますので、その時は、ご自分でｃｓｓ（スタイルシート）の基本や、局所化（クラス等）を学ばれるといいと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
色々な表現方法があるんですね。
表として使うというよりはレイアウトとしての枠？のような感じでテーブルを使ってました。

画像の隣に画像の説明文のようなモノを配置しようと思ってやっていたのですが、
画像の大きさが違うものになると横の文章との間隔が見栄えがヘンになるかなと思ってくっつけられたらどうなるのかなと思ったのです。

【1】ですが、一番簡単な方法ですが、元々テーブルでやっていたので全く思いつきませんでした。
その他の方法も出来ますね。こんなにも種類あるんですね。
スタイルシートなども勉強したいと思います。

通報する
お礼日時：2011/10/15 21:56

No.3

  • 回答者： taloo
  • 回答日時：

見た目の調整はスタイルシート（CSS）を使用してください。



画像ではありませんが、以下のコードで(2)のようになりました。
DOCTYPEはXHTML1.0 Transitionalを指定しています。
WindowsXP、Safari5.1、IE8で確認しましたが、新しめのブラウザでないと、(1)のように表示されるかもしれません。

<style>
tr{
clear: left;
}
th, td{
display: block;
float: left;
width: auto; /* tdタグ属性などでwidthを指定してなければ消しても良いと思います */
height: auto;/* 横並びに直接関係ありませんので消しても良いと思います*/
}
</style>

<table>
<tbody>
<tr><th>アイウエオアイウエオ</th><td>あいうえお</td></tr>
<tr><th>カキクケコ</th><td>かきくけこ</td></tr>
<tr><th>サシスセソサシスセソサシスセソ</th><td>さしすせそ</td></tr>
</tbody>
</table>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
その記述でできるようです。
見れたり見れなかったり色々状況に変化が出てきてしまう可能性があるのですね。勉強になります。

通報する
お礼日時：2011/10/15 21:43

No.2

  • 回答者： ORUKA1951
  • 回答日時：

それは表ですか？


★単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
の周辺をお読みください。

　ただ、tableを二重に入れ子にすれば出来ますが、上記の理由でなしとすると、その画像と説明が何であるかという文書構造に従ったマークアップをしてスタイルシートでデザインします。

　
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
一般的な表というよりもレイアウトでこうしたら出来るのではないかと試行錯誤の中で
テーブルタグを使ったらイメージしていた方法に近づけるのではないかと思ってテーブルで表という表現を使いました。
ですが、レイアウトのためには使うべきでは無いんですね。
HTMLをやっと覚え始めたばかりですがスタイルシートも勉強してみたいと思います。

通報する
お礼日時：2011/10/15 21:23

No.1

テーブルのborderが


┏━━┳┓
┣━┳┻┫
┣━┻┳┫
┗━━┻┛
こんなんなるのを求めてるのだとしたら、まっとうなHTMLじゃ無理です。
その配置ならひとつのセルに画像も文章も入れるとか、違う方法でやってください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
まっとうな方法では無かったのですね。
一つのセルに画像、一つのセルに文章で分ければ可能なのでしょうか？

通報する
お礼日時：2011/10/15 21:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報