作って覚えるGAS：献立スロット4

見た目を整える

「回す」をボタンらしく

青くしてリンクらしく
styleタグ内

#slot{
  text-decoration : underline;/*下線を付ける*/
  text-decoration-thickness: 1px;/*下線の太さ*/
  color:darkblue;/*文字色*/
  cursor: pointer;/*マウスカーソルを変更*/
}

もしくはボタンらしく
styleタグ内

#slot{
  display: inline-block;/*要素の種類を変更*/
  padding: 0.5em 1em;/*余白をとる*/
  background-color: turquoise;/*ボタンの色*/
  font-weight: bold;/*文字を太字に*/
  color: white;/*文字の色*/
  border-bottom: solid 4px teal;/*下線(影)の設定*/
  border-radius: 3px;/*下線(影)の両サイドを丸める*/
  cursor: pointer;/*マウスカーソルを変更*/
}
#slot:active {/*クリックしたときの動き*/
  transform: translateY(4px);/*下に下げる*/
  border-bottom: none;/*下線を消す*/
}

材料部分の改行を有効に

現在スプレッドシート内に記載した改行が消えていると思います。
これはテキストの改行が\nなのに対しHTMLの改行が<br>のためです。

function listDisplay(list){
  //tableの子要素を削除する
  $( "#display table" ).empty();
  //listの数だけ処理する
  for(let i = 0; i < list.length; i++){
    //表示するHTMLを作成する
    let description = '<tr><td>';
    description += list[i]["sheetName"];
    description += '</td><td>';
    description += list[i]["name"];
    description += '</td><td>';
    description += list[i]["foodstuff"].replace(/\n/g, '<br>');//\nを<br>に置換
    description += '</td><td>';
    description += '<a href="' + list[i]["recipeURL"] + '" target=”_blank”>レシピリンク</a>';
    description += '</td></tr>';
    //table内に出力する
    $( "#display table" ).append( description );
  }
}

見た目を整える

全体が左に寄っているので中央に寄せ、tableの枠線を引きます。

中央にもっていきたい要素をdivで囲います。
body内

<div id="whoppar">
  <a id="slot">回す</a>
  <div id="display">
    <table>
      <!-- ここにスプレッドシートの情報を出す <200b>-->
<200b>     </table>
  </div>
</div> 

cssで中央に寄せ、枠線を表示させる。
style内

#whoppar{
  max-width: 600px;/*幅　指定した幅よりウィンドウが小さいとウィンドウのサイズに沿う*/
  margin: 0 auto;/*中央に寄せる*/
}
#display table{
  border-spacing: 0;/*border間の幅ゼロ*/
  border:2px solid #333;/*borderの設定*/
  border-collapse: collapse;/*borderを重ねる*/
  width: 100%;/*tableの幅*/
}
#display td{
  border:1px solid #333;/*borderの設定*/
  padding: 10px;/*余白を指定*/
}

完成

完成品

見た目はcssをいじればどうとでもなるので、とりあえずこれで完成！
お疲れさまでした。