欲しいものリストを作ってみよう！

あらかじめエディタに書くコード

                    <div class="box">
  <label for="name">名前</label>
  <input type="text" id="name">
  <label for="price">価格</label>
  <input type="number" id="price">
  <button>リストに追加</button>
</div>
<table>
  <tr>
    <th>名前</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>iphone 12</td>
    <td>80000円</td>
  </tr>
</table>
¥HTML¥
                

                    .box{
  display: flex;
  flex-direction: column;
  width: 300px;
}
.box input{
  margin-bottom: 10px;
}
table{
  border-collapse: collapse;
  width: 300px;
  margin-top: 30px;
}
th,td{
  border: 1px solid black;
  text-align: center;
}
th{
  background-color: #eee;
}
¥CSS¥
                

期待する画面