DB Library

AdminLTE

https://adminlte.io/

W3schools

https://www.w3schools.com/html/default.asp

javatpoint

https://www.javatpoint.com/html-tutorial

DataTables

https://datatables.net/examples/index

html

<table id="example" class="stripe" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            
            ............
            
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

javascript

$(document).ready(function() {
    $('#example').DataTable();
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js

css

The following CSS library files are loaded for use in this example to provide the styling of the table:

https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css

참고

https://datatables.net/examples/styling/stripe.html

javascript

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'};

for(key in json) {
    alert('key:' + key + ' / ' + 'value:' + json[key]);
}

jquery

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; 

$.each(json, function(key, value){
    alert('key:' + key + ' / ' + 'value:' + value);
});

참고

https://gent.tistory.com/17

html의 td style 부분에 아래 내용을 추가

{ white-space:pre-line , word-break: break-all}

<table id="test_table">
  <thead>
    <tr>
      <th style="text-align:center;">ID</th>
      <th style="text-align:center;">Info Detail</th>
      <th style="text-align:center;">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 1 </td>
      <td style="white-space:pre-line;word-break: break-all;">
        Info 1
        Info 2
        Value 1
        Value 2
      </td>
      <td>'2021-07-10 09:00:00' 
      </td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

참고

https://stackoverflow.com/questions/10937218/how-to-show-multiline-text-in-a-table-cell