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

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

ただいまの
回答率

90.23%

HTML,CSS 表 テーブルの中のデータの配置(右揃え、中央揃え)

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 10K+

01temp

score 15

表のテーブルデータの中の文字の配置を右そろえや、下揃えにしたいです。
「下揃え」と買いているところと、右寄せとk描いているところを移動させたいのですが、align="right"やvalign="bottom"を使ってもなりません。どうしてでしょうか。

コード

                <table rules="all" frame="border">
                    <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" name="テキスト" />
                        <td align="right">
                            <p>右寄せ。「いいえ」を無効化</p>
                            <input type="radio" name="選択" value="はい" /> はい
                            <input type="radio" name="選択" value="いいえ" disabled /> いいえ
                        <input type="radio" name="選択" value="どちらでもない" />どちらでもない
                        </td>
                        <td>
                            <p color:black;><span style="color:black;">「その2」と「その4」を無効化。</span>中線を追加</p><!---_spanタグでそこの部分だけ色を変える。_--->
                            <hr><!---_ 線を追加 _--->
                            <input type="checkbox" name="選択したもの" value="その1" /> その1
                            <input type="checkbox" name="選択したもの" value="その2" disabled/> その2
                            <input type="checkbox" name="選択したもの" value="その3" /> その3
                            <input type="checkbox" name="選択したもの" value="その4" disabled/> その4
                            <input type="checkbox" name="選択したもの" value="その5"> その5
                        </td>
                        <td valign="bottom">
                            <p>選択肢の3番目を初期設定にする。下揃え</p>
                            <select name="選択肢を選んでください。" name="選択肢"><!---_ selectでスクロール選択のもの _--->
                                <option>選択肢のサンプル1</option>
                            <option>選択肢のサンプル2</option>
                            <option selected="selected" style="color:red;">選択肢のサンプル3</option>
                            </select>
                        </td>
                        <td>
                            <input type="file" name="imagedata" size="30" ><!---_ ファイル参照フォルダ _--->
                        </td>
                    </tr>
                </table>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+6

① 右寄せ
<td align="right">

<td style="text-align:right;">

②下揃え
<td valign="bottom">

<td style="vertical-align:bottom;">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+6

どうもこんにちは。
今回は、質問者さんがHTML5を使っていることを前提に回答させていただきます。

ここから回答

align="right"やvalign="bottom"を使ってもなりません。どうしてでしょうか

HTML5では、align属性や、valign属性は廃止されました。
そのため、水平方向、垂直方向の揃え方はCSSで行うことが必要になりました。
水平方向の揃え方を指定するときはtext-alignプロパティ、垂直方向の揃え方を指定するときはvertical-alignプロパティを使います。

水平方向での揃え方の指定はこのようにできます。

<table>
    <tr>
        <td class="left">左揃え</td>
        <td class="center">中央揃え</td>
        <td class="right">右揃え</td>
    </tr>
</table>
.left{
  text-align: left;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}


また、垂直方向での揃え方の指定は、以下のようにできます。

<table>
    <tr>
        <td class="top">上揃え</td>
        <td class="middle">中央揃え</td>
        <td class="bottom">下揃え</td>
    </tr>
</table>
.top{
  vertical-align: top;
}
.middle{
  vertical-align: middle;
}
.bottom{
  vertical-align: bottom;
}


また、text-alignプロパティが適用されるのはインライン要素のみで、vertical-alignプロパティが適用されるのはインライン要素とテーブルセルのみであることに注意してください。
以上、ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる