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

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

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

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

HTML

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

Q&A

解決済

1回答

7480閲覧

tableの表をうまく作りたい

aba623ky

総合スコア63

PHP

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

HTML

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

0グッド

0クリップ

投稿2016/09/11 09:59

以下のtableとそれに伴うcssを作りました。

php

1echo '<table border="1" class="a">'; 2 echo '<tr>'; 3 echo '<th>'; 4 echo '店名'; 5 echo '</th>'; 6 echo '<td>'; 7 echo 〇〇〇〇; 8 echo '</td>'; 9 echo '</tr>'; 10 echo '<tr>'; 11 echo '<th>'; 12 echo '住所'; 13 echo '</th>'; 14 echo '<td>'; 15 echo 東京都〇〇〇〇; 16 echo '</td>'; 17 echo '</tr>'; 18

css

1<style> 2table.a { 3 width:80%; 4border-collapse: collapse; 5 text-align: left; 6 line-height: 1.5; 7 border-top: 1px solid #ccc; 8 border-left: 3px solid #369; 9} 10</style> 11<style> 12table.a th { 13 width: 147px; 14 padding: 10px; 15 font-weight: bold; 16 vertical-align: top; 17 color: #153d73; 18 border-right: 1px solid #ccc; 19 border-bottom: 1px solid #ccc; 20</style> 21<style> 22table.a td { 23 width: 349px; 24 padding: 10px; 25 vertical-align: top; 26 border-right: 1px solid #ccc; 27 border-bottom: 1px solid #ccc; 28} 29</style> 30

tableの店名の上に写真を貼ろうと思ってますが、実際貼ってみたところおかしくなりました。

php

1echo '<tr>'; 2 echo '<td>'; 3 echo "<img src="" width=100 height=100 >"; 4 echo '</td>'; 5 echo '</tr>';

tableのthとtdの幅の長さが同じなりました。
thの幅を短く、tdの幅をを長くしたいのですが、写真を店名の上に貼ると急に変になります。
原因がなんだかわかりません。どうすれば直りますか?

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

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

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

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

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

yambejp

2016/09/11 14:31

クォーテーションがおかしいのはtypoだとして 2列のテーブルに1列のデータを書いたからでしょうか? 単にhtmlで書いてる検証してください
FKM

2016/09/12 04:03

CSSの閉じタグも変じゃないですか?
aba623ky

2016/09/12 04:05

そうなんですか。
FKM

2016/09/12 04:08

<style>タグ使うのは基本一回でいいですよ。複数書いても問題はありませんけど、冗長なだけです。そして、真ん中のCSSプロパティの閉じタグがないようですが。
aba623ky

2016/09/12 04:09

確認しました。 おっしゃる通りです。修正します。
guest

回答1

0

ベストアンサー

tableのthとtdの幅の長さが同じなりました。

tableはあくまで「表」です。なので、th(見出し)とtd(セル)は当然同じ幅になります。
<ここから削除>レイアウトにtable要素を使うのはやめておきましょう。</ここまで削除>

<table> - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

注意: CSS が作られる前、 HTML の <table> 要素はしばしば、ページレイアウトの方法として用いられました。この使い方は HTML 4 から推奨されておらず、 <table> 要素はレイアウト目的に使用されるべきではありません。


追記:

すいません、勘違いしていました。th がないから幅が広がります。また、「""」を入れ子にはできません。

PHP

1echo '<tr>'; 2echo '<th></th><td>'; // th要素追加 3echo '<img src="" width="100" height="100">'; // 修正済み 4echo '</td>'; 5echo '</tr>';

投稿2016/09/11 15:37

編集2016/09/11 15:42
kei344

総合スコア69364

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

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

aba623ky

2016/09/13 06:32

実行してみたところ、thの枠ができてしまいました。
kei344

2016/09/13 07:02

tableはあくまで「表」です。なので、枠ができます。
aba623ky

2016/09/13 07:14

画像のところのthの枠の部分だけ、消すことは可能ですか?
aba623ky

2016/09/13 07:22

コメントを間違えました。 thとtdを結合して一つのセルにすることは可能ですか?
kei344

2016/09/13 07:41

To: think49さん 補足ありがとうございます!
aba623ky

2016/09/14 07:24

colspan="2"とやったら、できました! think49さん、kei344さん、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問