%%html
<html>
    <head>
        <style>
            #output {
                background-color: #f86ddf;
                padding: 50px;
                border: 40px solid #1a334f;
            }
        </style>
    </head>
    <body>
        <div id="output">
            Hello world!
        </div>
    </body>
</html>
Hello world! 
%%html
<head>
    <!-- load jQuery and DataTables scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<table id="table" class="table" style="width:100%">
    <thead id="head">
        <tr>
            <th>Name</th>
            <th>Capital</th>
            <th>Flags</th>
        </tr>
    </thead>
    <tbody id="body"></tbody>
</table>

<script>
  $(document).ready(function() {
    const options = {
    method: 'GET',
    async: true,
    crossDomain: true,
    headers: {
      'X-RapidAPI-Key': '80ed0e7619msh300fdfb6098c24cp160b71jsn6b8d978c56ec',
      'X-RapidAPI-Host': 'geography4.p.rapidapi.com',
    },
  };

  
  // fetch the API
  fetch('https://geography4.p.rapidapi.com/apis/geography/v1/country?params=%7B%22name.common%22%3A%20%22united%20states%22%7D&view=summary', options)

    .then(response => {
      if (!response.ok) {
        throw new Error('API response failed');
      }
      return response.json();
    })
    .then(data => {
      for (const row of data) {
        // BUG warning/resolution - DataTable requires row to be single append
        $('#body').append('<tr><td>' + 
            row.name["common"] + '</td><td>' + 
            row.capital[0]["name"] + '</td><td>' + 
            row.flags["png"] + '</td></tr>');
      }
      // BUG warning - Jupyter does not show Datatable controls, works on deployed GitHub pages
      $("#table").DataTable();
    })
    .catch(error => {
      console.error('Error:', error);
    });
  });
</script>
Name Capital Flags 
%%html
<head>
    <!-- load jQuery and DataTables scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<table id="table" class="table" style="width:100%">
    <thead id="head">
        <tr>
            <th>Name</th>
            <th>Capital</th>
            <th>Flags</th>
        </tr>
    </thead>
    <tbody id="body"></tbody>
</table>

<script>
  $(document).ready(function() {
    const options = {
      method: 'GET',
      async: true,
      crossDomain: true,
      headers: {
        'X-RapidAPI-Key': '80ed0e7619msh300fdfb6098c24cp160b71jsn6b8d978c56ec',
        'X-RapidAPI-Host': 'geography4.p.rapidapi.com',
      },
    };

    // fetch the API
    fetch('https://geography4.p.rapidapi.com/apis/geography/v1/country?params=%7B%22name.common%22%3A%20%22united%20states%22%7D&view=summary', options)
      .then(response => {
        if (!response.ok) {
          throw new Error('API response failed');
        }
        return response.json();
      })
      .then(data => {
        for (const row of data) {
          // BUG warning/resolution - DataTable requires row to be single append
          $('#body').append('<tr><td>' + 
              row.name["common"] + '</td><td>' + 
              row.capital[0]["name"] + '</td><td>' + 
              row.flags["png"] + '</td></tr>');
        }
        // Initialize DataTables with search functionality
        $("#table").DataTable({
          searching: true // Enable search feature
        });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  });
</script>
Name Capital Flags