質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2458閲覧

TABLEを横並びで表示する際、<TR>の数が違っていても上側で揃えたい。

siguma

総合スコア14

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/02/28 09:17

phpのプログラムを絡めて、HTML出力しようとしています。
その際、以下のようなHTMLを出力したとします。

この場合、TDの数の違いでテーブルがずれて表示されてしまいます。
上側でそろえて表示したいのですが方法等ございますでしょうか?

お答えアドバイスの程宜しくお願い致します。

イメージ説明

html

1<div> 2<TABLE> 3<TR> 4<TD> 5<table class="task_conf"> 6<tr> 7<th class="col_1" colspan="3">内容</th> 8</tr> 9<tr> 10<th class="col_1">1</th> 11<th class="col_2">2</th> 12<th class="col_3">3</th> 13</tr> 14<tr> 15<td class="col_1">テスト1</td> 16<td class="col_2">テスト2</td> 17<td class="col_3">テスト3</td> 18</tr> 19</table> 20</TD> 21<TD> 22<table class="task_conf"> 23<tr> 24<th class="col_4" colspan="3">内容</th> 25</tr> 26<tr> 27<th class="col_4">1</th> 28<th class="col_5">2</th> 29<th class="col_6">3</th> 30</tr> 31<tr> 32<td class="col_4"> - </td> 33<td class="col_5"> - </td> 34<td class="col_6"></td> 35</tr> 36<tr> 37<td class="col_4"> - </td> 38<td class="col_5"> - </td> 39<td class="col_6"></td> 40</tr> 41<tr> 42<td class="col_4"> - </td> 43<td class="col_5"> - </td> 44<td class="col_6"></td> 45</tr> 46<tr> 47<td class="col_4"> - </td> 48<td class="col_5"> - </td> 49<td class="col_6"></td> 50</tr> 51</table> 52</TD> 53</TR> 54</TABLE> 55</div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

一番外にあるテーブルのtdに下記style追加しましょう

css

1vertical-align: top;

もっとも、レイアウトはflex-boxでやると綺麗ですよ!

投稿2017/02/28 09:36

Everatch

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siguma

2017/03/01 08:16

皆様お答えありがとうございました。 スマートに思い通りの結果を得ることができました。 ありがとうございます。
guest

0

テーブルの入れ子ですか?
あまりお勧めしませんが、一番単純なのは

<TD valign="top">

投稿2017/02/28 09:35

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

左側のtableを含むTDに、上揃え(valign="top")の属性をつければ解決します。

左右のtableの高さが変更される可能性がある場合には、両方のTDタグに上揃えの属性をつけてください。そうすれば、どちらのテーブルが高くても上揃えになります。

質問のHTMLを修正したHTMLは、以下のようになります。(質問のHTMLはべた打ちで読みにくいので、インデントを付けてあります)

<div> <TABLE> <TR> <!-- 次のTDタグに、上揃えの属性を付けました --> <TD valign="top"> <table class="task_conf"> <tr> <th class="col_1" colspan="3">内容 </th> </tr> <tr> <th class="col_1">1 </th> <th class="col_2">2 </th> <th class="col_3">3 </th> </tr> <tr> <td class="col_1">テスト1 </td> <td class="col_2">テスト2 </td> <td class="col_3">テスト3 </td> </tr> </table> </TD> <TD> <table class="task_conf"> <tr> <th class="col_4" colspan="3">内容 </th> </tr> <tr> <th class="col_4">1 </th> <th class="col_5">2 </th> <th class="col_6">3 </th> </tr> <tr> <td class="col_4"> - </td> <td class="col_5"> - </td> <td class="col_6"> </td> </tr> <tr> <td class="col_4"> - </td> <td class="col_5"> - </td> <td class="col_6"> </td> </tr> <tr> <td class="col_4"> - </td> <td class="col_5"> - </td> <td class="col_6"> </td> </tr> <tr> <td class="col_4"> - </td> <td class="col_5"> - </td> <td class="col_6"> </td> </tr> </table> </TD> </TR> </TABLE> </div>

投稿2017/02/28 09:46

coco_bauer

総合スコア6915

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問