Milind Daraniya

Hey there, web developers! If you're looking to create a table structure without using the traditional <table> HTML element, you've come to the right place! In this tutorial, I'll show you how to achieve a table layout using <div> elements and CSS. Let's get started!

Setting Up the HTML Structure

First, let's create the basic HTML structure. We'll use nested <div> elements to mimic the rows and columns of a table:

<div class="table">
  <div class="row">
    <div class="cell">Row 1, Cell 1</div>
    <div class="cell">Row 1, Cell 2</div>
    <!-- Add more cells for Row 1 if needed -->
  </div>
  <div class="row">
    <div class="cell">Row 2, Cell 1</div>
    <div class="cell">Row 2, Cell 2</div>
    <!-- Add more cells for Row 2 if needed -->
  </div>
  <!-- Add more rows if needed -->
</div>

Styling the Div Table

Now, let's apply some CSS to make the div-based table resemble a traditional HTML table:

<style>
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }

  .row {
    display: table-row;
  }

  .cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

Customize to Your Needs

Feel free to customize the .cell class with any additional styling that suits your design. You can set widths, heights, colors, backgrounds, and more!