How to make a simple table html generator code tool java

How to make a simple responsive table HTML online generator tool rows and columns code tool javascript for your blogger




In this post, you will get an example of an HTML table generator as an online tool too using HTML for the structure, CSS for styling, and JavaScript for functionality by code below. 

This code generates a table and allows users to input the number of rows and columns they want:


web quiz example source code HTML javascript CSS:


<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS styles for the table */
    body {
      font-family: Arial, sans-serif;
    }
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #dddddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    input[type="number"] {
      width: 50px;
    }
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <label for="rows">Rows:</label>
  <input type="number" id="rows" min="1" value="3">
  
  <label for="columns">Columns:</label>
  <input type="number" id="columns" min="1" value="3">
  
  <button onclick="createTable()">Create Table</button>
  
  <div id="tableContainer"></div>

  <script>
    function createTable() {
      const rows = parseInt(document.getElementById('rows').value);
      const columns = parseInt(document.getElementById('columns').value);
      let tableHTML = '<table>';
      
      // Create table header
      tableHTML += '<thead><tr>';
      for (let i = 1; i <= columns; i++) {
        tableHTML += '<th>Header ' + i + '</th>';
      }
      tableHTML += '</tr></thead>';
      
      // Create table body
      tableHTML += '<tbody>';
      for (let i = 1; i <= rows; i++) {
        tableHTML += '<tr>';
        for (let j = 1; j <= columns; j++) {
          tableHTML += '<td>Row ' + i + ', Col ' + j + '</td>';
        }
        tableHTML += '</tr>';
      }
      tableHTML += '</tbody></table>';
      
      document.getElementById('tableContainer').innerHTML = tableHTML;
    }
  </script>

</body>
</html>

All you need is to Copy this code into a new HTML file and upload it to your Blogger as an HTML/JavaScript gadget within an HTML widget or as a new post by scrolling the HTML view It will create a table based on the number of rows and columns specified by the user and display it on the webpage. Adjust the styling or structure as needed to match your website's design.

Comments :

Post a Comment