HTMLテーブルのレイアウト[宿題]

Question

私は学校の宿題のためのウェブページを作成する必要があります。そのページでは、テーブルを使用してフロアプランを作成しなければなりません。また、ユーザーが部屋の名前をクリックすると、その部屋について開く必要があります。

は、私は各部屋の質量と、このPDFファイルを持って（申し訳ありません、それはドイツ語です）：

https://www.docdroid.net/zd7QMku/grundriss.pdf.html

問題は、私もどのように多くの行を知っているとしていないということです列が必要です。手伝って頂けますか？

Answer 1

手順をもう一度見直してください。ステップ1は、それぞれが （ポイントe）の1つの行と2つの列を持つ表から始まります。その後、各ステップごとに新しいテーブルを作成します（ポイントdとf）。いいえ、命令の各ステップを繰り返し、ポイントd〜fを繰り返します。ステップ2は、左側のセルに3行3列のテーブルを作成することです。今度は残りの手順を完了できるはずです。

宿題を向上させるために、私から次の追加の考えを検討してください：

1）レイアウトにテーブルを使用すると、悪いです。表は表形式のデータ用です。もちろん、宿題は明示的にテーブルを使用するように指示しますが、より良い選択肢はFlexboxです。たぶん、最良の選択肢（それは絵です）は、これらの目的のために特別に作られたSVGを使うことでしょう。

2）インラインスタイルは避けてください。特に、bordercolordark = "＃000000"のような "古い"属性。代わりにcss to style your tablesを使用してください。特定のテーブル/セルを異なるスタイルにする必要がある場合は、ID（単一の要素にのみ使用可能）またはクラス（類似の属性を持つ複数の要素（グループ）に使用することができます）を使用します。

CSS：

table{ 
    border:1px solid #000000; 
} 

HTML：

<table id="this-is-an-id"> 
    <tr class="className1 className2"> 
    <td></td> 
    </tr> 
    <tr> 
    <td class="className1 differentClassName"></td> 
    </tr> 
</table> 

残念ながら、教師は頻繁に彼らの知識では非常に古くなっているので、私はあなたに言ったことを先生に伝えること自由に感じたり、この答えにそれらを参照してください。 、彼らは将来この宿題を更新することができます。ただ、完全性のために

は、ここでは、半フレックスボックスバージョンであることが非常に簡単にこの方法を用いて達成することができるであることを示すために：

div{box-sizing:border-box;border:1px solid black;} 
 
#floorplan{ 
 
    border:1px solid red; 
 
    width: 700px; height:360px; 
 
    display:flex; 
 
} 
 
#living{ 
 
    width:430px; 
 
    display:flex; 
 
    flex-flow:row wrap; 
 
} 
 
#terrace{ 
 
    width:270px; 
 
} 
 

 
#bedroom1,#bedroom2{ 
 
    width:140px; 
 
    height:150px; 
 
} 
 
#bath{ 
 
    width:140px; 
 
    height:56px; 
 
} 
 
#kitchen{ 
 
    width:240px; 
 
    height:150px; 
 
} 
 
#wc{ 
 
    width:46px; 
 
    height:150px; 
 
    flex-grow:1; 
 
} 
 
#livingroom{ 
 
    width:286px; 
 
    flex-grow:1; 
 
    border:none; 
 
    align-self:flex-end; 
 
    text-align:center; 
 
} 
 
#kidsroom{ 
 
    width:150px; 
 
    height:110px; 
 
    align-self:flex-end; 
 
}

<div id="floorplan"> 
 

 
    <div id="living"> 
 
    <div id="bedroom1">Schlafzimmer 1</div> 
 
    <div id="kitchen">Küche</div> 
 
    <div id="wc">WC</div> 
 
    <div id="bath">Bad</div> 
 
    <div id="livingroom">Wohnzimmer</div> 
 
    <div id="bedroom2">Schlafzimmer 2</div> 
 
    <div id="kidsroom">Kinderzimmer</div> 
 
    </div> 
 

 
    <div id="terrace"> 
 
    Terrasse 
 
    </div> 
 

 
</div>

一つの欠点はですフレックスボックスにはボックスサイズの問題がありますので、正しく動作させるにはトリックを行う必要があります。