HTMLで配列を表示する方法 - シンプルで効果的なコード例

テーブルを使用する方法: 配列の要素を表形式で表示するために、HTMLテーブルを使用することができます。以下はその例です。

<table>
  <tr>
    <th>インデックス</th>
    <th>要素</th>
  </tr>
  <tr>
    <td>0</td>
    <td>要素1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>要素2</td>
  </tr>
  <!-- 追加の要素を必要に応じて繰り返し -->
</table>

この例では、テーブルの各行に配列の要素を表示しています。<th>要素はテーブルのヘッダーを定義し、<td>要素はテーブルのデータセルを定義します。

リストを使用する方法: 配列の要素を順序リスト(<ol>)または順序のないリスト(<ul>)として表示することもできます。以下はその例です。

<ol>
  <li>要素1</li>
  <li>要素2</li>
  <!-- 追加の要素を必要に応じて繰り返し -->
</ol>

この例では、順序リスト(<ol>)を使用して配列の要素を表示しています。順序のないリスト(<ul>)を使用する場合は、<ol>を<ul>に置き換えてください。

JavaScriptを使用する方法: もし配列の要素を動的に表示したい場合は、JavaScriptを使用することもできます。以下はその例です。

<div id="arrayOutput"></div>
<script>
  var array = ['要素1', '要素2', /* 追加の要素を必要に応じて繰り返し */];
  var output = "";
  for (var i = 0; i < array.length; i++) {
    output += array[i] + "<br>";
  }
  document.getElementById("arrayOutput").innerHTML = output;
</script>

この例では、配列の要素を改行(<br>)で区切って表示するために、JavaScriptを使用しています。<div>要素のid属性が"arrayOutput"である要素に結果が表示されます。

これらの方法を使って配列をHTMLで表示することができます。必要に応じて要素を追加し、コードをカスタマイズしてください。