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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

2回答

769閲覧

table 表を作成したい

free_teku

総合スコア103

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2021/08/11 05:04

編集2021/08/11 08:26

前提・実現したいこと

表題の通り、横向きの表を作成したいです。
完成図

現状は枠で囲まれていません→解決したい
現状

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

1 <section class="price"> 2 <p class="jp-ttl">価格</p><!-- /.jp-ttl --> 3 <p class="en-ttl">price</p><!-- /.en-ttl --> 4 5 <table> 6 7 <tr class="tb-pc_row"> 8 <th class="tb-pc_header">HTMLコーディングトップページ</th><!-- /.tb-pc_header --> 9 <td class="tb-pc_text">30.000~</td><!-- /.tb-pc_text --> 10 </tr><!-- /.tb-pc_row --> 11 <tr class="tb-pc_row"> 12 <th class="tb-pc_header">HTMLコーディングトップページ</th><!-- /.tb-pc_header --> 13 <td class="tb-pc_text">30.000~</td><!-- /.tb-pc_text --> 14 </tr><!-- /.tb-pc_row --> 15 <tr class="tb-pc_row"> 16 <th class="tb-pc_header">HTMLコーディングトップページ</th><!-- /.tb-pc_header --> 17 <td class="tb-pc_text">30.000~</td><!-- /.tb-pc_text --> 18 </tr><!-- /.tb-pc_row --> 19 <tr class="tb-pc_row"> 20 <th class="tb-pc_header">HTMLコーディングトップページ</th><!-- /.tb-pc_header --> 21 <td class="tb-pc_text">30.000~</td><!-- /.tb-pc_text --> 22 </tr><!-- /.tb-pc_row --> 23 24 </table> 25 <!--<form action="" class="form"></form><!-- /.form --> 26 27 </section><!-- /.price -->

SASS

1.price{ 2 background-color: #EEFBFB; 3 width: 1365px; 4 height: 745px; 5 6} 7 8.tb-pc{ 9 width: 100%; 10 box-shadow: 0px 3px 6px #00000029; 11 background-color: #fff; 12 border-collapse: collapse; 13 14 .tbody{ 15 16 .tb-pc_row{ 17 .tb-pc_header{ 18 width: 30%; 19 padding: 30px; 20 min-width: 300px; 21 border: 1px solid #f0eded; 22 } 23 24 .tb-pc_text{ 25 width: 70%; 26 text-align: left; 27 padding: 30px; 28 border: 1px solid #f0eded; 29 font-weight: bold; 30 } 31 } 32 33 } 34}

※CSSはまだ途中です。確認しながら、進めているためです。

試したこと

tableタグについて調べました。今回は、テーブルが行の構成なので
theadタグはいらないのか、と解釈しました。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2021/08/11 05:09

何があなたの問題・課題なのでしょうか?
free_teku

2021/08/11 06:27

tableタグを使って、表を作成したいのですが、票の図にならないため 質問しました
guest

回答2

0

自己解決

解決できました。よく見なおしたら、できました

投稿2021/08/11 15:01

free_teku

総合スコア103

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

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

0

CSSの書き方を勘違いされています。CSSは質問にあるような入れ子書式をサポートしていません。
SASSというのを使うと近い書き方が出来るようですが、これはウェブブラウザが直接理解できるものではありません。コンパイルという作業を行ってCSSに変換して使うものです。

Sassの利用環境を構築しよう!gulpを使ってCSSにコンパイルする手順を解説 : ビジネスとIT活用に役立つ情報

【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう!書き方と利点を解説! : ビジネスとIT活用に役立つ情報

投稿2021/08/11 07:19

KojiDoi

総合スコア13692

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

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

free_teku

2021/08/11 08:27

sassで作成したものです。私の不注意でcssとしてしまいました????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問