簡易的なテーブルの作成について

初めに

  • 学習したことをアウトプットし、学習の定着効率を上げます。

  • 初学者にもわかりやすく書いていきます。

完成物

作成手順

上段を作成する。

<table border="1">
    <tr>
      <td>山田</td>
      <td>太郎</td>
    </tr>
</table>

  • tableタグにボーダーを当てはめるためにborder="1"をあてる

  • table要素の中にtr要素を挿入する。

  • tr要素の中にtd要素を挿入する。

  • td要素の間に山田、太郎を挿入する。

下段作成する。

<table border="1">
    <tr>
      <td>山田</td>
      <td>太郎</td>
    </tr>
    
    <tr>
      <td>田中</td>
      <td>花子</td>
    </tr>
  </table>

  • table要素の中、上段のtr要素と同じ階級にtr要素を挿入する。

  • tr要素の中にtd要素を挿入する。

  • td要素ないに田中、花子を挿入。

要素の説明

  • tableはテーブルを作成する範囲を示す。

  • trはtable rowの略。テーブルの１行を定義。

  • tdはtable data sellの略。テーブルのデータが入るセルを定義している。

結語

  • tableは表である。

  • table,tr,tdの要素がそれぞれ入れ子の関係になる。

  • tableはテーブルを作成する範囲を示す。

  • trはtable rowの略。テーブルの１行を定義。

  • tdはtable data sellの略。テーブルのデータが入るセルを定義している。