HTML表格布局[作业]

Question

我必须为学校作业制作一个网页，在那个页面中我必须使用表格制作平面图，如果用户点击房间名称，则应打开包含该房间信息和详细信息的网页。 / p>

我有这个PDF文件，每个房间的质量（抱歉用德语）：

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

问题是我甚至不知道需要多少行和列。你能救我吗？

Answer 1

请再次仔细查看说明。第一步从一个包含一行和两列的表开始，每列都有 （点e）。然后为每个后续步骤创建新表（点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>

不幸的是，教师的知识往往非常过时，所以请随时告诉老师我告诉你的内容或将他们推荐给这个答案，这样他们将来可以更新这个作业。

为了完整起见，这里是半成品的flex-box版本，以表明使用这种方法很容易实现：

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>

一个缺点是Flex-box存在盒子大小问题，所以你需要做一些技巧才能使它正常工作。