メニューの表示/非表示

画面幅が1300ピクセル以下のデバイスに適用される左メニューが隠れるスタイルを指定します、横幅を1300ピクセル以下にしてください。

-HTMLの表組み-

<table>

<table border="ピクセル数">: 罫線の太さを指定できる
<table border="ピクセル数" width="数 % か px">: 表組の横幅を指定できる
<table border="1" width="100%" style="table-layout: auto;">
<table border="1" width="100%" style="table-layout: fixed;">: table-layoutプロパティは表の表示
<table border="1" width="300" cellspacing="5"＞: cellspacing属性をつけることで、セルとセルの間隔を任意に指定できます。属性値は0からのピクセルで指定します。属性値を2に指定した場合、cellspacingを指定しないのと同じになります
<table width="100" height="100" border="2" cellpadding="6">: cellpadding属性をつけることセルの枠から文字までの距離（余白）

＜table＞タグ内

＜caption＞: 表に専用の題名・説明をつけることができる
＜tr＞: タグ横方向に行（ここからセルの表組）
＜th＞: 見出しの設定ができる太字・中央
＜／tr＞: タグで閉じたまでが一行の表となり
＜th or td colspan="右セル数"＞: 横方向に隣り合うセルの内容が同じであれば、結合の一番左になるセルのtd要素またはth要素にcolspan属性
＜th or td rowspan="下セル数"＞: 縦方向に隣り合うセルの内容が同じであれば、結合の一番上になるセルのtd要素またはth要素にrowspan属性を指定します
＜td＞: タグで括る内容がセルとなる; ※＜td rowspan="2"＞ジャンル名＜/td＞タグでジャンル別行数の数値とジャンル名書くことができる; ※見出し名1・見出し名２値が２だから見出し名も２つ
<thead>: <thead> 要素は、表の列の見出しを定義する行のセットを定義します; ボディ[表の本体]部分<tbody>〜</tbody>、フッタ部分<tfoot>〜</tfoot>に分けられます

例‐私の支出記録

購入	場所	日付	評価	コスト (€)

私が選んだお金の使い方
購入	Location	Date	Evaluation	Cost (€)
SUM				118
Haircut	Hairdresser	12/09	Great idea	30
Lasagna	Restaurant	12/09	Regrets	18
Shoes	Shoeshop	13/09	Big regrets	65
Toothpaste	Supermarket	13/09	Good	5

UP Page

--------------- Code ---------------
<table>
   <h1>私の支出記録</h1>
<thead>
  <tr>
   <th scope="col"><mark>購入</mark></th>
  　<th scope="col">場所</th>
   <th scope="col">日付</th>
    <th scope="col">評価</th>
   <th scope="col">コスト (€)</th>
  </tr>
</thead>
    <table border="1" cellpadding="20" style="border-collapse: collapse;  width: 80%;">
     <caption>私が選んだお金の使い方</caption>
      <thead>
         <tr>
            <th><mark>購入</mark></th>
           <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
          </tr>
        </thead>
     <tfoot>
          <tr>
            <td colspan="4">SUM
            <td>118</td>
         </tr>
        </tfoot>
       <tbody>
         <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/09</td>
           <td>Great idea</td>
            <td>30</td>
         </tr>
          <tr>
          <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/09</td>
            <td>Regrets</td>
            <td>18</td>
          </tr>
          <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>Big regrets</td>
            <td>65</td>
          </tr>
          <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/09</td>
            <td>Good</td>
            <td>5</td>
          </tr>
        </tbody>
    </table>

UP Page = MDN 公式サイト=
https://developer.mozilla.org/ja/search?q=table+%E8%A6%81%E7%B4%A0
https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse
https://developer.mozilla.org/ja/docs/Web/HTML/Element/th#attr-scope
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Styling_tables
https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td
https://developer.mozilla.org/ja/docs/Web/CSS/border-spacing
https://developer.mozilla.org/ja/docs/Web/CSS/table-layout