#概要
JSON形式のデータをHTMLのTableタグに表示する内容です。
TableのレイアウトはBootstrapを利用します。

#ソース
下記のHTMLソースをコピーし、HTMLファイルに保存します。

<!doctype html>
<html lang="ja">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <title>テーブルサンプル</title>
</head>
 
<body>
    <h1 class="my-3 ml-3">テーブル</h1>
 
    <div class="col-5 ml-3">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>氏名</th>
                    <th>得意言語</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>エンジニア1</td>
                    <td>PHP</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>エンジニア2</td>
                    <td>Ruby</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>エンジニア3</td>
                    <td>VBA</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>エンジニア4</td>
                    <td>JAVA</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>エンジニア5</td>
                    <td>Python</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
 </html>

#ブラウザで確認
上記のHTML内容は以下のように表示されます。

#Bootstrapのレイアウト
下記の参照サイトから好きなタイプのTableレイアウトをコピーして、上記のHTMLファイルに貼り付けます。

■参照サイト
・参照したソース
https://www.sejuku.net/blog/81660

・BootStrapV5.0
https://getbootstrap.jp/docs/5.0/content/tables/

・BootStrapV4.3
https://getbootstrap.jp/docs/4.3/content/tables/

<!doctype html>
<html lang="ja">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

	<script type="text/javascript">
	var jsonData = [
	   { "col1":"value1-1", "col2":"value1-2", "col3":"value1-3"}
	   , { "col1":"value2-1", "col2":"value2-2", "col3":"value2-3"}
	   , { "col1":"value3-1", "col2":"value3-2", "col3":"value3-3"}
	];

	$(function() {
	   $("#data-bind-json-sample").DataTable({
	   //"language": {"url":"https://cdn.datatables.net/plug-ins/1.11.3/i18n/ja.json"},
	       data: jsonData
	       , columns: [
	              { data: 'col1' },
	              { data: 'col2' },
	              { data: 'col3' }
	          ],
	          paging: false,
              searching: false,
	   });
	})
	</script>
    <title>テーブルサンプル</title>
    
</head>
 
<body>
    <h1 class="my-3 ml-3">テーブル</h1>
 
    <div class="col-5 ml-3">
		<table class="table table-striped" id="data-bind-json-sample">
		  <thead>
		    <th>col1</th>
		    <th>col2</th>
		    <th>col3</th>
		  </thead>
		  <tbody>
		  </tbody>
		</table>
    </div>
</body>
</html>

#テーブル表示
上記のソースで下記のClassのみ変更するとレイアウトが変更されることが分かります。
ページング処理も表示は可能ですが、現在Falseに指定しています。
※languageのオプションですが、うまく動かないので、コメントアウトしました。

class="table table-striped table-dark"

■変更前

■変更後

#終わりに
今日はJSON形式であるデータをTableタグにバインドして表示してみました。
まだDataTableにオプションが多くりますので、必要に応じて追加してみてください。
以上！！！